Elementy zastępcze i zasoby rezerwowe

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

Niektóre elementy nagrodzą Cię nawet za zrobienie tego poprzez rozluźnienie ograniczeń — na przykład, jeśli podasz element zastępczy składnika amp-iframe, można go będzie użyć w pobliżu górnej części strony (bez czego nie będzie działać).

Elementy zastępcze

Element oznaczony atrybutem placeholder działa jako element zastęp-czy nadrzędnego elementu AMP. Jeśli jest określony, element placeholder musi być bezpośrednio podrzędny wobec elementu AMP. Element oznaczony jako placeholder będzie zawsze wypełnieniem (fill) nadrzędnego elementu AMP.

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

Domyślnie element zastępczy elementu AMP jest wyświetlany natychmiast, nawet jeśli zasoby elementu AMP nie zostały pobrane lub zainicjowane. Gdy element AMP jest już gotowy, zazwyczaj ukrywa swój element zastępczy i wyświetla zawartość.

Zasoby rezerwowe

Możesz określić atrybut fallback w elemencie, aby wskazać rezerwowy sposób działania:

• każdego elementu, którego nie obsługuje przeglądarka
• jeśli zawartość nie zostanie załadowana (np. usunięto tweet)
• jeśli typ obrazu nie jest obsługiwany (np. WebP nie jest obsługiwany we wszystkich przeglądarkach)

Atrybut fallback można ustawić w dowolnym elemencie HTML, nie tylko w elementach AMP. Element fallback, jeśli zostanie określony, musi być bezpośrednio podrzędny wobec elementu AMP.

Przykład: nieobsługiwana funkcja

W poniższym przykładzie używamy atrybutu fallback, aby poinformować użytkownika, że przeglądarka nie obsługuje danej funkcji:

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

Przykład: serwowanie innych formatów obrazów

W poniższym przykładzie używamy atrybutu fallback, aby poinformować przeglądarkę, że jeśli format WebP nie jest obsługiwany, ma użyć pliku 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>

Interakcja elementów zastępczych i zasobów rezerwowych

W przypadku składników AMP zależnych od zawartości dynamicznej (np. amp-twitter lub amp-list) interakcja między zasobami rezerwowymi a elementami zastępczymi działa w następujący sposób:

1. Wyświetlanie elementu zastępczego podczas ładowania zawartości.
2. Jeśli zawartość zostanie załadowana, ukrycie elementu zastępczego i wyświetlenie zawartości.
3. Jeśli zawartość nie zostanie załadowana:
   1. Wyświetlenie zasobu rezerwowego, jeśli są dostępne.
   2. W przeciwnym razie dalsze wyświetlanie elementu zastępczego.

Ukrywanie wskaźników ładowania

W przypadku wielu elementów AMP dozwolone jest wyświetlanie „wskaźnika ładowania”, który jest prostą animacją pokazującą, że element nie został jeszcze w pełni załadowany. Aby zrezygnować z tego sposobu działania elementów, należy dodać atrybut noloading.

• Written by @pbakaus
  with contributions from @bpaduch