Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

Category: Image , Javascript , Loading , Recommended | June 10, 2018
Author: thinker3197
Views Total: 1,586 views
Official Page: Go to website
Last Update: June 10, 2018
License: MIT


Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively


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" 

Initialize the Progressively and done.


Here’re some useful options which can be passed to the Progressively during 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:



v1..2.5 (06/10/2018)

  • API updated

You Might Be Interested In:

Leave a Reply