react实现图片懒加载

概述：

当网页中的图片数量较多时，一次性加载所有图片可以回导致页面加载速度缓慢，用户需要等待很长时间才能看到完整页面。而使用图片懒加载技术，则可以在用户滚动页面时，才加载可视区内的图片，从而提升网页性能和用户体验。

介绍：

图片懒加载是一种延迟加载图片的技术，在页面初次加载时，只加载可视区域内的图片，其余图片则暂时不加载，等到用户滚动页面将图展示在可视区域时在进行加载。这样可以减少初始化加载时的网络请求量，加载网页加载速度。

具体实现方式

1.将所有需要懒加载的图片的src属性改为data-src属性：

从代码中可以看出我们是用在一个盒子内使用map方法渲染出一个图片列表，在每一个图片标签内，我们定义了两个属性分别是src和data-src，其中src中放加载中的图片如空白图片；date-src中放你要显示的图片

2.实现图片懒加载，在react中我以函数组件为例

• intersectionObserver是一个javascript api，用于对观察指定元素与其祖先元素或视口（可见区域）的交叉状态
• newlist指的是虚拟化长列表里的状态，是我自定义的状态不是方法每次滚动位置都会更改newlist的状态所以用它作为依赖项