等待所有图像加载到React中.JS

Question

我怎么能等到所有图像都加载到React中。JS？

问题是，我使用这些图像进行了一些计算(图像处理(，多次刷新浏览器的结果不同，因为在某些时候，计算是在图像100%加载之前开始的。有没有一种方法可以等到100%加载所有图像？

我试过这样的东西：

const [imagesLoaded, setImagesLoaded] = useState(false);

{images.map((image, index) => {
return <ShowImage source={image} index={index+1} key={index} onLoad={() => setImagesLoaded(index)} />
})}

const ShowImage: React.FC<{source:string, index: number, onLoad: () => void}> = ({source, index, onLoad}) => {
return (
<img src={source} width="640" height="480" id={'image' + index} alt={'image' + index} onLoad={onLoad}/>
)
}

还有"检查器"：

useEffect(() => {
if(imagesLoaded === 5) {
... do something
}
}, [imagesLoaded]);

但问题是，这只适用于第一个页面渲染，如果我刷新不起作用，但我再刷新一次又起作用，有时需要更多刷新，这是怎么回事？

Answer 1

您可以重构ShowImage组件，以便在加载最后一个图像源URL时仅设置imagesLoaded。

function ShowImages({ urls, setImagesLoaded }) {
const onLoad = (index) => {
if (index === urls.length - 1) {
setImagesLoaded(true)
}
};
return (
<>
{urls.map((url, index) => (
<img src={url} onLoad={() => onLoad(index)} key={url} />
))}
</>
);
}
export default ShowImages;

使用类似的组件

const [imagesLoaded, setImagesLoaded] = useState(false);
...
useEffect(() => {
if(imagesLoaded) {
... do something
}
}, [imagesLoaded]);
...
<ShowImages urls={images} setImagesLoaded={setImagesLoaded}/>

此处的工作示例

Answer 2

您的图像可能无法按预期顺序加载。如果您的第四个图像在第五个图像之后加载，则imagesLoaded的值在最后将为4。为了防止这种情况，我会一次增加一个值，所以当所有五个图像都加载时，值将为5。

onLoad={() => setImagesLoaded(v => v + 1)}