Medium-style Image Loading Effect – pilpil

Category: Image , Javascript , Loading , Recommended | May 31, 2016
Views Total:1,285 views
Official Page:Go to website
Last Update:May 31, 2016


Medium-style Image Loading Effect – pilpil


pilpil is a JavaScript library which progressively loading images with a blur effect as you seen on

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="" />

That’s it. Pilpil will take care of the rest.

You Might Be Interested In:

Leave a Reply