记录使用 HTML 原生方案实现图片的懒加载。
语法规范
HTML loading 属性适用于 img 和 iframe，语法规范见 HTML Standard - Lazy loading attributes。
关键词 | 状态 | 描述 |
|---|---|---|
lazy | 懒惰的 | 用于延迟获取资源，直到满足某些条件。 |
eager | 渴望的 | 用于立即获取资源；默认状态。 |
属性的 缺失值默认值 和 无效值默认值 都是 Eager状态。
实际应用
基于 FixIt 主题 版本大于 v0.2.18 的博客网站使用就是原生的懒加载方案，大致如下：
代码语言：javascript复制<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 图标的效果：
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加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。
参考链接
- Lazy loading - Web 性能 | MDN
- Lazy loading via attribute for images & iframes 兼容性
