react项目优化重要手段之一——图片懒加载

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实现图片懒加载