lazyload images

lazy.html

<img class="lazy" src="/images/placeholder.png" data-src="' . $sImageUrl . '" alt="" />

lazy.js

<script type="text/javascript">
	document.addEventListener( "DOMContentLoaded", function() {
		var lazyImages = [].slice.call( document.querySelectorAll("img.lazy") );
	
		if( "IntersectionObserver" in window ) {
			let lazyImageObserver = new IntersectionObserver( function(entries, observer) {
				entries.forEach( function(entry) {
					if( entry.isIntersecting ) {
						let lazyImage = entry.target;
						lazyImage.src = lazyImage.dataset.src;
						lazyImage.classList.remove("lazy");
						lazyImageObserver.unobserve(lazyImage);
					}
				} );
			} );
			lazyImages.forEach( function(lazyImage) {
				lazyImageObserver.observe(lazyImage);
			} );
		} else {
			
		}
	} );