Lightweight Performant Image Lazy Loading Script

Preview:

Description:

Just another lazy load JavaScript library for lazy loading images using the getBoundingClientRect() method, which is a web API used to determine the image’s position relative to the viewport.

How to use it:

1. Download and import the lazyload.js library into the document.

<script type="text/javascript" src="lazyload.js"></script>

2. Insert your images into the document using the data-src attribute. Note that all images to lazy load must be placed in the container called ‘images’.

<section id="image">
  <img data-src="image.jpg" width="800" height="650" />
</section>