<header>
		<h1>LazyLoad загрузка картинок</h1>
	</header>
	
	<p><img src="https://picsum.photos/id/5/1920/1080" /></p>
	<p><img class="lazy" data-src="https://picsum.photos/id/15/1920/1080" /></p>
	<p><img class="lazy" data-src="https://picsum.photos/id/25/1920/1080" /></p>
	<p><img class="lazy" data-src="https://picsum.photos/id/35/1920/1080" /></p>
	<p><img class="lazy" data-src="https://picsum.photos/id/55/1920/1080" /></p>
	
	
	
	<footer>
		<p>&copy; 2020 – SebWeo.com – Все права защищены</p>
	</footer>

/* заполнитель для картинок */		
		img {
		  background: #ccc;
		  width: 1920px;
		  height: 1080px;
		  display: block;
		  margin: 10px auto;
		  border: 0;
		}

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadTimeout;  
  function lazyload() {
    if(lazyloadTimeout) {
      clearTimeout(lazyloadTimeout);
    }     
    lazyloadTimeout = 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);
        }
    }, 50);
  }  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});