This repo is no longer maintained. If you would like to take over ownership please get in touch.

Pil

A simple Javascript library for progressive image loading. Based on Medium's progressive image loading technique.

Demo

See the demo on CodePen

Note that the demo works best if you "Disable cache" in DevTools.

Usage

Include the script and CSS file:

<link rel="stylesheet" href="pil.css">
<script src="pil.js"></script>

Your images will need a wrapper with the pil class:

<figure class="pil">
    <img src="img/my-image.jpg" data-full-width="5616" data-full-height="3744" alt="">
</figure>

You will also need to add data-full-width and data-full-height attributes to your images so the lib can calculate the aspect ratio.

Next you will need to create the thumbnail image that will be loaded before the main image is loaded. By default it will be loaded with a -thumb postfix. So for example if your image URL is img/my-image.jpg the thumb URL will be img/my-image-thumb.jpg, however this can be overridden by providing a URL in the data-pil-thumb-url attribute.

Thumbnail images should be no larger than 100px. Jpegs should be no more than 20% quality.

Finally you can initiate Pil by calling:

Pil.init();

Contribute

So you want to help out? That's awesome. Here is how you can do it:

• Report a bug
• Ask for a feature
• Submit a pull request

If you are submitting a pull request please adhere to the existing coding standards used throughout the code and only submit 1 feature/fix per pull request. Pull requests containing multiple changes will be rejected.

Credits

Pil was created by Gilbert Pellegrom from Dev7studios. Released under the MIT license.