Lazy Loading, web sayfalarında kullanılan bir tekniktir ve sayfa yüklenirken, sayfadaki resimlerin, videoların ve diğer içeriklerin yalnızca kullanıcının ihtiyaç duyduğu anda yüklenmesini sağlar. Lazy Load ile sayfanın yüklenme süresini azaltabilir, daha hızlı bir kullanıcı deneyimi sağlayabilirsiniz.
Lazy Loading, birçok farklı şekilde uygulanabilir. En yaygın yöntem, sayfadaki resimlerin img etiketi yerine data-src özniteliği kullanılarak yüklenmesidir. Bu yöntem, sayfa yüklendiğinde resimlerin URL’sinin src özniteliğine yerleştirilmesini sağlar. Resim, sayfanın görünür kısmına geldiğinde yüklenir.
Bunun yanı sıra, jQuery, React ve diğer birçok JavaScript kütüphanesi, Lazy Loading özellikleri sunar. Bunlar özellikle sayfadaki görsel içeriklerin yüklenmesi sırasında kullanılabilir. Örneğin, bir kullanıcının sayfa aşağı kaydırdığında, diğer resimler yüklenir ve sayfa yükleme süresi kısaltılabilir.
HTML ve JavaScript kullanarak bir resmin Lazy Loading özelliğini nasıl ekleyebileceğinizi aşağıdaki örnek kodlarda görebilirsiniz.
HTML Kod Örneği:
<img src=”placeholder.jpg” data-src=”image.jpg” loading=”lazy” alt=”Image”>
Bu örnek kodda, bir img etiketi yer alır. Resim src özniteliğine, yüklenirken yer tutucu bir resmin URL’si atanır. Asıl resim dosyasının URL’si, data-src özniteliğinde saklanır. loading özniteliği, Lazy Loading özelliğini etkinleştirir. Kullanıcı resmin görünür bölümüne geldiğinde resim yüklenir.
JavaScript Kod Örneği:
const images = document.querySelectorAll(‘img’);
const loadImages = (image) => {
image.setAttribute(‘src’, image.getAttribute(‘data-src’));
image.onload = () => {
image.removeAttribute(‘data-src’);
};
};
const imgOptions = {
threshold: 1,
rootMargin: “0px 0px -100px 0px”
};
const imgObserver = new IntersectionObserver((entries, imgObserver) => {
entries.forEach(entry => {
if(!entry.isIntersecting) {
return;
} else {
loadImages(entry.target);
imgObserver.unobserve(entry.target);
}
})
}, imgOptions);
images.forEach(image => {
imgObserver.observe(image);
});
u örnek kodda, bir JavaScript fonksiyonu, loadImages resimleri yüklemek için kullanılır. loadImages fonksiyonu, resmin src özniteliğine, data-src özniteliğinde saklanan URL’yi atar. Ardından, resim yüklendiğinde data-src özniteliği kaldırılır.
Resimlerin Lazy Loading özelliğini etkinleştirmek için bir IntersectionObserver kullanılır. Bu, tarayıcının sayfayı tararken resimleri yüklemesine yardımcı olur. Tarayıcı resimleri tararken, threshold ve rootMargin gibi özellikler belirtilebilir.
Bu Gönderide 0 Yorum Var