In this post, we will use holder.js javascript to demonstrate how you can use default image placeholders for your website.
Holder renders image placeholders entirely in browser. Placeholders can have custom colors, fonts, resizing behavior, and rendering engine (Canvas/SVG). Visit http://holderjs.com/ and download holder.js java script and upload to your website or use locally.
Include holder.js in your HTML:
<script src="holder.js"></script>Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/300x200">The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.
Following is the sample code,
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="holder.js/300x200">
<script src="holder.js"></script>
</body>
</html>