react 判断img加载完成

 

react 判断img加载完成

在React中，可以通过监听img元素的load事件来判断图片是否加载完成。以下是一个简单的例子：

 

 

import React, { useState, useRef } from 'react';

 

const ImageLoader = () => {

const [imageLoaded, setImageLoaded] = useState(false);

const imgRef = useRef(null);

 

const handleImageLoad = () => {

if (imgRef.current) {

setImageLoaded(true);

}

};

 

return (

<div>

<img

ref={imgRef}

src="path_to_your_image.jpg"

onLoad={handleImageLoad}

alt="示例图片"

/>

{imageLoaded ? '图片加载完成' : '图片加载中...'}

</div>

);

};

 

export default ImageLoader;

在这个例子中，我们使用了React的useRef来获取DOM元素的引用，并通过onLoad事件处理器handleImageLoad来更新状态，指示图片加载完成。imageLoaded状态变量用于在图片加载完成后显示相应的消息。

提示：AI自动生成，仅供参考