react项目实现图片懒加载提升网页性能
概述:
当网页中的图片数量较多时,一次性加载所有图片可能会导致页面加载速度缓慢,用户需要等待很长时间才能看到完整的页面。而使用图片懒加载技术,则可以在用户滚动页面时,才加载可视区域内的图片,从而提升网页性能和用户体验。
介绍:
图片懒加载是一种延迟加载图片的技术,在页面初次加载时,只加载可视区域内的图片,其余图片则暂时不加载,等到用户滚动页面将图片展示在可视区域时再进行加载。这样可以减少初始加载时的网络请求量,加快网页加载速度。
具体实现方法:
1.将所有要懒加载的图片的 src 属性改为 data-src 属性:
<div className="main" onScroll={handelScroll} ref={scorllRef}>
{newlist.map((item) => (
<div className="main-item" key={item._id}>
<img
src="/default.jpg"
data-src={item.img}
alt=" "
}}
/>
</div>
))}
</div>
从代码中可以看出我们是用在一个盒子内使用map方法渲染出一个图片列表,在每一个图片标签内,我们定义了两个属性分别是src和data-src, 具体怎么实现虚拟化长列表及触底加载可以看我另一篇博客 这里我们只说如何实现图片懒加载,其中src中放加载中的图片如空白图片,data-src中放你要显示的图片
2. 实现图片懒加载, 在react中我以函数组件为例先贴代码块
useEffect(() => {
// 创建 IntersectionObserver 实例
const ob = new IntersectionObserver(
(entries) => {
for (let entry of entries) {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 将 data-src 的值赋给 src,实现图片加载
}
}
},
{
root: null, // 相对于整个视口进行判断
rootMargin: '0px', // 元素进入视口一段距离即触发
threshold: 1, // 元素完全进入视口时触发
},
);
// 获取所有带有 data-src 属性的图片元素
const imgs = document.querySelectorAll('img[data-src]');
// 遍历图片元素,将每个元素绑定到 IntersectionObserver 上进行观察
imgs.forEach((item) => {
ob.observe(item);
});
}, [newlist]);
- IntersectionObserver 是一个 JavaScript API,用于观察指定元素与其祖先元素或视口(可见区域)的交叉状态
- newlist指得是虚拟化长列表里的状态,是我自定义的状态不是方法每次滚动位置都会更改newlist的状态所以用它作为依赖项
这样我们就实现了图片的懒加载,如果没有帮助到你可以看我另一篇博客链接: JavaScript实现图片懒加载