在 Chrome 中切换延迟加载

我们可以在此处检查该功能是否已启用：chrome://flags/#enable-lazy-image-loading

推迟加载带有属性“loading=lazy”的图像，直到页面在它们附近向下滚动。

在新版本的Chrome浏览器中，我们可以延迟加载图像。

oc 延迟加载的目的是推迟加载页面上的图像，直到它们出现在用户屏幕上，从而为用户和服务器节省带宽。

要测试延迟加载，只需将 img 元素上的加载属性包含在 loading="lazy" 中。

在 HTML 中的图像上，这看起来像这样：

<img src="some-image-file.webp" alt="lazy loading example" loading="lazy" height="200px" width="200px">

包含 width 和 height 属性可防止图像开始加载后内容重新流动。

可能的值如下：

• auto – 默认（与不包括属性相同。）
• lazy - 图像只会在它们出现在屏幕上时加载。
• eager - 图像将尽可能快地加载。

它也应该适用于 iframe 元素，但我们当然希望避免使用框架，因为它们很少是正确的解决方案。
考虑使用 AJAX 或者服务器端代码而不是 iframe。

还应该注意的是，延迟加载在移动设备上效果最好，许多桌面用户发现这种行为会干扰他们的浏览体验。

目前还没有计划将此功能添加到 FireFox，而且 Safari 似乎也不支持它，因此我们需要使用 polyfill。