Platzhalter & Fallbacks

In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.

Einige Elemente werden Sie sogar dafür belohnen, indem Sie Einschränkungen lockern. Wenn Sie beispielsweise einen Platzhalter für amp-iframe bereitstellen, kann dieser oben auf der Seite verwendet werden (ohne den er nicht funktioniert).

Platzhalter

Das mit dem Attribut placeholder markierte Element agiert als Platzhalter für das übergeordnete AMP Element. Wenn ein Element placeholder angegeben ist, muss es dem AMP Element direkt untergeordnet sein. Ein als placeholder markiertes Element füllt das übergeordnete AMP Element dank fill immer aus.

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

Dieses Snippet im Playground öffnen

Standardmäßig wird der Platzhalter für das AMP-Element sofort angezeigt, auch wenn die Ressourcen des AMP-Elements nicht heruntergeladen oder initialisiert wurden. Sobald es fertig ist, versteckt das AMP-Element normalerweise seinen Platzhalter und zeigt den Inhalt an.

HINWEIS - Der Platzhalter muss kein AMP-Element sein. Jedes HTML-Element kann als Platzhalter fungieren.

Fallbacks

Du kannst das Attribut fallback für ein Element angeben, um das Fallback Verhalten festzulegen:

Für jedes Element wird der Browser nicht unterstützt
wenn der Inhalt nicht geladen werden kann (z. B. Tweet gelöscht)
Wenn der Bildtyp nicht unterstützt wird (z. B. wird WebP nicht in allen Browsern unterstützt).

Du kannst das Attribut fallback für ein beliebiges HTML Element festlegen, nicht nur für AMP Elemente. Wenn das fallback Element angegeben wird, muss es dem AMP Element direkt untergeordnet sein.

Beispiel: Nicht unterstützte Funktion

Im folgenden Beispiel verwenden wir das fallback Attribut, um dem Benutzer mitzuteilen, dass der Browser eine bestimmte Funktion nicht unterstützt:

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  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>

Dieses Snippet im Playground öffnen

Beispiel: unterschiedliche Bildformate bereitstellen

Im folgenden Beispiel verwenden wir das fallback Attribut, um den Browser anzuweisen, die JPEG-Datei zu verwenden, wenn das WebP-Format nicht unterstützt wird.

<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>

Dieses Snippet im Playground öffnen

Interaktion von Platzhaltern und Fallbacks

Für AMP Komponenten, die auf dynamischen Inhalten basieren (z. B. amp-twitter, amp-list), funktioniert die Interaktion von Fallbacks und Platzhaltern wie folgt:

Zeige den Platzhalter an, während der Inhalt geladen wird.
Wenn der Inhalt erfolgreich geladen wurde, blende den Platzhalter aus und zeige den Inhalt an.
Wenn der Inhalt nicht geladen werden kann:
1. Wenn ein Fallback Element vorhanden ist, zeige das Fallback an.
2. Andernfalls zeige weiterhin den Platzhalter an.

Ausblenden von Ladeindikatoren

Viele AMP Elemente lassen die Anzeige eines Ladeindikators zu. Das ist eine Standardanimation, die zeigt, dass ein Element noch nicht vollständig geladen ist. Mithilfe des Attributs noloading können Elemente ein solches Verhalten unterbinden.

Written by @pbakaus
with contributions from @bpaduch