JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<div>
 <img data-src="http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg"/>
 <img data-src="b"/>
 <img data-src="c"/>
 <img data-src="d"/>
 <img data-src="e"/>
 <img data-src="f"/>
 <img data-src="a"/>
 <img data-src="b"/>
 <img data-src="c"/>
 <img data-src="d"/>
 <img data-src="e"/>
 <img data-src="https://www.petfinder.com/wp-content/uploads/2012/11/99233806-bringing-home-new-cat-632x475.jpg" />
</div>

CSS

img {
  display: block;
  height: 200px;
}

JavaScript

// Implement lazy loading images with pure javascript (record your time)
 (function () {
 		var viewportH = window.innerHeight;
 		window.addEventListener('scroll', lazyImgLoading);
    lazyImgLoading();
    function lazyImgLoading() {
    	var imgTop;
    	var imgs = document.querySelectorAll('img[data-src]');
      if (!imgs.length) {
      	window.removeEventListener('scroll', lazyImgLoading);
        return;
      }
      for (var i=0; i<imgs.length; i++) {
      	imgTop = imgs[i].getBoundingClientRect().top;
        if (imgTop <= viewportH) {
        	imgs[i].src = imgs[i].getAttribute('data-src');
          imgs[i].removeAttribute('data-src');
        }
      }
    }
 })();