Performant Image Lazy Load With Custom Events – justlazy.js

Category: Javascript , Loading | December 27, 2017
Views Total:148 views
Official Page:Go to website
Last Update:December 27, 2017


Performant Image Lazy Load With Custom Events – justlazy.js


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 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-alt="Image Alt" 
     data-title="Image Title">

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


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

  threshold: 300

Callback functions:

  // 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(){},

You Might Be Interested In:

Leave a Reply