JavaScript’te lazy loading nasıl yapılır?

JavaScript'te Lazy Loading Nedir?

Lazy loading, web sayfalarının yüklenme süresini optimize etmek amacıyla, yalnızca ihtiyaç duyulduğunda kaynakları yüklemeye yarayan bir tekniktir. Bu, sayfanın başlangıçta daha hızlı görünmesini sağlar.

JavaScript ile Lazy Loading Uygulama Adımları

• Görsel veya İçerik Seçimi: Hangi görsellerin ya da içeriğin lazy loading ile yükleneceğini belirleyin.
• HTML İşaretlemesi: Yüklenmeyecek görsellerin data- özniteliklerini kullanarak işaretleyin. Örneğin, .
• JavaScript Kodu Yazma: Sayfanın kaydırma olayını dinleyin ve görünüm alanındaki öğeleri yükleyin. Örneğin:

window.addEventListener("scroll", function() {
    const images = document.querySelectorAll("img[data-src]");
    images.forEach(image => {
        if (isElementInViewport(image)) {
            image.src = image.getAttribute("data-src");
            image.removeAttribute("data-src");
        }
    });
});

• Öğe Görünürlüğünü Kontrol Etme: isElementInViewport fonksiyonunu oluşturun. Bu fonksiyon, öğenin görünüm alanında olup olmadığını kontrol eder.

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Sonuç

JavaScript ile lazy loading uygulamaları sayesinde web sayfalarının performansı artırılabilir. Bu yöntem, kullanıcı deneyimini olumlu yönde etkileyerek sayfaların hızlı yüklenmesini sağlar.