Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

Preview:

Description:

Just another fast, dependency-free JavaScript library used to lazy load images with a progressive blur loading effect as you seen on Medium or Instagram.

How to use it:

Insert the required JS & CSS files into the webpage.

<link rel="stylesheet" href="progressively.min.css">
<script src="progressively.min.js"></script>

Insert the low quality image into the webpage and specify the path to the high quality version using the ‘data-progressive’ attribute as this:

<figure class="progressive">
  <img class="progressive__img progressive--not-loaded" 
       data-progressive="hd.jpg" 
       src="normal.jpg">
</figure>

Initialize the Progressively and done.

progressively.init();

Here’re some useful options which can be passed to the Progressively during init.

progressively.init({
  // appropriate value, don't change unless intended
  throttle: 300, 
  // sets the timout value for images to start load asynchronously
  delay: 100,
  // in pixels
  smBreakpoint: 600
  // callbacks
  onLoadComplete: function () {},
  onLoad: function () {},
  
});

See it in action:

Changelog:

v1..2.5 (06/10/2018)

• API updated