JS 实现图片懒加载

实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。以下是实现图片懒加载的一般思路：

1. 标记要延迟加载的图片:
   - 在HTML中，为要进行懒加载的图片元素添加一个占位符，通常是一个小尺寸的透明图片或者一个简单的`

`元素。这个占位符将首先显示在页面上，代替原始图片。

2. 设置数据属性:
   - 为每个要懒加载的图片元素添加一个自定义数据属性，例如`data-src`，用于存储原始图片的`src`属性的值。将`src`属性设置为空或者一个占位符。

3. 监测滚动事件:
   - 使用JavaScript来监测页面滚动事件。当用户滚动页面时，您可以计算每个图片元素是否进入了可见区域。

4. 加载图片:
   - 当图片进入可见区域时，通过JavaScript将`data-src`属性的值设置为`src`属性，从而加载原始图片。这会触发浏览器下载图片。

5. 取消滚动事件监听:
   - 一旦图片加载完成，您可以停止对滚动事件的监听，以减少不必要的计算和处理。

以下是一个简单的示例代码来实现图片懒加载：

效果展示： 

原生图片懒加载