Edit in JSFiddle

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

  // Dichiaro la variabile che conterrà le imamgini marcate con .lazy
  var lazyLoadImages;
  
  // Controllo se l'IntersectionObserver è supportato nel browser.
  if ("IntersectionObserver" in window) {
  
    // Recupero tutte le immagini marcata con la classe .lazy
    lazyLoadImages = document.querySelectorAll(".lazy");
    
    // Inizializzo l'oggetto IntersectionObserver.
    var imageObserver = new IntersectionObserver(function(entries, observer) {
    
      // Codice di callback da eseguire ogni volta che l'observer entra in funzione.
      entries.forEach(function(entry) {
      
        // Controllo se l'immagine è entrata nel viewport.
        if (entry.isIntersecting) {
        
          // Ottengo l'oggetto image.
          var image = entry.target;
          
          // Sposto il valore di data-src dentro src.
          image.src = image.dataset.src;
          
          // rimuovo la classe .lazy dall'immagine.
          image.classList.remove("lazy");
          
          // Rimuovo il bind dell'observer.
          imageObserver.unobserve(image);
        }
      });
    }, {
      root: document.querySelector("#container"),
      rootMargin: "0px 0px 500px 0px"
    });
    
    // Ciclo le immagini .lazy.
    lazyLoadImages.forEach(function(image) {
    
      // Per ogni immagine effettuo il bind dell'observer.
      imageObserver.observe(image);
    });
    
  } else {
  
    // Se l'oggetto IntersectionObserver non è supportato dal browser corrente, esegui il codice javascript che utilizza gli event listener.
    
    // Dichiaro la variabile di timeout.
    var lazyLoadThrottleTimeout;
    
    // Recupero tutte le immagini marcata con la classe .lazy
    lazyLoadImages = document.querySelectorAll(".lazy");
    
    // 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 + 500)) {
          
            // 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);
  }
});
<div id="container">
  <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" />
</div>
img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

#container {
  height: 420px;
  overflow-y: scroll;
}