image-placeholder.js

Javascriptplaceholder imageEN-Readme

1. js jq
2. YUI1.46kbgzip851 b1k

script

3.1 script

placeholder.js :

<script src="dist/placeholder.min.js"></script>

CDN:

1. bootcdn placeholder.js
2. cndjs placeholder.js

3.2 ES6

// install before
// npm install placeholder.js

import placeholder from 'placeholder.js';

// or

var placeholder = require("placeholder.js");

UMDplaceholder

3.3

1. placeholder.js:

<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">

2. URLImgoptions

<img class="placeholder" />

options:

<img options="size=256x128&text=Hello!" class="placeholder" />

• img``class``placeholder.
• URLtextencodeURIComponent % %25, & %26, = %3D, %20 e.g.

<img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder">

Hello%25&=.

Placeholder

Placeholder API, e.g. placeholder.getData({text: 'Image 404'}). URLimg e.g. options="size=256x128&text=Hello!"

• size: placeholder. : 256x128, : 128x128.
• bgcolor: . : #969696. : random.
• color: . : #ccc. : random.
• text: . : Hello World, . : equal to size.
• fstyle: . normal / italic / oblique. : oblique.
• fweight: weight. normal / bold / bolder / lighter / Number. : bold.
• fsize: . : `` .
• ffamily: . : consolas.

:

var opts = {
  	size: '512x256',
	bgcolor: '#ccc', 
	color: '#969696',
	text: 'Hello World, ',
	fstyle:'oblique',
	fweight: 'bold',
	fsize:'40',
	ffamily: 'consolas'
}
console.log(placeholder.getData(opts)) //get the base64 of the placeholder image.

imgoptions

size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas

Placeholder

• placeholder.getData(opts): placeholderbase64imgsrccss
• placeholder.getCanvas(opts): canvas, DOM
• placeholder.render(): **class='placeholder'**imgoptions

1. image placeholder
2. imsky/holder
3. image placeholder holder 30k ``

LICENSE

MIT

react , react-placeholder.