Author: | zafree |
---|---|
Views Total: | 1,285 views |
Official Page: | Go to website |
Last Update: | May 31, 2016 |
License: | MIT |
Preview:

Description:
pilpil is a JavaScript library which progressively loading images with a blur effect as you seen on Medium.com.
How to use it:
Load the Pilpil’s JavaScript and Stylesheet in the html document.
<link rel="stylesheet" href="pilpil.min.css"> <script src="dist/js/pilpil.min.js"></script>
Add low resolution and high resolution images to your webpage following the markup structure like this:
<figure class="graf-figure"> <div class="aspectRatioPlaceholder"> <div class="aspectRatioPlaceholder-fill"></div> <div class="progressiveMedia" data-width="1800" data-height="1680"> <img class="progressiveMedia-thumbnail" src="thumb.jpg" alt="" /> <canvas class="progressiveMedia-canvas"></canvas> <img class="progressiveMedia-image" data-src="full.jpg" alt="" /> </div> </div> </figure>
That’s it. Pilpil will take care of the rest.