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