Medium-style Image Loading Effect – pilpil

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.