Holder.js - Client Side Image Placeholders

Holder, by Ivan Malopinsky, is a very small image placeholder service that renders everything on the client side. Using it couldn’t be easier:

// This will render a 200x300 image
<img src="holder.js/200x300" />

// To prevent console errors, use data-src
<img data-src="holder.js/200x300" />

There is also support for three themes, industrial, gray, and social.

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

If you want to create your own theme (so your images will not stick out like a sore thumb), you can add them with the three properties: background, foreground, and size. background/foreground are self explanatory, and size is the minimum font size for the theme.

Holder.add_theme("thechangelog", { background: "#f0f0f0", foreground: "#303030", size: 12});

If you add the theme before your images are added to the DOM, you can use the theme like any of the other themes. However, if you add the theme after your images have already been rendered, you would need to call run().

Holder.add_theme("thechangelog", { background: "#f0f0f0", foreground: "#303030", size: 12}).run();

There are some other features, from custom text to custom domains, that you can checkout by viewing the source at GitHub.