如何实现amp-img的懒加载？

Question

如何实现Google AMP项目的 lazy loading 图像加载？

据我所知，lazy loading 意味着在渲染以上折叠内容后，图像会在某个时间点被加载到客户端。似乎有三种延迟加载的变体：

1.视口 - 通过其与视口的接近触发图像加载 2.设置延迟 - 通过定时器触发图像加载 3.手动 - 客户端事件触发图像加载

所有这些方法都可以使用JavaScript实现。但是，AMP不允许使用JavaScript，只允许使用自定义AMP脚本。

视口方法是最理想的，因为它将内容加载最小化。AMP具有支持视口方法启动和停止视频的自定义脚本。但是，似乎没有类似于amp-img的支持。

设置延迟似乎可以在amp-animation中得到支持。这似乎是一种相当复杂的方法。此外，延迟方法是不可取的，因为最佳延迟取决于可变的互联网带宽。

延迟方法也可以使用PHP实现。但是，PHP在服务器端解析。这意味着页面必须重新加载，这完全违背了延迟加载的目的。

手动方法似乎是唯一剩下的方法。以下代码片段创建两个按钮，可以选择性地显示或隐藏图像。

amp-img id='img1' ... hidden

button on="tap.img1.show()"

button on="tap.img1.hide()"

对于移动站点，show按钮可以嵌入到以上折叠内容中，因此用户在浏览站点时可以触发它。但是，这似乎是一种不太完美的解决方法。

Google AMP是否有效地限制了延迟加载到手动方法，还是有其他方法可以实现视口或延迟延迟加载？

提前感谢您。

- Bruce

Answer 1

所有AMP元素始终都是惰性加载的。目前还没有办法配置惰性加载的阈值（例如基于与视口的距离）。

- Malte Ubl

---

AMP元素不会自动进行延迟加载。我刚刚检查了加载在Google的CDN上的索引页面。它加载了一张距离页面顶部几个视口距离的图片。 - Bruce

我创建了AMP，所以非常清楚它的功能。它最终会下载当前视口内3个视口范围内的所有图片。 - Malte Ubl

当视口小于500像素时，我想要延迟加载的图像才会显示出来。我想要延迟加载的图像距离页面顶部大约有4到5个视口的距离。它会在页面刷新时加载。因此，它计入了渲染页面所需的时间。Google Lighthouse对此进行了警告，并建议使用延迟加载。 - Bruce

Answer 2

根据AMP文档，AMP图像是惰性加载的。他们指出<amp-img>标签被AMP运行时用于：

• 在资产加载之前了解页面的布局，这对支持首视口预加载至关重要

• 控制网络请求以延迟加载和有效地优先处理资源

简而言之：您不需要对图像进行惰性加载。它们已经为您完成了。 这样做很有意义，特别是因为AMP的整个目的是提高性能，而惰性加载是可以改善速度的最基本的事情之一。

实际上，AMP做得更聪明：预取惰性加载的资源：

"AMP还预取了懒加载资源。资源尽可能地晚加载，但尽可能早地预取。这样，东西加载得非常快，但只有在资源实际显示给用户时才使用CPU。"

如果你深入了解AMP运行时，你会发现他们实际上实现了比懒加载更高级的技术，这就是为什么AMP几乎是瞬间完成的原因...

- user10802954