Aşağıdaki kodu script tagleri içerisine ekleyin.
Nasıl çalıştığını anlatıyorum;
- HTML'de bir resim eklerken bu şekilde ekleyeceksin <img data-src="https://r10.net/resim" class="yusu-lazy-load"></img>
- Bu şekilde resim görülmezse yüklenmeyecek.
this.observer = new IntersectionObserver(entries => {
entries.forEach((entry) => {
if(entry.isIntersecting){
entry.target.src = entry.target.getAttribute('data-src');
}
});
});
let images = document.querySelectorAll('.yusu-lazy-load');
images.forEach((image) => {
this.observer.observe(image);
});