Decoding async
decoding="async" ile görsel kod çözme davranışını kontrol edersin.
decoding="async" ne işe yarar?
Büyük görsellerin tarayıcı tarafından çözülmesi (decode) zaman alır. Bu iş parçacığı meşgul ederse sayfa yavaş yanıt verir. <img> etiketine decoding="async" eklersen tarayıcı çözme işini arka planda yapar.
Böylece görsel hazır olunca görünür; sayfa o arada akıcı kalır. decoding="sync" çözümü hemen yapar, decoding="auto" ise kararı tarayıcıya bırakır.
Ne zaman kullanmalısın?
decoding="async" en çok büyük görsellerde ve galerilerde işe yarar. Çözme işlemi uzun süreceğinden sayfanın donmasını engeller; kullanıcı o arada sayfayı kaydırmaya devam edebilir.
Küçük ikonlarda fark etmez; orada auto bırakabilirsin. decoding ile loading birlikte de kullanılabilir: birisi indirme anını, diğeri çözme anını denetler.
Uygulama Galeriyi decoding async ile güncelle
Body içinde iki <figure> var; her birinin içinde bir <img> ve bir <figcaption> bulunuyor. Her iki <img> etiketine decoding="async" özniteliğini ekle.
Örnek çözümü göster
<body>
<figure>
<img src="/gorseller/kedi.jpg" alt="Sokak kedisi" decoding="async">
<figcaption>Sokak kedisi</figcaption>
</figure>
<figure>
<img src="/gorseller/kopek.jpg" alt="Park köpeği" decoding="async">
<figcaption>Park köpeği</figcaption>
</figure>
</body>Kendini test et
-
Arka planda çözme için hangi decoding değeri kullanılır?
- decoding="now"
- decoding="background"
- decoding="async"
- decoding="later"
Cevabı göster
decoding="async" — Doğru. async, çözme işini arka planda yapar.
-
img'e decoding ekle
<img src="/gorseller/dag.jpg" alt="Dağ" ____>Cevabı göster
<img src="/gorseller/dag.jpg" alt="Dağ" decoding="async"> -
decoding değerini anlamıyla eşleştir
- decoding="async"
- Arka planda çözer
- decoding="sync"
- Hemen çözer
- decoding="auto"
- Tarayıcıya bırakır