Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Pilpil - Progressive Image Loading

Resources

License

Releases

No releases published

Packages

No packages published