JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Pilpil - Progressive Image Loading
    Filed under  › 

    • 🔾17%Overall
    • 316
    • 112.3 days
    • 🕩38
    • 👥6

    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="pilpil.css" />
    <script src="pilpil.js"></script>
    
    1. 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.

    Show All