威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

使用浏览器原生懒加载loading=lazy实现图片延迟加载

懒加载或者延迟加载是我们优化前端页面展示常用的手段,网上有很多关于懒加载的js代码,或多或少都不是那么完美,其实从chrome 76之后,支持原生懒加载特性,使用 loading="lazy" 语法就可以实现。

在网页中,常常需要用到图片,而图片需要消耗较多的流量来加载,这样就影响页面的打开速度。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。

所以通常会使用图片懒加载(image lazy loading) 技术。就是在用户浏览网页时,只有当页面快要滚动到图片所在位置时,才加载所需的图片,而不是在页面打开后就一个劲地把全部图片加载完整。

jQuery插件 lazyload.js

早前很多都是用Lazy Load 这个 jQuery 插件,它是一个用来缓冲加载图片的插件。式实现非常简单,但是需要对目标 HTML 文件进行改造,在 img 标签中添加新的属性,把 src 属性的值指向占位图片,添加 data-original 属性,让其指向真正的图像地址。


<img src="img/seat.png" data-original="img/real.jpg" >

这样使用必然会有些麻烦。必须按照这种结构才有实际作用,需要对输出进行重新定义。影响RSS阅读文章,会出现无法加载图片的问题,因为大部分的RSS阅读器是不支持执行JS脚本的。而且这个对搜索引擎也不友好。

基于 loading=lazy 的方式

从chrome 76之后,支持原生懒加载特性,使用 loading="lazy" 语法。


<img src="picture.png" loading="lazy" width="200" height="200" />

通常来说,width 和 height 尽量要有。当浏览器加载图像时,它不会立即知道图像的尺寸,除非明确指定这些尺寸。为了让浏览器在页面上为图片预留足够的空间,建议所有的标签同时包含width和height属性。如果没有指定尺寸,可能会发生布局偏移,这在需要一些时间加载的页面上更为明显。

谷歌的web.dev上有详细的说明,可以查阅:https://web.dev/browser-level-image-lazy-loading/

您可能还会对这些文章感兴趣!

使用浏览器原生懒加载loading=lazy实现图片延迟加载:目前有 2 条评论

  1. 板凳
    物理穿透:联想浏览器 8.5.2 Android 10

    看到WordPress已经将Gravatar头像图片上默认加上了 loading="lazy" 了。

    2020-09-02 23:34 回复
  2. 沙发
    嗨皮波斯:Firefox 64.0 Windows 7

    能理解这个api的想法,眼睛可见的图片优先加载,网络良好时尽量延迟加载,网络不好时尽量加载,尽量让体验好起来,而不是一个劲的延迟加载,体验至上~

    2020-08-31 21:38 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin shock confused cool lol mad rolleyes wink cry