- ×
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="pilpil.css" /> <script src="pilpil.js"></script>
- Set markup
<div class="image" data-width="original_width" data-height="original_height" data-small="small_image_path" data-large="original_image_path" data-alt="image_alt"> </div>
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.
- Link files to your site or application (add