A simple javascript tool to enable progressive lazy-loading for images and background images. This tool utilizes the IntersectionObserver class where supported to lazy-load source files for <img> tags as well as background images for any matching tag.

Images: image elements matching the selector img[data-src] will be lazy-loaded and replace the original image source upon load. <img src="some-image.png"> => <img data-src="some-image.png">

Background Images: all elements matching the selector [data-bg-src] will be lazy-loaded and replace the original element inline style attribute with the background image url provided in the data-bg-src attribute. Example: <div style="background-image: url('some-image.png')">...</div> => <div data-bg-src="some-image.png"></div>.

For both images and background images, original sources will be overwritten but are still useful for adding low fidelity versions of the same image as a placeholder.

Example:

<img src="some-image-lowres.png" data-src="some-image.png">

It is good to keep a <noscript> fallback in the unlikely case of a browser having Javascript disabled.

Example:

<noscript>
	<img src="some-image.png">
</noscript>
<img src="some-image-lowres.png" data-src="some-image.png">

Also, make sure to hide the progressive version:

<noscript><style>[data-src] { display: none; }</style></noscript>

Note: this snippet is only needed once