https://github.com/krasimir/coloor

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

Last synced: 18 days 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-11-17T06:09:01.343Z (26 days ago)
• Language: JavaScript
• Homepage: http://krasimir.github.io/coloor/example/
• Size: 438 KB
• Stars: 333
• Watchers: 14
• Forks: 11
• 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