Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/krasimir/coloor

Image preloading utility
https://github.com/krasimir/coloor

Last synced: 3 months ago
JSON representation

Image preloading utility

Awesome Lists containing this project

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
image 1
```

Output:

```html
image 1
```

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