Generate Beautiful Web Placeholders with holder.js

During website development, it is common to reserve space for advertisements that will be used later. However, without knowing what images to place there, leaving the area empty can make the page look plain. In such cases, using holder.js to generate placeholder images can make the page look more rich and complete.

Usage

First, include holder.js in your page:

<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

Then, call it where you need to display the image. The 300x200 refers to the pixel dimensions, which can be adjusted according to your needs.

<img decoding="async" src="holder.js/300x200">

The generated effect is shown below:

Extended Methods

holder.js allows you to customize placeholder images with different styles.

Setting Themes

holder.js comes built-in with multiple themes. The usage is holder.js/300x200?theme=sky. Available themes include sky, vine, lava, gray, industrial, and social. You can also use holder.js/300x200?random=yes to randomly select a theme.

Font and Style Settings

holder.js also supports setting font styles, sizes, background colors, and foreground colors. The usage is as follows:

• bg: Set the image background color: holder.js/300x200?bg=2a2025
• fg: Set the text foreground color: holder.js/300x200?fg=ffffff
• text: Customize the text: holder.js/300x200?text=Hello
• size: Set the font size (unit: pt): holder.js/300x200?size=50
• font: Customize the text font: holder.js/300x200?font=Helvetica
• align: Set text alignment: holder.js/300x200?align=left

Text Line Breaks

To display text with line breaks, use \n. Note that there should be a space before and after the \n. The method is as follows:

<img data-src="holder.js/300x200?text=Line 1 \n Line 2">

• For more usage instructions, refer to the holder.js project page: https://github.com/imsky/holder