Geç yüklenen resimler ve videolar, olumlu ve ölçülebilir performansa sahipken bu, hafife alınacak bir görev değildir. Yanlış cevap verdiyseniz istenmeyen sonuçlar doğurabilir. Bu nedenle, aşağıdaki belgeleri korumak önemlidir: endişelerini göz önünde bulundurur.
Ekranın üst kısmına dikkat edin
Sayfadaki her bir medya kaynağını geç yükleme yöntemiyle ama bu dürtüye karşı koymanız gerekir. ekran geç yüklenmemelidir. Bu tür kaynaklar, kritik öneme sahip öğedir ve bu nedenle normal şekilde yüklenmelidir.
Geç yükleme, kaynakların yüklenmesini DOM etkileşimli hale gelene kadar geciktirir.
. Şunun altındaki resimler için:
bu bir sorun teşkil etmez ancak ekranın üst kısmındaki önemli kaynaklar,
en kısa sürede gösterilmeleri için standart <img>
öğesini kullanın.
Tabii ki, web sitelerinin nerelere yerleştirdiğiyle ilgili günümüzde farklı boyutlardaki pek çok ekranda görüntülenir. Dizüstü bilgisayarda ekranın üst kısmında görünen şey mobil cihazlarda bunun altında yer alabilir. Proje yöneticisi olarak en iyi şekilde ele alacağız. Ekibiniz ve sizin için ve bu resimleri her zaman olduğu gibi yükleyebilirsiniz. moda oluyor.
Ayrıca, ekranın alt kısmındaki
gecikmeli yüklemeyi tetiklemek için eşik değeri. Bu, proje yöneticisi olarak
görüntülerin başlaması için ekranın alt kısmında bir tampon bölgesi oluşturun
kullanıcının sayfayı görüntü alanına kaydırmadan çok önce yüklenmesi gerekir. Örneğin,
Intersection Observer API, bir rootMargin
özelliği belirtmenize olanak tanır.
options nesnesini ifade eder.IntersectionObserver
Bu
öğelere bir tampon verir. Bu da, yükleme işleminden önce geç yükleme davranışını
öğe görüntü alanının içindedir:
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
// lazy-loading image code goes here
}, {
rootMargin: "0px 0px 256px 0px"
});
rootMargin
değeri, bir CSS için belirttiğiniz değerlere benziyorsa
Çünkü margin
mülk! Bu durumda,
gözlemlenen öğenin alt kenar boşluğu (varsayılan olarak tarayıcı görünümü,
(root
özelliği kullanılarak belirli bir öğeye dönüştürülebilir) 256 ile genişletilir
piksel. Bu, bir resim öğesi aşağıdaki gibi olduğunda geri çağırma işlevinin yürütüleceği anlamına gelir:
en fazla 256 piksel uzaklıkta gösterilir ve resim yüklenmeye başlar
görmeden önce.
Aynı etkiyi Intersection Observe'i desteklemeyen tarayıcılarda da elde etmek için, kaydırma etkinliği işleme kodunu kullanın ve
Tampon eklemek için getBoundingClientRect
işaretleyin.
Düzen kayması ve yer tutucular
Yer tutucular kullanılmazsa medyanın geç yüklenmesi düzende kaymaya neden olabilir. Bu değişiklikler kullanıcıların kafasını karıştırabilir ve pahalı DOM düzenini tetikleyebilir. işlemlerinizde bir hataya neden olabilir. En azından bir düz renk yer tutucusu ve tablodaki veya LQIP veya Bir medyanın içeriğine dair ipucu veren SQIP öğe geri yüklenir.
<img>
etiketleri için src
başlangıçta bir yer tutucuya işaret edene kadar
özelliği nihai resim URL'si ile güncellendi. poster
özelliğini
Yer tutucu resme işaret eden <video>
öğesi. Ek olarak, width
ve
Hem <img>
hem de <video>
etiketlerinde height
özellikleri. Böylece proje daha
yer tutuculardan nihai resimlere geçiş yapmak oluşturulan boyutu değiştirmez
öğenin etkisi.
Resim kodu çözme gecikmeleri
JavaScript'te büyük resimler yüklemek ve bunları DOM'ye bırakmak,
kullanıcı arayüzünün kısa bir süre yanıt vermemesine neden olan ana iş parçacığı
gereken süreyi ifade eder. decode
kullanarak görüntülerin kodunu eşzamansız olarak çözme
yöntem
eklemek bu tür olumsuzlukları azaltabilir,
Dikkat: Henüz her yerde kullanılamamaktadır ve geç yükleme mantığını karmaşıklaştırır.
Kullanmak istiyorsanız bunu kontrol etmeniz gerekir. Aşağıdakiler
Image.decode()
öğesini bir yedekle nasıl kullanabileceğiniz:
var newImage = new Image();
newImage.src = "my-awesome-image.jpg";
if ("decode" in newImage) {
// Fancy decoding logic
newImage.decode().then(function() {
imageContainer.appendChild(newImage);
});
} else {
// Regular image load
imageContainer.appendChild(newImage);
}
Aşağıdaki kodu görmek için bu CodePen bağlantısına bu örneğe benzer bir kod yazın. Resimlerinizin çoğu oldukça küçükse bunun sizin için çok bir etkisi olmayabilir ancak daha geç yükleme ve DOM'ye ekleme işlemleri gerçekleştirebilirsiniz.
Öğeler yüklenmediğinde
Bazen medya kaynakları bir nedenden dolayı (veya başka bir nedenden dolayı) yüklenemeyebilir. meydana gelir. Bu ne zaman olabilir? Duruma göre değişir ama varsayıma dayalı bir senaryo verelim. Sizin için kısa bir süreliğine HTML önbelleğe alma politikanız (ör. beş dakika) ve kullanıcı siteyi ziyaret eder veya kullanıcı bir süre için eski bir sekmeyi açık bırakırsa uzun süre (ör. birkaç saat) yer alıp içeriğinizi okumak için geri gelir. Bu sürecin bir noktasında yeniden dağıtım gerçekleşir. Bu dağıtım sırasında Resim kaynağının adı, karma tabanlı sürüm oluşturma nedeniyle değişiyor veya kaldırıldı Hepsini. Kullanıcı görüntüyü geç yüklediğinde kaynak ve dolayısıyla başarısız olur.
Bunlar göreceli olarak nadir durumlardan görülse de, yedeklenmiş olması faydalı olabilir. planlamanızı kolaylaştırır. Resimler için böyle bir çözüm, bu:
var newImage = new Image();
newImage.src = "my-awesome-image.jpg";
newImage.onerror = function(){
// Decide what to do on error
};
newImage.onload = function(){
// Load the image
};
Bir hata olması durumunda ne yapacağınıza kararınız uygulamanıza bağlıdır. Örneğin, Örneğin, resim yer tutucu alanını, Kullanıcının resmi tekrar yüklemeyi denemesi veya yalnızca bir hata mesajı göstermesi ifadesini girin.
Başka senaryolar da ortaya çıkabilir. Ne yaparsanız yapın kullanıcıya bir hata oluştuğunda sinyal gönderir ve muhtemelen bir işlem yapmasını bir şeyler ters gittiğinde almanız gerekenleri öğrenin.
JavaScript'in kullanılabilirliği
JavaScript'in her zaman kullanılabilir olduğu varsayılmamalıdır. Bir
geç yüklenen resimler için, resimleri şurada gösterecek <noscript>
işaretlemesi sunabilirsiniz:
JavaScript'in kullanılamadığı durumda. Olası en basit yedek örneği,
JavaScript kapalıysa resim sunmak için <noscript>
öğelerini kullanma:
JavaScript devre dışıysa kullanıcılar hem yer tutucu resmi hem de
<noscript>
öğelerinin bulunduğu resim. Bu sorunu gidermek için
<html>
etiketinde no-js
sınıfı şu şekilde görünür:
<html class="no-js">
Ardından, tüm stil sayfalarından önce <head>
içine bir satır içi komut dosyası satırı yerleştirin
<html>
etiketinden no-js
sınıfını kaldıran <link>
etiketleri üzerinden istenir
öğesini eklemeniz gerekir:
<script>document.documentElement.classList.remove("no-js");</script>
Son olarak, JavaScript kullanılamıyor:
.no-js .lazy {
display: none;
}
Bu, yer tutucu resimlerin yüklenmesini engellemez ancak gerekir. JavaScript'i devre dışı olan kullanıcılar yer tutucudan daha fazlasını alır yer tutuculardan daha iyidir. Ayrıca, Tümü'ne dokunun.