如何延迟加载 amp-img？答案

【问题标题】：How to lazy load amp-img?如何延迟加载 amp-img？
【发布时间】：2019-01-11 12:51:21
【问题描述】：

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

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

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

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

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

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

似乎只剩下手动方法了。下面的 sn-p 代码创建了两个按钮，可以选择性地显示或隐藏图像。

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

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

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

对于移动网站，显示按钮可以嵌入到折叠内容的上方，以便用户在浏览网站时触发它。然而，这似乎是一个kludge

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

提前谢谢你。

【问题讨论】：

【解决方案1】：

所有 AMP 元素始终都是延迟加载的。目前无法配置延迟加载的阈值（例如，基于与视口的距离）。

【讨论】：

AMP 元素不会自动延迟加载。我刚刚检查了加载在 Google 的 CDN 上的索引页面。它加载的图像距离页面顶部有几个视口。
我创建了 AMP，所以确切知道它的作用? 它最终会下载当前视口的 3 个视口内的所有图像。
我要延迟加载的图片只有在视口小于500像素时才会显示。我要延迟加载的图像距离顶部大约 4 或 5 个视口。它在页面刷新时加载。因此，它计算呈现页面所需的时间。谷歌灯塔对此表示赞同并建议使用延迟加载。

【解决方案2】：

根据AMP documentation，AMP 图像是延迟加载的。他们声明<amp-img> 标签被 AMP 运行时用于：

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

控制网络请求以延迟加载并有效地确定资源的优先级”

所以，简而言之：您不需要延迟加载图像。他们已经为你做了。

他们这样做是有道理的，特别是因为 AMP 的重点是性能，而延迟加载是可以用来提高速度的最基本的事情之一。

事实上，AMP 做了一些更聪明的事情：prefetching 延迟加载资源：

“AMP 还预取延迟加载的资源。资源加载越晚，但预取越早。这样加载速度非常快，但 CPU 仅在资源实际显示给用户时才使用。”

如果您更深入地研究 AMP 运行时，您会发现它们实际上实现了比延迟加载更先进的技术，这就是 AMP 接近即时的原因...

【讨论】：