<img src="https://cdn.pixabay.com/photo/2020/04/06/12/37/daisy-5009532_1280.jpg" />
  <img src="https://cdn.pixabay.com/photo/2015/01/30/10/54/cup-617422_960_720.jpg" />
  <img src="https://randompicturegenerator.com/img/picture-generator/57e0d643425aa814f1dc8460962e33791c3ad6e04e507440712f7bd5904bc1_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/57e1d1454a57b10ff3d8992cc12c30771037dbf85254784a702879d49f4f_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/57e0dd414a56a414f1dc8460962e33791c3ad6e04e50744172297bd49749cc_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/55e9dd4b4a57a414f1dc8460962e33791c3ad6e04e507440762e79d7944ecd_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/57e9dc434956ab14f1dc8460962e33791c3ad6e04e507440772872dc9244cc_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/54e3d1474b57ac14f1dc8460962e33791c3ad6e04e507441722a72dc954ac3_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/54e3d5434b56b10ff3d8992cc12c30771037dbf85254794e722a7dd2954f_640.jpg" />
  <img class="lazy" data-src="https://randompicturegenerator.com/img/picture-generator/57e8d24b4c53b10ff3d8992cc12c30771037dbf85254794e732879d1964a_640.jpg" />
img {
  background: #F1F1FA;
  width: 300px;
  height: 250px;
  display: flex;
  margin: 10px auto;
  border: 0;
}
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);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.