Accessible Image Lazy Load In Pure JavaScript – gandul.js

Preview:

Description:

gandul.js is a small accessible image lazy load library that works with the <a> link and supports responsive image delivery.

See also:

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

How to use it:

Install & download.

# NPM
$ npm install accessible-image-lazy-load --save

Import the gandul.js from the dist folder.

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

Or from a CDN.

<script src="https://unpkg.com/accessible-image-lazy-load"></script>

Insert the image to lazy load in the href attribute of the <a> link.

<a href="image.jpg" class="gandul">Image</a>

Initialize the gandul.js and done.

gandul();

It also supports responsive image delivery using the srcset and sizes attributes.

<a href="image.jpg"
   data-srcset="320.jpg 320w,
                480.jpg 480w,
                800.jpg 800w"
   data-sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
   class="gandul">
   Image
</a>

Specify the width of the image.

<a href="image.jpg" data-width="480" class="gandul">Image</a>

Override the default selector. Default: a.gandul.

gandul(selector);

Possible options which can be passed as the second parameter to the gandul method.

gandul(selector,{
  root: null,
  rootMargin: "50px 0px 50px 0px"
  threshold: 0
});

Perform an action when the image is loaded.

gandul(selector,{
  root: null,
  rootMargin: "50px 0px 50px 0px"
  threshold: 0
}, function(img){
  // do something
});