Holder is a client-side image placeholder library that uses <canvas>
and the data URI scheme to render placeholders entirely in browser.
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.
To avoid console 404 errors, you can use data-src
instead of src
.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 3 default themes: gray
, industrial
, and social
. You can use them like this:
<img src="holder.js/200x300/industrial">
Themes have 3 properties: foreground
, background
, and size
. The size
property specifies the minimum font size for the theme. You can create a sample theme like this:
Holder.add_theme("dark", {background:"#000", foreground:"#aaa", size:11})
There are two ways to use custom themes with Holder:
- Include theme at runtime to render placeholders already using the theme name
- Include theme at any point and re-render placeholders that are using the theme name
The first approach is the easiest. After you include holder.js
, add a script
tag that adds the theme you want.
The second approach requires that you call run
after you add the theme, like this:
Holder.add_theme("bright", {background:"white", foreground:"gray", size:12}).run()
You can use Holder in different areas on different images with custom themes:
<img data-src="example.com/100x100/simple" id="new">
Holder.run({
domain: "example.com",
themes: {
"simple":{
background:"#fff",
foreground:"#000",
size:12
}},
images: "#new"
})
You don't have to create a new theme just to use custom colors. Custom colors can be specified in the background:foreground
format using hex notation, like this:
<img data-src="holder.js/100x200/#000:#fff">
The above will render a placeholder with a black background and white text.
Holder extends its default settings with the settings you provide, so you only have to include those settings you want changed. For example, you can run Holder on a specific domain like this:
Holder.run({domain:"example.com"})
You can prevent Holder from running its default configuration by executing Holder.run
with your custom settings right after including holder.js
. However, you'll have to execute Holder.run
again to render any placeholders that use the default configuration.
You can add a placeholder programmatically by chaining Holder calls:
Holder.add_theme("new",{foreground:"#ccc", background:"#000", size:10}).add_image("holder.js/200x100/new", "body").run()
The first argument in add_image
is the src
attribute, and the second is a CSS selector of the parent element.
- Chrome 1+
- Firefox 3+
- Safari 4+
- Internet Explorer 9+
Holder is provided under the Apache 2.0 License. Commercial use requires attribution.
Holder is a project by Ivan Malopinsky.