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
Demo: http://imsky.github.com/holder/
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.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: