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

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

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

这在当一个页面上图片比较多的时候,能比较显著地提高页面加载完成的速度。 而如果页面本身比较长,而用户又没有滚动到图片位置,这时候的图片加载出来就没有太大意义,还会白白浪费很多服务器带宽和流量。 所以通常会使用 图片懒加载(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"/>

就这么简单。

通常来说,widthheight 尽量要有(写在 style 里面也是可以的),否则懒加载在 Chrome 上可能不会生效。

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

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

参考文章

标签:HTML