Заполнители и резервные элементы

Чтобы придерживаться стандартов ощущаемой производительности и концепции прогрессивного улучшения, при создании 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"
>
  <amp-img
    placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill"
  >
  </amp-img>
</amp-anim>

По умолчанию заполнитель элемента AMP отображается немедленно, даже если ресурсы элемента AMP не были загружены или инициализированы. Когда элемент AMP будет готов, он, как правило, скрывает заполнитель и показывает свое содержимое.

Резервные элементы

Вы можете добавить в элемент атрибут fallback, чтобы указать резервное поведение:

• для любого элемента, который не поддерживается браузером
• если контент не удалось загрузить (например, твит был удален)
• если тип изображения не поддерживается (например, WebP поддерживается не во всех браузерах)

Вы можете установить атрибут fallback для любого элемента HTML, а не только для элементов AMP. Элемент fallback должен быть прямым потомком элемента AMP.

Пример: неподдерживаемая функция

В следующем примере мы используем атрибут fallback, чтобы сообщить пользователю, что браузер не поддерживает определенную функцию:

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

Пример: выдача изображений разных форматов

В следующем примере мы используем атрибут fallback, чтобы дать браузеру инструкцию использовать файл JPEG, если формат WebP не поддерживается.

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

Взаимодействие заполнителей и резервных элементов

Для компонентов AMP, которые используют динамический контент (например, amp-twitter, amp-list), взаимодействие резервных элементов и заполнителей работает следующим образом:

1. Заполнитель отображается во время загрузки контента.
2. Если содержимое загружается успешно, заполнитель скрывается и отображается контент.
3. Если контент не загружается:
   1. Если есть резервный элемент, он отображается.
   2. В противном случае продолжает отображаться заполнитель.

Скрытие индикаторов загрузки

Во многих элементах AMP включен показ «индикатора загрузки» — простой анимации, которая показывает, что элемент еще не полностью загружен. Чтобы отключить это поведение, добавьте в элемент атрибут noloading.

• Written by @pbakaus
  with contributions from @bpaduch