<img class="lazy-load" data-src="https://picsum.photos/id/628/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/172/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/516/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/731/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/508/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/704/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/273/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/611/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/795/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/449/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/268/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/374/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/512/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/739/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/639/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/182/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/278/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/444/1080/1080"><img class="lazy-load" data-src="https://picsum.photos/id/199/1080/1080">

body {

  margin: 20px;

  font-family: 'Lato';

  font-weight: 300;

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  justify-content: center;

}

​

​

img {

  width: 600px;

  height: 600px;

}

​

img.lazy-load {

  background: #ececec;

}

function preload_image(img) {

  img.src = img.dataset.src;

  console.log(`Loading ${img.src}`);

}

​

const config_opts = {

  rootMargin: '200px 200px 200px 200px'

};

​

let observer = new IntersectionObserver(function(entries, self) {

  for(entry of entries) { 

    if(entry.isIntersecting) {

      let elem = entry.target;

      preload_image(elem);   

      self.unobserve(elem);

    }

  }

}, config_opts);

​

let images = document.querySelectorAll('img.lazy-load');

​

for(image of images) {

  observer.observe(image);

}

​

​

​