佔位符 & 後備機制

為了展現使用者感受到的效能和漸進式增強功能，在 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 元素 (而不只是 AMP 元素) 上設定 fallback 屬性。如果已指定，fallback 元素必須是 AMP 元素的直接子項。

範例：不支援的功能

在以下範例中，我們使用 fallback 屬性來告知使用者瀏覽器不支援特定功能

此瀏覽器不支援 video 元素。

<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 中開啟此程式碼片段

範例：提供不同的圖片格式

在以下範例中，如果瀏覽器不支援 WebP 格式，我們使用 fallback 屬性告知瀏覽器使用 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