Tiny Image Defer Loading Library – Img Defer

A super tiny JavaScript library which has the ability to defer the loading of images until the DOM content has finished loading.

How to use it:

Embed an image into the document using the data-src attribute. The regular src attribute is used to specify the path to the placeholder image as this:

<img class="defer" 
     src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
     data-src="1.jpg">

Load the core JavaScript file img-defer.js at the end of your html document.

<script src="img-defer.js"></script>

Initialize the Img Defer and specify the selector containing images you’d like to defer loading.

document.addEventListener("DOMContentLoaded", function(event) {
  imgDefer.load({
      selector: '.defer'
  });
});