Client Side Image Place Holders Made Easy

For years designers and developers have used “Lorem ipsum” as a standard placeholder text when creating page layouts. When incorporating images into the body design though the standard approach is a little less straight forward. With images having to be made or resized first to the required dimensions and then inserted into the page layout where required.

Enter holder.js
Holder.js allows placeholder images to be placed into your layout easily using the HTML5 canvas element. To use simply include the holder.js script in the head of your document:

<script src=”holder.js”></script>

Then simply use standard img elements with the desired dimensions of the placeholder where you would like the image to appear in your layout:

<img src=”holder.js/300×200″>

For an example of the script in action see here.

More Info:
Holder.js site
Holder.js @ github

Leave a Reply

Your email address will not be published. Required fields are marked *