2

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

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

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

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

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

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

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

似乎只剩下手动方法了。下面的代码片段创建了两个有选择地显示或隐藏图像的按钮。

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

按钮上="tap.img1.show()"

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

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

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

先感谢您。

4

2 回答 2

4

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

于 2018-05-09T15:43:05.477 回答
1

根据AMP 文档，AMP 图像是延迟加载的。他们声明<amp-img>AMP 运行时使用该标签来：

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

  • 有效控制网络请求延迟加载和优先资源"

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

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

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

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

如果您深入了解 AMP 运行时，您会发现它们实际上实现了比延迟加载更先进的技术，这就是为什么 AMP 几乎是即时的……

于 2019-01-11T04:40:00.353 回答