Minimalist Image Lazy Loader Based On Intersection Observer – lzy.js

Preview:

Description:

lzy.js is a small performant image & background image lazy loader built with vanilla JavaScript and the Intersection Observer API.

See also:

• Top 10 Lazy Loading JavaScript Libraries
• 10 Best lazy loading jQuery Plugins

How to use it:

Load the polyfill for browsers which don’t support the Intersection Observer API. The Intersection Observer API is used to track when an image or background image enters the visible viewport.

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Download the load the minified version of the lzy.js library at the end of the document.

<script src="lzy.min.js"></script>

Initialize the lzy.js and we’re ready to go.

lzy();

Define the path to the image to be lazy loaded in the data-src attribute.

<img data-src="1.jpg"/>

It also considers the image as a background image if you use the data-src attribute in the non-img element:

<div data-src="1.jpg">
  ...
</div>

Set the top offset the library tracks the visibility. Default: 200px.

lzy(100);