X
İzmir Web Tasarım
Anasayfa --- Genel --- Web tasarımında “Lazy Loading” nedir ve nasıl kullanılır?

Yazar: 2 Ocak 2024

Web tasarımında “Lazy Loading” nedir ve nasıl kullanılır?

Lazy Loading (Tembel Yükleme), web sayfalarındaki görsel öğelerin, kullanıcı sayfayı aşağı doğru kaydırdıkça veya görsel öğeye yaklaştıkça yüklenmesini geciktiren bir tekniktir. Bu, sayfanın ilk yüklenmesini hızlandırmak ve sayfa üzerindeki kaynakları etkin bir şekilde yönetmek amacıyla kullanılır. Lazy Loading, özellikle büyük resim dosyaları gibi ağırlıklı görsel içeriğe sahip web siteleri için etkili bir performans optimizasyonu sağlar.

Lazy Loading nasıl kullanılır:

  1. HTML İmg Etiketleri:
    • Lazy Loading, HTML <img> etiketleri üzerinde loading özelliği kullanılarak gerçekleştirilir. Bu özelliğe lazy değeri atanarak, resimlerin yüklenmesinin geciktirilmesi sağlanır.
    htmlCopy code<img src="placeholder.jpg" data-src="image-to-load.jpg" alt="Description" loading="lazy">
    • data-src özelliği, resmin asıl kaynağını (src) belirtirken, src özelliğine placeholder bir resim veya boş bir resim yerleştirilir.
  2. JavaScript Kullanımı:
    • Lazy Loading, JavaScript kullanılarak da gerçekleştirilebilir. Bu yöntemde, tarayıcı penceresinin hangi kısmının görüldüğünü kontrol eden JavaScript kodu yazılır ve kullanıcı bu bölgeye yaklaştıkça resimlerin yüklenmesi sağlanır.
    htmlCopy code<img src="placeholder.jpg" data-src="image-to-load.jpg" alt="Description" class="lazy-load-image"> javascriptCopy codedocument.addEventListener("DOMContentLoaded", function() { var lazyImages = document.querySelectorAll('.lazy-load-image'); var lazyLoad = function() { lazyImages.forEach(function(img) { if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom >= 0) { img.src = img.getAttribute('data-src'); img.classList.remove('lazy-load-image'); } }); }; document.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); });
    • Yukarıdaki JavaScript kodu, sayfa yüklendiğinde ve kullanıcı kaydırdıkça resimlerin yüklenmesini sağlar. getBoundingClientRect() metodu, bir öğenin tarayıcı penceresindeki görünürlüğünü kontrol etmek için kullanılır.
  3. CSS ve Intersection Observer API:
    • Intersection Observer API, JavaScript kullanılarak daha performanslı ve etkili bir Lazy Loading sağlar. Bu API, bir öğenin görünürlüğünü izler ve belirli bir noktaya geldiğinde bir callback fonksiyonunu tetikler.
    htmlCopy code<img src="placeholder.jpg" data-src="image-to-load.jpg" alt="Description" class="lazy-load-image"> javascriptCopy codedocument.addEventListener("DOMContentLoaded", function() { var lazyImages = document.querySelectorAll('.lazy-load-image'); var observer = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { var img = entry.target; img.src = img.getAttribute('data-src'); img.classList.remove('lazy-load-image'); observer.unobserve(img); } }); }); lazyImages.forEach(function(img) { observer.observe(img); }); });
    • Yukarıdaki JavaScript kodu, Intersection Observer API’yi kullanarak resimlerin yüklenmesini optimize eder.

Lazy Loading, sayfa hızını ve performansını artırmak için etkili bir yöntemdir, özellikle büyük medya dosyaları içeren web sitelerinde kullanıldığında önemli bir fark yaratabilir.