Edit in JSFiddle

// Eseguo il codice quando il DOM è completamente caricato.
document.addEventListener("DOMContentLoaded", function() {

  // Recupero tutte le immagini marcata con la classe .lazy
  var lazyLoadImages = document.querySelectorAll("img.lazy");    
  
  // Dichiaro la variabile di timeout.
  var lazyLoadThrottleTimeout;
  
  // La funzione principale in binding agli eventi.
  function lazyLoad () {
  
    // Controllo se devo annullare il timeout.
    if(lazyLoadThrottleTimeout) {
      clearTimeout(lazyLoadThrottleTimeout);
    }
    
    // Configuro il timeout
    lazyLoadThrottleTimeout = setTimeout(function() {
    
      // Ottengo il valore del margine superiore della finestra.
      var scrollTop = window.pageYOffset;
      
      // Ciclo le immagini .lazy
      lazyLoadImages.forEach(function(img) {
      
        // Controllo se l'immagine corrente è entrata nel viewport.
        if(img.offsetTop < (window.innerHeight + scrollTop)) {
      
          // Sposto il valore di data-src dentro src.
          img.src = img.dataset.src;
        
          // rimuovo la classe .lazy dall'immagine.
          img.classList.remove('lazy');
        }
      });
      
      // Controllo se le immagini .lazy sono finite.
      if(0 == lazyloadImages.length) {
      
        // Rimuovo gli event listener.
        document.removeEventListener("scroll", lazyLoad);
        window.removeEventListener("resize", lazyLoad);
        window.removeEventListener("orientationChange", lazyLoad);
      }
    }, 20);
  }
  
  // Effettuo il bind degli event listener.
  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationChange", lazyLoad);
});
<img src="https://picsum.photos/400/300?image=1083" />
<img src="https://picsum.photos/400/300?image=1082" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1081" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1080" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1079" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1078" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1077" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1076" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1075" />
<img class="lazy" data-src="https://picsum.photos/400/300?image=1074" />
img {
  background: #CCCCCC;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}