Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Elementy zastępcze i zasoby rezerwowe

Zgodnie z duchem postrzeganej wydajności i stopniowego doskonalenia, najlepszą praktyką w AMP jest zapewnianie tam, gdzie to możliwe elementów zastępczych i zasobów rezerwowych.

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>
Open this snippet in playground

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ść.

UWAGA — element zastępczy nie musi być elementem AMP; jako element zastępczy można stosować dowolny element HTML.

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:

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>
Open this snippet in playground
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>
Open this snippet in playground

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.