Lazy Load на ванильном JavaScript

JS

class APLazy 
{
	constructor (lazyClass) 
	{
		if (typeof lazyClass === 'undefined') {
			this.lazyClass  = 'APLazy';
		} else {
			this.lazyClass  = lazyClass;
		}

		this.lazyArray = [];	
	}

	setLazy() 
	{
		this.lazyArray = document.getElementsByClassName(this.lazyClass);
	}

	cleanLazy() 
	{
		this.lazyArray = Array.prototype.filter.call(this.lazyArray, (l) => l.getAttribute('data-src'));
	}

	lazyLoad() 
	{
		for (let element of this.lazyArray) {
			if (this.isInViewport(element)) {
				if (element.getAttribute('data-src')) {
					element.src = element.getAttribute('data-src');
					element.removeAttribute('data-src');
				}
			}
		}

		this.cleanLazy();
	}

	isInViewport(element) 
	{
		var rect = element.getBoundingClientRect();

		return (
			rect.bottom >= 0 && rect.right >= 0 &&
			rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.left <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}

	registerListener(event, func) 
	{
		if (window.addEventListener) {
			window.addEventListener(event, func);
		} else {
			window.attachEvent('on' + event, func);
		}
	}
}

Используем JS

if (typeof window.APLazy == 'undefined') {
	window.APLazy = new APLlazy('my-lazy-class');

	window.APLazy.setLazy();
	window.APLazy.lazyLoad();
			
	window.APLazy.registerListener('scroll', function () { window.APLazy.lazyLoad(); });
	window.APLazy.registerListener('resize', function () { window.APLazy.lazyLoad(); });
} else if (typeof window.APLazy == 'object' ) {
	window.APLazy.setLazy();
	window.APLazy.lazyLoad();
}

Используем HTML 

<img src="loader.gif" data-src="image.jpg" class="APLazy" />