Submit A Resource
Contact Us
About Functionn

Subscription Options

Subscribe By Email (265+)



Jun 20, 2012

Author: Hirvesh Posted At: 6/20/2012 Tags: , , , , ,

Holder.js - A JavaScript Library Which Renders Image Placeholders Entirely On The Client Side

Holder.js is a JavaScript library which renders image placeholders entirely on the client side.  It uses the <canvas> and the data URI scheme to render placeholders entirely in browser.  It works both online and offline, and offers a chainable API to style and create placeholders with ease.

How to use it

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

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:

Browser support

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

Requirements: None
License: Apache License v2.0

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Trending Posts On Functionn This Week


Other Interesting Resources:


Post a Comment


Recent Posts

Popular Categories

Popular Components

Popular Licenses