Lazy Loading with IntersectionObserver

Defers loading of images until they are required.

Usage

To use, you have to wrap your images in a <noscript;> tag (for browsers that don't support javascript) and create a span after them with a class of "js-image" the appropriate data attributes

<noscript>
	<img src="example-images/andras-kovacs-1091685-unsplash.jpg" width="427" height="285" alt="" />
</noscript>
<span class="js-image" data-src="example-images/andras-kovacs-1091685-unsplash.jpg" data-width="427" data-height="285" data-alt=""></span>

Then include the lazyloader JS file just before </body>: and start the observer after the window load event, e.g.

<script>

	function WindowLoad(){
		window.LazyLoadHandler.ObserveAll();
	}

	(function(){
		window.addEventListener('load', WindowLoad);
	})();

</script>
<script defer="defer" src="lazyloader/lazyloader.1.6.js"></script>

You'll also have to include the Required CSS styles from lazyloader.css

Data Attributes

data-src Required

The src attribute of the image

data-width Required

The width of the image

data-height Required

The height of the image

data-alt Required for img, input and picture only

The alt attribute of the image

data-srcset Required for picture elements only

The srcset attribute of the image

data-sizes

The sizes attribute of the image

Picture Elements

For picture elements, you will need to create additional spans with a class of "source", e.g.

Demo

Photo by Wei Ding on Unsplash

Photo by Andras Kovacs on Unsplash

Photo by Joey Nicotra on Unsplash

Photo by Logan Lambert on Unsplash

Photo by Kal Loftus on Unsplash

Photo by Rucksack Magazine on Unsplash

Photo by Andre Benz on Unsplash

Photo by Fernando Rodrigues on Unsplash

Photo by Logan Lambert on Unsplash

Picture Element Example

Code for this example:

<noscript>
	<picture class="js-image">
		<source srcset="andre-benz-1092194-unsplash_500_208.webp 500w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.webp 1920w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1000_417.webp 1000w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1500_800.webp 1500w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1500_625.webp 1920w" sizes="100vw" type="image/webp" />
		<source srcset="andre-benz-1092194-unsplash_500_208.jpg 500w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.jpg 1920w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1000_417.jpg 1000w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1500_800.jpg 1500w,
			example-images/picture-demo/andre-benz-1092194-unsplash_1500_625.jpg 1920w" sizes="100vw" type="image/jpeg" />
		<img src="example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.jpg" width="1920" height="800" alt="" />
	</picture>
</noscript>
<span class="js-image" data-type="picture" data-src="example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.jpg" data-width="1920" data-height="800" data-alt=""><span class="source" data-srcset="andre-benz-1092194-unsplash_500_208.webp 500w, example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.webp 1920w, example-images/picture-demo/andre-benz-1092194-unsplash_1000_417.webp 1000w, example-images/picture-demo/andre-benz-1092194-unsplash_1500_800.webp 1500w, example-images/picture-demo/andre-benz-1092194-unsplash_1500_625.webp 1920w" data-sizes="100vw" data-type="image/webp"></span><span class="source" data-srcset="andre-benz-1092194-unsplash_500_208.jpg 500w, example-images/picture-demo/andre-benz-1092194-unsplash_1920_800.jpg 1920w, example-images/picture-demo/andre-benz-1092194-unsplash_1000_417.jpg 1000w, example-images/picture-demo/andre-benz-1092194-unsplash_1500_800.jpg 1500w, example-images/picture-demo/andre-benz-1092194-unsplash_1500_625.jpg 1920w" data-sizes="100vw" data-type="image/jpeg"></span></span>

iframe Example

Code for this example:

<noscript><iframe width="1920" height="1080" src="https://www.youtube-nocookie.com/embed/vOxmsqd8f58?rel=0"></iframe></noscript>
<span data-type="iframe" class="js-image" data-width="1920" data-height="1080" data-src="https://www.youtube-nocookie.com/embed/vOxmsqd8f58?rel=0"></span>