- ×
Pilpil - Progressive Image Loading
Filed under application tools › loadersShow AllPilpil - 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
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>
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>
Add
src
small-image-path for class.progressiveMedia-thumbnail
<img class="progressiveMedia-thumbnail" src="small-image-path" alt="" />
Set
data-src="path"
original-image-path for class.progressiveMedia-image
<img class="progressiveMedia-image" data-src="original-image-path" alt="" />
And finally set original image size (width, height) that you used in
data-src="path"
todata-width
anddata-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.