Simplest Image Lazy Load with Pure JavaScript – lazy.js

Preview:

Description:

Lazy.js is a minimalist JavaScript solution to delay the loading of images until they come into view.

How to use it:

Load the lazy.js at the end of the document so your pages load faster.

<script src="js/lazy.js"></script>

Insert your image into the desired position using Html5 data-lazy attribute. loading.gif is a placeholder to indicate the loading progress.

<img src="img/loading.gif" data-lazy="your-image.png">

Initialize the lazy load function for your images.

lazy.init({
  delay:1000,
  callback : function(elem) {}
});