佔位符 & 後備機制

為了提升使用者感受到的效能和漸進式增強效果，在 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 屬性來告知使用者瀏覽器不支援特定功能

此瀏覽器不支援 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 中開啟此程式碼片段

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

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