Coloor - Image preloading utility
(Inspired by Dominant Colors for Lazy-Loading Images from Manuel Wieser)
Coloor is a HTML preprocessor that decorates your <img> 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
Installation
npm i coloor -S
Usage
var Coloor = ; ;Input:
Output:
Then include this code (776 bytes) on your page to get the preloading works:
{var d=document;var ce="createElement";var ga="getAttribute";{var elem=dce"canvas";return!!elemgetContext&&elem}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<images.length;i++){preload(images[i])}}Coloor();Build systems
- Gulp plugin - https://github.com/krasimir/gulp-coloor
- Webpack loader - https://github.com/krasimir/coloor-loader
Notes
- Notice that the snippet that you have to embed in your page starts with
function Color(). The same function is called at the end. In some cases you may not have the decorated HTML at the first render. For example, if you deal with React (jsx) application the HTML is rendered by JavaScript and appears in the DOM with some delay. In this case you have to callColoor()manually.