在 html 中使用原生的 loading=lazy 方式实现图片懒加载

陪她去流浪 桃子 2022年12月12日 编辑 阅读次数：3037

图片懒加载，可以简单地理解为：在用户浏览网页时，只有当页面快要滚动到图片所在位置时，才加载所需的图片。 而不是在页面打开后就一个劲地把全部图片加载完整，尽管用户根本没有滚动到图片所在地方。

这在当一个页面上图片比较多的时候，能比较显著地提高页面加载完成的速度。 而如果页面本身比较长，而用户又没有滚动到图片位置，这时候的图片加载出来就没有太大意义，还会白白浪费很多服务器带宽和流量。 所以通常会使用 图片懒加载（image lazy loading） 技术。

基于 IntersectionObserver API 的方式

我在文章《IntersectionObserver API 的使用、元素相交/可见性判断 及 图片惰性加载的实现》里面提到了使用 IntersectionObserver API 来计算两个 HTML 元素是否相交。 “相交”的含义，即出现在了浏览器的可视区域。 判断相交可以做很多事情：

  • 惰性加载： 当图片元素进入到浏览器窗口内时才加载
  • 实现无限滚动： 当页面底部元素出现时，继续加载更多内容
  • 计算广告展现量： 广告都没有出现，广告是不是白打了？
  • 按需呈现动画： 当用户滚动到某一区域时，呈现某个动画

这种方式实现非常简单，但是需要对目标 HTML 文件进行改造：

  • 需要把 <img src="" /> 改成 <img data-src="" />；
  • 需要用脚本判断是否相交，如果相交，把 <img> 的 data-src 设置到 src；

这样就势必有些麻烦。

还有一个场景，是我在我的博客上遇到的：因为大部分的 RSS 阅读器是不支持执行 JS 脚本的。所以如果是采用的 RSS 阅读文章，则会出现图片无法加载的问题，因为 <img> 的 src 不见了。

总的来说，使用 IntersectionObserver API 完全能满足需求，但是始终感觉有点大材小用。 所以，更加符合人类使用直觉的方式出现了。

基于 loading=lazy 的方式

嘴里一直念叨着 lazy loading，lazy loading，在 <img> 加一个 loading=lazy 不就行了？的确，现在真的行了。

1

<img src="main.png" loading="lazy" width="100" height="100"/>

就这么简单。

通常来说，width 和 height 尽量要有（写在 style 里面也是可以的），否则懒加载在 Chrome 上可能不会生效。

实现效果可以参考这个 demo：https://mathiasbynens.be/demo/img-loading-lazy。

有了这个原生支持，我又删掉了很大一段代码！

参考文章

标签：HTML

相关文章