HTML'de Lazy Load ile Resimlerin Yavaş Yüklenmesini Önleyin

2 Eylül 2023 | 283

Web sitelerinin hızı, kullanıcı deneyimi ve SEO için önemli bir faktördür. Sayfalarınızın hızlı yüklenmesini sağlamak için resimlerinizi optimize etmek önemli bir adımdır. Bununla birlikte, sayfalarınızda çok sayıda resim varsa, tüm resimlerin aynı anda yüklenmesi, sayfa yükleme süresini artırabilir.

Bu sorunu çözmek için HTML'de "lazy load" (tembel yükleme) adı verilen bir teknik kullanabilirsiniz. Lazy load, sayfanın yüklenmesi sırasında sadece görünür olan resimlerin yüklenmesini sağlar. Kullanıcı sayfayı aşağı kaydırdıkça, diğer resimler yavaş yüklenir.

Nasıl Yapılır?

HTML'de lazy load işlevselliğini elde etmek için iki yöntemden bahsedeceğim: "Intersection Observer API" ve "Data Attribute".

Intersection Observer API

Intersection Observer API, tarayıcının hangi elementlerin görünür olduğunu izlemesine olanak tanır ve bu sayede resimlerin yüklenmesini kontrol edebiliriz.

HTML

var lazyImages = document.querySelectorAll('.lazy-load');

var observer = new IntersectionObserver(function(entries) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

var img = entry.target;

img.src = img.getAttribute('data-src');

observer.unobserve(img);

}

});

lazyImages.forEach(function(img) {
observer.observe(img);
});

Yukarıdaki örnek, placeholder.jpg adlı bir yer tutucu resimle başlar. Gerçek resmin URL'si data-src özniteliği ile belirtilir. lazy-load sınıfı resimleri hedefler ve Intersection Observer API kullanılarak resimlerin yüklenmesi gerçekleştirilir.

Data Attribute

Bu yöntemde, resimlerin gerçek URL'si data-src özniteliği kullanılarak belirtilir ve JavaScript ile lazy load işlevselliği uygulanır.

HTML

function lazyLoad(img) {
img.src = img.getAttribute('data-src');
}

Yukarıdaki örnekte, placeholder.jpg adlı bir yer tutucu resimle başlar. Gerçek resmin URL'si data-src özniteliği ile belirtilir. lazy-load sınıfı resmi hedefler ve onload olayı tetiklendiğinde JavaScript ile lazyLoad() işlevi çağrılır ve resmin yolu değiştirilerek yüklenmesi sağlanır.

Sonuç:

HTML'de lazy load kullanarak, sayfalarınızın yüklenme hızını artırabilir ve kullanıcı deneyimini iyileştirebilirsiniz. Bu teknikle, sayfalarınızda yer alan büyük miktarda resimlerin aynı anda yüklenmesi sorununu önleyerek, sayfa yükleme süresini azaltabilirsiniz. Bu da kullanıcılarınızın sayfalarınızı daha hızlı ve etkileşimli bir şekilde görmelerini sağlar.

Umarım bu yazı size lazy load (tembel yükleme) konusunda fikir verebilir ve HTML'deki resim yükleme performansınızı artırmanıza yardımcı olur.

| |