React - 异步图像加载
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
你好！👋 😊
你知道吗？如果在页面加载完成后再加载图片，用户就能更早看到内容，SEO工具也会检测到页面加载速度更快。🚀📈
在开始之前，我强烈建议您查看我们网站上提供的解决方案示例： React - 异步图像加载
在本文中，我想向您展示如何在 React 中创建一个简单的组件，该组件会在所有资源加载完毕后加载图形。
这种方法将加载过程分为两个步骤，从而加快页面加载速度：
- 页面加载（不使用异步图片）——我们可以更快地看到所有必要的内容，并且顺序正确。
- 异步图片加载 - 图片在页面准备就绪后加载。
最终效果： 页面渲染完成后（准备就绪时），当图像加载完毕时，箭头会标记线条。
下面我向您展示一种解决方案，其中我创建了一个仅存在于内存中的对象image，加载完成后，该对象会发出信号，在 React 中于网页上显示正确的图像。
实际例子：
import React from 'react';
const AsyncImage = (props) => {
const [loadedSrc, setLoadedSrc] = React.useState(null);
React.useEffect(() => {
setLoadedSrc(null);
if (props.src) {
const handleLoad = () => {
setLoadedSrc(props.src);
};
const image = new Image();
image.addEventListener('load', handleLoad);
image.src = props.src;
return () => {
image.removeEventListener('load', handleLoad);
};
}
}, [props.src]);
if (loadedSrc === props.src) {
return (
<img {...props} />
);
}
return null;
};
const App = () => {
return (
<div>
<AsyncImage src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<p>Some text here ...</p>
<AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
<p>Some text here ...</p>
<AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
<p>Some text here ...</p>
<AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
</div>
);
};
export default App;
我建议将解决方案复制到本地 React 项目中，打开浏览器中的开发者工具，然后运行应用程序以查看结果。
如果您觉得这篇文章有用，并且想看到更多类似的内容，可以点赞或评论一下，我会非常开心！😊
下次再见！🖐
给我们写信吧！✉
如果您有任何关于 React 或 JavaScript 的问题需要解决，或者有其他人无法解答的问题，又或者您正在寻找导师，请访问dirask.com -> Questions向我们提问。
文章来源：https://dev.to/diraskreact/react-async-image-loading-lka