JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style="height: 100vh;"></div>
<img src="" alt="" class="kfn_anim" data-src="https://picsum.photos/1674/800">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

JavaScript

var observer = new IntersectionObserver((entries, observer) => { 
    entries.forEach(entry => {
        if(entry.isIntersecting){
        console.log(entry.target)
            entry.target.setAttribute('src',entry.target.dataset.src)
        }
    });
}, {rootMargin: "0px 0px 0px 0px"});
document.querySelectorAll('.kfn_anim').forEach(img => { observer.observe(img) });

var lazyImages = [].slice.call(document.querySelectorAll(".item"));

lazyImages.addEventListener('click',function(){
	alert(1)
})

console.log(lazyImages)