Lazyload kullanımı

Merhaba

Sitemde resim yüklemeyi ertelemek için lazyload kullanmak istiyorum. Şuan popüler olan HTML 5 ile herhangi bir js tanımlamadan yapılıyor ama pek etkili değil. Çoğu tarayıcı ve arama motorları desteklemiyor.

Javascript kullanılarak bu lazyload 'ın orjinal hali kütüphanesine nereden ulaşabilirim. Araştırdım ama net bir kaynak bulamadım.

İyi forumlar herkese

https://github.com/verlok/vanilla-lazyload burda dosyaları var ama iş görür mü bilmiyorum konu up

Evet amda orayı inceliyordum indirim hocam ama yüzlerce dosya indirdi, çok karışık. Bunun kendi sitesi yok mu acaba

https://codepen.io/kazimolmez/pen/emOvXZM

Normalde loading="lazy" 'i çoğu tarayıcı destekliyor. ama dediğiniz gibi tam işlemesede yinede direkt indiriyor. aşağıdaki gibi resimlere class="lazyload" ve data-src verirseniz bu sefer her resim gerçek lazy olur.

<img class="lazyload" data-src="https://imageyoutube.com/images/youtube-thumbnail-download.png" alt="youtube thumbnail download" style="width:854px;height:256px;" loading="lazy">

<script>
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll('.lazyload');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;const src = img.getAttribute('data-src');if (src) img.src = src;img.classList.remove('lazyload');observer.unobserve(img);
}});});
lazyImages.forEach(img => observer.observe(img));});
</script>

hocam öncelikle cevabınız için teşekkür ederim. benim indirdiğim lazyload da data-src yerine data-original kullanıyor. Acaba eski sürüm diyemi?

ikinici bir husus; data-src de olsa revolation slider daki grafikler yine çalışmayacak. Slider daki grafikler için lazy nasıl kullanılmalı?

teşekkürler.

Sayfanın hızlı açılması ve pagespeed değerlerinin iyi olması için slider mantıken şöyle olmalı: Slider'deki ilk resim'e lazy verilmemeli(Slider sayfada yukarda ise, CLS oluşmaması için). Sonraki resimler için Sliderin bulunduğu div , js de belirtilip ayrı tutulmalı ve slider içindeki data-src ler sayfa onload olduktan sonra 2 saniyede bir çağrılmalı.