Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krasimir/coloor
Image preloading utility
https://github.com/krasimir/coloor
Last synced: 3 months ago
JSON representation
Image preloading utility
- Host: GitHub
- URL: https://github.com/krasimir/coloor
- Owner: krasimir
- License: mit
- Created: 2016-03-27T07:15:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-04-19T04:35:11.000Z (over 8 years ago)
- Last Synced: 2024-07-08T20:56:02.413Z (4 months ago)
- Language: JavaScript
- Homepage: http://krasimir.github.io/coloor/example/
- Size: 438 KB
- Stars: 330
- Watchers: 14
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Colorful - Coloor - Image preloading utility. (Tools)
README
# Coloor - Image preloading utility
*(Inspired by [Dominant Colors for Lazy-Loading Images](https://manu.ninja/dominant-colors-for-lazy-loading-images) from [Manuel Wieser](https://twitter.com/manuelwieser))*
**Coloor** is a HTML preprocessor that decorates your `` tags with `data-coloor` attributes containing a small base64 encoded version of your image. The idea is to quickly show the small image as a placeholder while the original one is loading.
#### [Demo](http://krasimir.github.io/coloor/example/)
*(to simulate slow network connection use [Chrome's throttling](http://krasimirtsonev.com/blog/articles/coloor/demo.jpg))*
## Installation
`npm i coloor -S`
## Usage
```js
var Coloor = require('coloor');Coloor(
'',
['', ''],
function (decoratedHTML) {
// ...
}
);
```Input:
```html
```Output:
```html
```Then include [this code](https://github.com/krasimir/coloor/blob/master/lib/coloor.min.js) (776 bytes) on your page to get the preloading works:
```js
function Coloor(){var d=document;var ce="createElement";var ga="getAttribute";function isCanvasSupported(){var elem=d[ce]("canvas");return!!(elem.getContext&&elem.getContext("2d"))}function preload(image){var src,pi,li,w,h,size;if(!isCanvasSupported()){image.src=src;return}src=image[ga]("data-coloor");size=image[ga]("data-coloor-size").split("x");w=parseInt(size[0]);h=parseInt(size[1]);pi=new Image;li=new Image;pi.onload=function(){var canvas=d[ce]("canvas");var ctx=canvas.getContext("2d");canvas.width=w;canvas.height=h;ctx.drawImage(pi,0,0,w,h);image.src=canvas.toDataURL("image/png")};pi.src=image[ga]("src");li.onload=function(){image.src=src};li.src=src}var images=d.querySelectorAll("img[data-coloor]");for(var i=0;i