原生延迟加载 <img> 和 <iframe> 即将登陆 Web

延迟加载图片 #3752

我对loadingHTML 中即将推出的属性感到非常兴奋。

<img src="example.jpg" loading="lazy" alt="example" />
<iframe src="example.html" loading="lazy"></iframe>

此处的延迟加载是指延迟加载某些内容，直到用户在页面上靠近该内容为止。如果用户从未滚动到该内容，则该内容永远不会加载。

加载属性有三个可能的参数：

• lazy：延迟加载的候选。
• eager：立即加载。
• auto：这相当于没有该属性。

你可能见过一些延迟加载库，它们会在加载完整图片之前显示图片的“预览”。从某些方面来说，这是一种非常高效的网页内容交付方式，但由于它是通过 JavaScript 实现的，所以有点儿像 hack 一样。我从来不想让 JavaScript 妨碍用户的基本网页体验。

这个新属性可以让这种情况顺利发生。

它将在 Chrome 75 中可用，可以通过访问chrome://flags

更多信息：

Addy Osmani 的帖子

规范 PR：

延迟加载图片 #3752

bengreenstein 发表于2018年6月8日

@多梅尼克

这是规范变更的草案，用于支持 iframe 和 img 元素中的 lazyload 属性。

---

问题：#2806 测试：https://chromium-review.googlesource.com/c/chromium/src/+/1417117（wpt 导出）

---

/embedded-content.html（差异）/images.html（差异）/index.html（差异）/indices.html（差异）/media.html（差异）/rendering.html（差异）/urls-and-fetching.html（差异）

在 GitHub 上查看

您对此有何感想？