占位符 & 回退

为了提高感知性能和渐进增强，在 AMP 中尽可能提供占位符和回退是最佳实践。

有些元素甚至会因为你这样做而放宽限制——例如，如果你为 amp-iframe 提供占位符，它就可以在页面顶部附近使用（如果没有占位符则无法工作）。

占位符

带有 placeholder 属性的元素充当父 AMP 元素的占位符。如果指定，placeholder 元素必须是 AMP 元素的直接子元素。标记为 placeholder 的元素将始终 fill 父 AMP 元素。

<amp-anim src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300"
  alt="...">
  <amp-img placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill"
    alt="...">
  </amp-img>
</amp-anim>

在 playground 中打开此代码片段

默认情况下，即使 AMP 元素的资源尚未下载或初始化，也会立即为 AMP 元素显示占位符。一旦准备就绪，AMP 元素通常会隐藏其占位符并显示内容。

注意 – 占位符不必是 AMP 元素；任何 HTML 元素都可以充当占位符。

回退

你可以在元素上指定 fallback 属性以指示回退行为

对于浏览器不支持的任何元素
如果内容加载失败（例如，推文被删除）
如果不支持图像类型（例如，并非所有浏览器都支持 WebP）

你可以在任何 HTML 元素上设置 fallback 属性，而不仅仅是 AMP 元素。如果指定，fallback 元素必须是 AMP 元素的直接子元素。

示例：不支持的功能

在以下示例中，我们使用 fallback 属性来告知用户浏览器不支持特定功能

此浏览器不支持视频元素。

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

在 playground 中打开此代码片段

示例：提供不同的图像格式

在以下示例中，我们使用 fallback 属性来告诉浏览器如果不支持 WebP 格式，则使用 JPEG 文件。

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

在 playground 中打开此代码片段

占位符和回退的交互

对于依赖动态内容的 AMP 组件（例如，amp-twitter、amp-list），回退和占位符的交互如下

在内容加载时显示占位符。
如果内容加载成功，则隐藏占位符并显示内容。
如果内容加载失败
1. 如果有回退元素，则显示回退。
2. 否则，继续显示占位符。

隐藏加载指示器

许多 AMP 元素被列入允许显示“加载指示器”的白名单，这是一个基本动画，显示该元素尚未完全加载。元素可以通过添加 noloading 属性来选择退出此行为。

作者 @pbakaus
由 @bpaduch 贡献