Lazy Load (tembel yükleme) Nedir? Nasıl Yapılır?

Lazy loading, bir web sayfasının yüklenme sürecini optimize etmek ve performansını artırmak için kullanılan bir tekniktir. Özellikle büyük medya dosyaları veya uzun sayfalarda kullanılan görseller gibi kaynaklar, web sayfasının yüklenme süresini uzatabilir ve kullanıcı deneyimini olumsuz etkileyebilir. Lazy loading tekniği, bu tür kaynakların sadece ihtiyaç duyulduğunda yüklenmesini sağlayarak sayfa yüklenme süresini azaltır ve kullanıcıların daha hızlı bir şekilde içeriğe erişmelerine olanak tanır.

Lazy loading’in çalışma prensibi oldukça basittir. Sayfa yüklendiğinde, tarayıcı sayfada görünen içeriği yüklerken, kullanıcının görüş alanında olmayan veya yakın olmayan içeriği yüklemeyi geciktirir. Kullanıcı sayfayı aşağı kaydırdıkça veya belirli bir noktaya geldikçe, sayfa içeriğini oluşturan görseller veya diğer medya dosyaları yavaş yavaş yüklenir.

Lazy loading nasıl yapılır?

1. HTML İmagesrcset attribute’i: `<img>` etiketindeki `srcset` özelliği, tarayıcının bir görüntüyü yüklemesini geciktirmesini sağlar. Bu, görüntünün yalnızca kullanıcının görüş alanına girdiğinde veya belirli bir noktaya yaklaştığında yüklenmesini sağlar.

“`html
<img src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Lazy Loaded Image”>
“`

2. JavaScript ile: JavaScript kullanarak lazy loading işlevselliğini uygulamak da mümkündür. Tarayıcı penceresinin kaydırma olayları dinlenir ve belirli bir noktaya ulaşıldığında veya kullanıcı bir etki alanına girdiğinde, görüntüler veya diğer medya dosyaları yüklenir.

“`javascript
document.addEventListener(“DOMContentLoaded”, function() {
var lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));
if (“IntersectionObserver” in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove(“lazy”);
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers that do not support IntersectionObserver
}
});
“`

Bu kod, sayfadaki `img` etiketlerini dinler ve görsel kullanıcı görüş alanına girdiğinde `src` özelliğini yüklenmemiş görselin kaynak dosyasının yoluna değiştirir.

Lazy loading, web sayfası performansını artırırken, kullanıcıların deneyimini iyileştirir ve sayfa yükleme süresini azaltır. Ancak, tüm tarayıcılar tarafından desteklenmeyebilir ve belirli durumlarda uygun olmayabilir. Bu nedenle, lazy loading tekniğini uygulamadan önce dikkatlice düşünmek ve test etmek önemlidir.