浏览器 IMG 图片原生懒加载 loading="lazy"

Lruihao — Sun, 12 Feb 2023 19:40:43 +0800

记录使用 HTML 原生方案实现图片的懒加载。

语法规范

HTML loading 属性适用于 img 和 iframe，语法规范见 HTML Standard - Lazy loading attributes。

关键词	状态	描述
`lazy`	懒惰的	用于延迟获取资源，直到满足某些条件。
`eager`	渴望的	用于立即获取资源；默认状态。

属性的 缺失值默认值 和 无效值默认值 都是 Eager状态。

实际应用

基于 FixIt 主题版本大于 v0.2.18 的博客网站使用就是原生的懒加载方案，大致如下：

1
2
3
4
5
6
7
8


<img
  loading="lazy"
  src="./example.jpg"
  data-title="title text"
  data-alt="alt text"
  onload="this.title=this.dataset.title;this.alt=this.dataset.alt;for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute(a);}this.dataset.lazyloaded='';"
  onerror="this.title=this.dataset.title;this.alt=this.dataset.alt;for(const a of ['data-title','data-alt','onerror','onload']){this.removeAttribute(a);}"
/>

为了达到 loading 的效果，以上代码中在 onload 后会给图片加上一个 data-lazyloaded 属性，所以我们可以这样来写 css 以达到显示 loading 图标的效果：

1
2
3


img[loading='lazy']:not([data-lazyloaded]) {
  background: url(loading.svg) no-repeat center;
}

设置 data-title 和 data-alt 是因为移动浏览器大多数只要有 title 或 alt 就会显示图片的替代字符，所以等到图片加载完或加载失败后再回填。

懒加载特性的研究

以下结论来自浏览器 IMG 图片原生懒加载 loading=”lazy”实践指南 « 张鑫旭-鑫空间-鑫生活总结部分。

Lazy loading 加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系.
Lazy loading 加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。
Lazy loading 加载没有缓冲，滚动即会触发新的图片资源加载。
Lazy loading 加载在窗口 resize 尺寸变化时候也会触发，例如屏幕高度从小变大的时候。
Lazy loading 加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。

HTML - 分类 - 菠菜眾長

浏览器 IMG 图片原生懒加载 loading="lazy"

语法规范

实际应用

懒加载特性的研究

参考链接