Performant Image Lazy Load With Custom Events – justlazy.js

Preview:

Description:

justlazy.js is a standalone and high-performance JavaScript plugin to lazy load images with support for custom trigger events such as click, inView, etc.

How to use it:

Install, download and import the following JavaScript and CSS files into your document.

# NPM
$ npm install justlazy --save

<link rel="stylesheet" href="stylesheets/justlazy.css">
<script src="javascript/justlazy.js"></script>

Insert the image you want to lazy load using the following HTML data attributes:

<div class="load-if-visible-placeholder justlazy-spinner" 
     data-src="1.jpg" 
     data-alt="Image Alt" 
     data-title="Image Title">
</div>

Activate the image lazy load plugin and done. In this case, the image will be loaded once it is scrolled into view.

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder");

Specify the threshold in milliseconds that the image will be loaded xxx pixels before it become visible in the screen.

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder",{
  threshold: 300
});

Callback functions:

Justlazy.registerLazyLoadByClass("load-if-visible-placeholder",{
  // Optional callback which is invoked after the image is loaded successfully but before the actual replacement.
  onloadCallback: function(){},
                              
  // Optional error handler which is invoked before the actual replacement if the image could not be loaded.
  onerrorCallback: function(){},
  // Optional callback which is invoked directly after the replacement of the placeholder.
  onreplaceCallback: function(){},
                                
});