为了提升首屏加载速度、节省用户流量，我们曾经依赖各种 JavaScript 库或者手动基于 Intersection Observer API 实现一套复杂的懒加载逻辑来处理图片懒加载。

现代浏览器早已为我们带来了原生的解决方案，只需一行代码，就能实现高效、可靠的图片懒加载。

loading="lazy"是什么？

loading 是 <img> 和 <iframe> 标签的一个新属性，它告诉浏览器应该如何加载这个资源。

看看它的使用有多简单：

<!-- 传统方式，需要JS配合 -->
<img data-src="image.jpg" class="lazyload" alt="一张需要懒加载的图片">

<!-- 现在的方式，原生支持！ -->
<img src="image.jpg" loading="lazy" alt="一张浏览器会自动懒加载的图片">

没错，就是这么简单！不再需要 data-src，不再需要特定的 class，也不再需要任何初始化脚本。只需在 <img> 标签上添加 loading="lazy"，浏览器就会在图片滚动到视口附近时才开始加载它。

虽然 loading="lazy" 非常强大，但在使用时仍需注意几点：

不要对首屏图片使用 lazy

对于一进入页面就能看到的图片（例如网站Logo、首屏Banner），不要使用 loading="lazy"，懒加载它们会延迟其显示时间，降低用户体验。

正确做法：首屏或视口内的关键图片，应使用 loading="eager" 或干脆不写 loading 属性。

<!-- 错误 ：首屏Banner不应懒加载 -->
<img src="hero-banner.jpg" loading="lazy" alt="Website Banner">

<!-- 正确 ：让首屏图片立即加载 -->
<img src="hero-banner.jpg" loading="eager" alt="Website Banner">
<!-- 或者直接不写，默认为eager -->
<img src="hero-banner.jpg" alt="Website Banner">

务必指定 width和 height

为图片设置 width 和 height 属性，可以让浏览器在图片加载完成前就预留出准确的空间，有效防止因图片加载导致的页面内容跳动，从而提升用户体验。

<!-- 强烈推荐  -->
<img src="article-image.jpg" loading="lazy" width="800" height="450" alt="文章配图">

浏览器原生 loading="lazy" 是Web标准演进中一个“小而美”的典范，它将一个曾经复杂的前端优化任务，变成了一个简单的HTML属性。