占位符和后备

本着感知性能和渐进增强的精神，在 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>

在操场上打开此代码段

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

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

备用

可以在元素上指定 fallback 属性以指示备用行为

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

可以在任何 HTML 元素（而不仅仅是 AMP 元素）上设置 fallback 属性。如果指定，则 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>

在操场上打开此代码段

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

在以下示例中，我们使用 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>

在操场上打开此代码段

占位符和后备的交互

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

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

隐藏加载指示器

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

由 @pbakaus 撰写
由 @bpaduch 提供帮助