Tiny Image Defer Loading Library – Img Defer

Category: Image , Loading | December 28, 2016
Author: jenstornell
Views Total: 283
Official Page: Go to website
Last Update: December 28, 2016
License: MIT

Preview:

Tiny Image Defer Loading Library – Img Defer

Description:

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'
  });
});