Medium-style Progressive Image Loading Effect In jQuery - lqip.js

lqip.js is a super tiny jQuery plugin used to progressively load large images with a blur effect to improve the page load time. Similar to the Medium.com's image loading effect. The smaller the pictures, the better the performance and loading-speed. 

How it works:

Load the small version of your image with a blur effect until the original one is completely loaded. The blur effect is based on the CSS3 blur filters.

See also:

• 'Blur' Image Loading Effect With jQuery and CSS3 - blurry.load.js
• Pure JS Medium-style Image Loading Effect – pilpil

How to use it:

1. Load the minified version of lqip.js plugin after jQuery. Note that The "lqip.min.js" must be at the end of the page. It can't be in the header or anywhere else.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="src/js/lqip.min.js"></script>

2. Create a DIV container with the CSS class of 'lqip'.

<div class="lqip"></div>

3. Insert your images as backgrounds to the DIV container. Note that the 'script' must be above the 'lqip.min.js'!

// Embed small background
var lqipBgSmall = "small.jpg";      

// Embed full-zized background
var lqipBgOrginal = "large.jpg";  

4. The required CSS styles. Paste and add the following styles in your own CSS file.

.lqip-img {height: 0px; width: 0px}

.lqip {
  position: fixed;
  left: -25px;
  right: 0;
  top: -25px;
  z-index: 100;
  display: block;
  background-size: cover!important;
  width: calc(100% + 50px)!important;
  height: calc(100% + 50px)!important;
  filter: blur(15px)
}

.noblur {filter: blur(0px)}

---

This awesome jQuery plugin is developed by fabeger. For more Advanced Usages, please check the demo page or visit the official website.