Pilpil - Progressive Image Loading
Branch: master
Clone or download
Latest commit 0fc9d2f Jun 6, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Missing px unit Jun 1, 2016
js Missing px unit May 31, 2016
sass initial commit May 29, 2016
.gitignore initial commit May 29, 2016
LICENSE initial commit May 29, 2016
README.md Fix spelling Jun 4, 2016
gulpfile.js initial commit May 29, 2016
index.html initial commit May 29, 2016
package.json update gh-pages link May 29, 2016

README.md

Pilpil - Progressive Image Loading

Pilpil is a tiny, pure JavaScript library for Progressive Image Loading with a blur effect to reduce the page load time; as seen on Medium.

Demo

https://zafree.github.io/pilpil

How

  1. Link files to your site or application (add <script> to bottom of page)
<link rel="stylesheet" href="css/pilpil.css">
<script src="js/pilpil.js"></script>
  1. Set markup
<div class="aspectRatioPlaceholder">
  <div class="aspectRatioPlaceholder-fill"></div>
  <div class="progressiveMedia" data-width="1920" data-height="1080">
    <img class="progressiveMedia-thumbnail" src="small-image-path" alt="" />
    <canvas class="progressiveMedia-canvas"></canvas>
    <img class="progressiveMedia-image" data-src="original-image-path" alt="" />
  </div>
</div>
  1. Add src small-image-path for class .progressiveMedia-thumbnail
<img class="progressiveMedia-thumbnail" src="small-image-path" alt="" />
  1. Set data-src="path" original-image-path for class .progressiveMedia-image
<img class="progressiveMedia-image" data-src="original-image-path" alt="" />
  1. And finally set original image size (width, height) that you used in data-src="path" to data-width and data-height for class .progressiveMedia. For example:
<div class="progressiveMedia" data-width="1920" data-height="1080">

Why

It's the best way to load an image. No dependencies. Pure JavaScript. Progressive Image Loading with a blur effect. Reduce the page loading time. Better user experience. Wow.

Where

Pilpil should (in theory) work in all relevant browsers (ie9+). If not, create an issue! Thanks!

Who

Written by Zafree, made better by you.