Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

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

Preview:

Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

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:

progressively

Changelog:

v1..2.5 (06/10/2018)

  • API updated

You Might Be Interested In:


Leave a Reply