Yer tutucular ve yedekler

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

Hatta bazı öğeler, kısıtlamaları gevşeterek bunu yaptığınız için sizi ödüllendirecektir - örneğin, amp-iframe için bir yer tutucu sağlarsanız, sayfanın üst kısmına yakın bir yerde kullanılabilir olacaktır (bu olmadan çalışmaz).

Yer tutucular

placeholder özniteliğiyle işaretlenen öğe, üst AMP öğesi için bir yer tutucu görevi görür. Bir placeholder öğesi, belirtildiği takdirde, AMP öğesinin doğrudan alt öğesi olmalıdır. placeholder olarak işaretlenen bir öğe, her zaman üst AMP öğesini fill eder (doldurur).

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

Varsayılan olarak yer tutucu, AMP öğesinin kaynakları indirilmemiş veya başlatılmamış olsa bile AMP öğesi için hemen gösterilir. AMP öğesi hazır olduğunda genellikle yer tutucusunu gizler ve içeriği gösterir.

Yedekler

Şu durumlarda yedekleme davranışını belirtmek için bir fallback özniteliği belirtebilirsiniz:

• tarayıcının desteklemediği herhangi bir öğe için
• içerik yüklenemezse (örneğin, Tweet silinmişse)
• görüntü türü desteklenmiyorsa (örneğin, WebP tüm tarayıcılarda desteklenmiyor)

fallback özniteliğini yalnızca AMP öğelerinde değil, herhangi bir HTML öğesinde de ayarlayabilirsiniz. fallback öğesi belirtilirse, AMP öğesinin doğrudan alt öğesi olmalıdır.

Örnek: Desteklenmeyen özellik

Aşağıdaki örnekte, tarayıcının belirli bir özelliği desteklemediğini kullanıcıya bildirmek için fallback özniteliğini kullanıyoruz:

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

Örnek: Farklı görüntü biçimleri sunun

Aşağıdaki örnekte, tarayıcıya WebP biçimi desteklenmiyorsa JPEG dosyasını kullanmasını söylemek için fallback özniteliğini kullanıyoruz.

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

Yer tutucuların ve yedeklerin etkileşimi

Dinamik içeriğe (ör. amp-twitter , amp-list) dayanan AMP bileşenleri için, yedeklerin ve yer tutucuların etkileşimi şu şekilde çalışır:

1. İçerik yüklenirken yer tutucuyu görüntüleyin.
2. İçerik başarıyla yüklenirse, yer tutucuyu gizleyin ve içeriği görüntüleyin.
3. İçerik yüklenemezse:
   1. Bir yedek öğe varsa, yedeği görüntüleyin.
   2. Aksi takdirde, yer tutucuyu görüntülemeye devam edin.

Yükleme göstergelerini gizleme

Birçok AMP öğesinin, öğenin henüz tam olarak yüklenmediğini gösteren temel bir animasyon olan bir "yükleme göstergesi" göstermesine izin verilir. Öğeler, noloading özniteliği ekleyerek bu davranışı devre dışı bırakabilir.

• Written by @pbakaus
  with contributions from @bpaduch