Geç yükleme nasıl çalışır?
Normal bir HTML görüntüsü şöyle görünür:
<img src="sample.jpg" width="100%"/>Tembel yükleme eklentileri, kodu şu şekilde yeniden yazar:
<img data-src="sample.jpg" width="100%"/>Fark ettiğin gibi,kaynaköznitelik olarak değiştirildiveri kaynağı.
Çünkü hayırkaynak, tarayıcı başlangıçta bu resmi yüklemez. Daha sonra, küçük bir JavaScript kodu, görüntünün görünüm alanında (kullanıcının görünüm alanı) olup olmadığını ve içeride olup olmadığını kontrol eder.veri kaynağıbuna geri dönerkaynakhangi tarayıcı görüntünün indirilmesini ve görüntülenmesini tetikler.
Yerel tembel yükleme nedir?
Chrome, "yerel tembel yükleme" ile birlikte gelir. Bununla ilgili buradan okuyabilirsiniz.
Yerel tembel yükleme, JavaScript'e gerek olmaması avantajına sahiptir ve tarayıcı bunu "yerel olarak" yaptığı için genellikle çok daha hızlıdır.
Kod şöyle görünür:
<img src="sample.jpg" loading="lazy" width="100%"/>Uçan görüntüler nelerdir?
Flying Images, yüksek performanslı bir tembel yükleme eklentisidir. Varsa, tarayıcının "yerel" tembel yüklemesini kullanır, aksi takdirde tembel yükleme için normal JavaScript'i kullanın.
Uçan Görüntüler, görüntüler görünüm alanında görünmeden önce de yükleyebilir.
Kullanıcı deneyimine zarar verdiği için tembel yüklemeden mi korkuyorsunuz?
Uçan görüntülerin diğer tembel yükleme eklentilerinden farkı nedir?
- Yerleşik tembel yüklemeyi kullanır - varsa yerleşik gecikmeli yüklemeyi kullanın (şu anda yalnızca Chrome'da desteklenir), aksi takdirde görüntüleri tembel olarak yüklemek için JavaScript'i kullanın.
- Görünüm alanına girmeden önce görüntüleri yükleyin - diğer eklentiler görüntüleri görüntü alanının "içinde"yken yüklerken, uçan görüntüler bunları görüntü alanına girmek üzereyken yükler.
- Küçük JavaScript - sadece 0,5 KB, sıkıştırılmış, azaltılmış.
- İstenirse, yalnızca yerel kullanabilirsiniz – yalnızca Chrome'u desteklemek mi istiyorsunuz? JavaScript'i enjekte etmeyen "yalnızca yerel"e geçiş yapabilirsiniz.
- Tüm HTML kodunu yeniden yazar - tembel yükleme nedeniyle hiçbir resmi kaçırmayın (galeri eklentileri tarafından eklenmiş olsa bile).
- Şeffaf dolgu - Tüm görsellere minik bir şeffaf base64 eklenmiştir. Görüntüleri yüklerken artık titreme yok.
- Anahtar kelimeleri hariç tut - Hemen hemen tüm tembel yükleme eklentileri bir dışlama özelliği sağlar, ancak uçan görüntüler aynı zamanda görüntüleri üst görüntü düğümünden dışlayabilir. Resminizin bir sınıf adı yoksa kullanışlıdır.
- IE ve JavaScript devre dışı bırakılmış tarayıcıları destekler - Internet Explorer ise veya JavaScript tamamen devre dışı bırakılmış olsa bile (kullanarak) tüm resimler anında yüklenir.
not yazısıetiket).
