lazy-loading - 如何延迟加载 amp-img？

Question

为符合 Google Accelerated Mobile Pages (AMP) 项目的页面延迟加载图像的方法是什么？

据我了解，延迟加载是指在呈现首屏内容后的某个时间将图像加载到客户端。延迟加载似乎有三种变体:

1. view port - 图像加载由其接近视口(viewport)触发
2. 设置延迟 - 图像加载由计时器触发
3. 手动 - 图像加载由客户端事件触发

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

视口(viewport)方法是最理想的方法，因为它将内容加载降至最低。 AMP 有一个自定义脚本，支持用于启动和停止视频的视口(viewport)方法。但是，似乎没有对 amp-img 的类似支持。

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

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

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

amp-img id='img1' ... 隐藏

按钮打开="tap.img1.show()"

按钮 on="tap.img1.hide()"

对于移动网站，可以将显示按钮嵌入到首屏内容中，以便用户在浏览网站时触发它。然而，这似乎是一个拼凑

Google AMP 是否有效地将延迟加载限制为手动方法，或者是否有其他方法来完成 View 端口或延迟延迟加载？

提前谢谢你。

Answer 1

所有 AMP 元素总是延迟加载。目前无法配置延迟加载的阈值(例如，基于与视口(viewport)的距离)。