Lazy loading images using event handlers - example code

PHOTO EMBED

Sat May 28 2022 05:49:30 GMT+0000 (Coordinated Universal Time)

Saved by @rbsuperb #undefined

document.addEventListener("DOMContentLoaded", function() {

  var lazyloadImages = document.querySelectorAll("img.lazy");    

  var lazyloadThrottleTimeout;

  

  function lazyload () {

    if(lazyloadThrottleTimeout) {

      clearTimeout(lazyloadThrottleTimeout);

    }    

    

    lazyloadThrottleTimeout = setTimeout(function() {

        var scrollTop = window.pageYOffset;

        lazyloadImages.forEach(function(img) {

            if(img.offsetTop < (window.innerHeight + scrollTop)) {

              img.src = img.dataset.src;

              img.classList.remove('lazy');

            }

        });

        if(lazyloadImages.length == 0) { 

          document.removeEventListener("scroll", lazyload);

          window.removeEventListener("resize", lazyload);

          window.removeEventListener("orientationChange", lazyload);

        }
content_copyCOPY

https://codepen.io/imagekit_io/pen/MBNwKB