https://github.com/gilbitron/pil
A simple Javascript library for progressive image loading
https://github.com/gilbitron/pil
Last synced: about 1 year ago
JSON representation
A simple Javascript library for progressive image loading
- Host: GitHub
- URL: https://github.com/gilbitron/pil
- Owner: gilbitron
- License: mit
- Created: 2015-12-22T15:59:01.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-05-04T09:41:15.000Z (about 8 years ago)
- Last Synced: 2025-04-13T01:13:09.797Z (over 1 year ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### This repo is no longer maintained. If you would like to take over ownership please [get in touch](mailto:gilbert@pellegrom.me).
# Pil
A simple Javascript library for progressive image loading. Based on
[Medium's progressive image loading](https://jmperezperez.com/medium-image-progressive-loading-placeholder/) technique.
## Demo
[See the demo on CodePen](http://codepen.io/gilbitron/full/WrxgGM/)
Note that the demo works best if you "Disable cache" in DevTools.
## Usage
Include the script and CSS file:
```html
```
Your images will need a wrapper with the `pil` class:
```html
```
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:
```js
Pil.init();
```
## Contribute
So you want to help out? That's awesome. Here is how you can do it:
* [Report a bug](https://github.com/gilbitron/Pil/labels/bug)
* [Ask for a feature](https://github.com/gilbitron/Pil/labels/enhancement)
* [Submit a pull request](https://github.com/gilbitron/Pil/pulls)
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](http://gilbert.pellegrom.me) from
[Dev7studios](http://dev7studios.com). Released under the [MIT license](https://raw.githubusercontent.com/gilbitron/Pil/master/LICENSE).