https://northumbriasport.com/arch-base/js/deferredImages.js

1!function(window){
2
3	var images = new Array();
4	inViewport = function( image ){
5		var rect = image.getBoundingClientRect();
6		return ( rect.top <= (window.innerHeight || document.documentElement.clientHeight) );
7	};
8
9	displayImage = function( image ){
10
11		var preload = new Image();
12		preload.src = image.getAttribute('data-src');
13		preload.onload = preload.onreadystatechange = function() {
14			loadImage(preload, image)
15		};
16
17	};
18
19	function loadImage( preload, image ){
20		image.setAttribute( 'src', preload.getAttribute('src')  );
21		image.removeAttribute( 'width' );
22		image.removeAttribute( 'height' );
23
24	};
25
26	handleScroll = function(){
27		for( var i = 0; i < images.length; i++ ){
28
29			if( images[i] === 'loaded' )
30				continue;
31
32			if( inViewport( images[i] ) ){
33				displayImage( images[i] );
34				images[i] = 'loaded';
35
36			}
37		}
38	};
39
40	var _images = document.querySelectorAll('img[data-deferred]');
41	for (var i = 0; i < _images.length; i++)
42		images.push( _images[i] );
43
44	//
45	handleScroll();
46	if ( typeof window.addEventListener != 'undefined' ){
47		window.addEventListener("scroll", function(){ handleScroll() }, false);
48	} else if ( typeof window.attachEvent  != 'undefined' ){
49		window.attachEvent("onscroll", function() { handleScroll(); });
50	} else {
51		window.scroll = loadImage(preload, image);
52	}
53
54}(this);