holder.js的使用

地址：http://www.bootcdn.cn/holder/

使用：<img src="holder.js/300x200" />注意事项：300x200里面的符号是x,不是乘法号

为了避免控制台404错误,您可以使用data-src代替src。<img data-src="holder.js/300x200" />

Placeholder options are set through URL properties, e.g. holder.js/300x200?x=y&a=b. Multiple options are separated by the & character.

• theme: The theme to use for the placeholder. Example: holder.js/300x200?theme=sky
• random: Use random theme. Example: holder.js/300x200?random=yes
• bg: Background color. Example: holder.js/300x200?bg=2a2025
• fg: Foreground (text) color. Example: holder.js/300x200?fg=ffffff
• text: Custom text. Example: holder.js/300x200?text=Hello
• size: Custom text size. Defaults to pt units. Example: holder.js/300x200?size=50
• font: Custom text font. Example: holder.js/300x200?font=Helvetica
• align: Custom text alignment (left, right). Example: holder.js/300x200?align=left
• outline: Draw outline and diagonals for placeholder. Example: holder.js/300x200?outline=yes
• lineWrap: Maximum line length to image width ratio. Example: holder.js/300x200?lineWrap=0.5

测试后的效果

There are 6 default themes: sky, vine, lava, gray, industrial, and social. Example: holder.js/300x200?theme=social




Themes have 5 properties: fg, bg, size, font and fontweight. The size property specifies the minimum 

font size for the theme. The fontweight default value is bold. 

You can create a sample theme like this:





<script type="text/javascript">
Holder.addTheme("red", {
 bg: "#F00",
 fg: "#aaa",
 size: 11,
 font: "Monaco",
 fontweight: "normal"
});
</script>

自定义后直接使用：<img src="holder.js/300x200?theme=red" />

If you have a group of placeholders where you'd like to use particular text, you can do so by adding a text property to the theme:

Holder.addTheme("thumbnail", { bg: "#fff", text: "Thumbnail" });

后续更多内容请参考：http://www.bootcdn.cn/holder/readme/