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
 
 
 
 
 
 
 
 
 
 

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:

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.

About

A simple Javascript library for progressive image loading

Resources

License

Packages

No packages published