article:
Plugin: Transition Effects
article:
Infographics: How WordPress Works - Category Vs. Tag

Plugin: Image Placeholders

Advertisement

Holder is a client-side image placeholder library that uses <canvas> and the data URI scheme to render placeholders entirely in browser.

Holder is a lightweight (4kb) JavaScript image placeholder library that uses canvas to display the placeholders.

Plugin: Image Placeholders


Usage

Include holder.js in your HTML.
Holder will process all images with a specific src attribute, like this:

<img src="holder.js/200x300">

The above will render as a placeholder 200 pixels wide and 300 pixels tall.


Using custom themes and domain on specific images

Themes can be used to style the placeholders which consist of a background colour, foreground colour and minimum font size.

<img data-src="example.com/100x100/simple" id="new">

Holder.run({
    domain: "example.com",
    themes: {
        "simple":{
            background:"#fff",
            foreground:"#000",
            size:12
            }},
    images: "#new"
    })


Browser support

- Chrome 1+
- Firefox 3+
- Safari 4+
- Internet Explorer 9+




source
download

Advertisement
Tags: plugin, js, jquery, image, placeholder, web, css, html, design

Leave a Comment

No Comment

© Creative3x Ltd.