图片懒加载

图片懒加载（Lazy Loading）是一种优化技术，用于延迟加载页面中的图片，直到它们进入用户的可视区域（viewport）时才加载。这样可以减少页面初始加载时间，提升性能。以下是实现图片懒加载的几种常见方法：

---

1. 使用 loading="lazy" 属性（原生 HTML）

现代浏览器支持 loading="lazy" 属性，可以直接实现图片懒加载。

实现方式

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" loading="lazy" alt="Lazy Loaded Image">

特点

• 简单易用，无需额外 JavaScript。

• 兼容性：现代浏览器（Chrome 77+、Firefox 75+、Edge 79+ 等）。

• 不支持自定义加载占位符或加载动画。

---

2. 使用 Intersection Observer API

Intersection Observer API 是浏览器提供的原生 API，用于监听元素是否进入可视区域。

实现步骤

1. 将图片的真实 URL 放在 data-src 属性中。

2. 使用 Intersection Observer 监听图片元素。

3. 当图片进入可视区域时，将 data-src 的值赋给 src 属性。

代码示例

<img class="lazy" data-src="image-to-l