图片懒加载

为了优化页面性能、提升首屏加载速度并节省用户流量，在过去我们常常需要依赖各种 JavaScript 库，或者手动基于 Intersection Observer API 来实现一套复杂的图片懒加载逻辑。

现代浏览器早已内置了原生解决方案，只需添加一个简单属性，就能轻松实现高效、可靠的图片懒加载效果。

语法

传统方式（需要JS配合）

<img data-src="image.png" class="lazyload" alt="懒加载的图片" />

现代方式（原生支持）

<img src="image.png" loading="lazy" alt="懒加载的图片" />

属性说明

loading 属性是 HTML5 新引入的一个属性，用于控制浏览器如何加载图像资源。

属性值

loading 属性支持以下三个值：

1. lazy：浏览器会延迟加载图片，直到图片即将进入视口时才开始加载
2. eager：浏览器会立即加载图片，无论图片是否在视口内

工作原理

当图片设置了 loading="lazy" 时，浏览器会：

1. 首先检查图片是否在视口内或即将进入视口（通常是在视口下方一定距离内）
2. 如果图片不在视口附近，则不会加载图片资源
3. 当用户滚动页面，使图片接近视口时，浏览器才开始加载图片
4. 加载完成后，图片正常显示

注意事项

防止元素在图片懒加载时出现移位，需要使用 width 和 height 属性明确设置图片大小

浏览器兼容性

相关信息

• 表格中的数字表示该浏览器开始支持的最低版本
• "No" 表示该浏览器不支持此功能

PC 端

浏览器	版本支持
Chrome	76
Edge	79
Firefox	75
Opera	63
Safari	15.4

移动端

浏览器	版本支持
Chrome Android	76
Firefox Android	79
Opera Android	54
Safari iOS	15.4
WebView Android	76