Holder 使用 SVG 在浏览器中呈现图像占位符。
占位符选项
占位符选项通过 URL 属性设置，例如 holder.js/300x200?x=y&a=b . 多个选项由 & 字符分隔。
theme：用于占位符的主题。 例子：holder.js/300x200?theme=skyrandom：使用随机主题。 例子：holder.js/300x200?random=yesbg： 背景颜色。 例子：holder.js/300x200?bg=2a2025fg：前景（文本）颜色。 例子：holder.js/300x200?fg=fffffftext：自定义文本。 例子：holder.js/300x200?text=Hellosize：自定义文本大小。 默认为pt单位。 例子：holder.js/300x200?size=50font：自定义文本字体。 例子：holder.js/300x200?font=Helveticaalign：自定义文本对齐方式（左，右）。 例子：holder.js/300x200?align=leftoutline：为占位符绘制轮廓和对角线。 例子：holder.js/300x200?outline=yeslineWrap：最大线条长度与图像宽度的比率。 例子：holder.js/300x200?lineWrap=0.5
主题
Holder 包括对主题的支持，以帮助占位符融入您的布局。
有 6 个默认主题： sky 、 vine 、 lava 、 gray 、 industrial 和 social 。
文本
Holder 会自动为超出图像边界的文本添加换行符。 如果文本太长，超出了水平和垂直边界，则将文本移到顶部。 如果您更喜欢控制换行符，您可以 \n 在 text 属性中添加：
<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.">
如果您想禁用换行，请将 nowrap 选项设置为 true ：
<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.&nowrap=true">
使用该 text 选项时，不显示图像尺寸。 要将尺寸重新插入到文本中，只需使用特殊的 holder_dimensions 占位符即可。
<img data-src="holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions">
由于 SVG 对跨域资源链接的限制，使用自定义字体的占位符默认使用画布呈现。 如果您只使用本地可用的字体，您可以通过 在 选项中设置 noFontFallback 为来禁用此行为。 但是，如果您需要使用外部加载的字体呈现 SVG 占位符，则必须使用 标签而不是 标签，并将 类添加到适当的 标签中。 这是一个例子： true Holder.run object img holderjs link
<head>
<link href="http://.../font-awesome.css" rel="stylesheet" class="holderjs">
</head>
<body>
<object data-src="holder.js/300x200?font=FontAwesome"></object>
重要提示： 在本地测试时，字体 URL 必须定义一个 http 或 https 协议。
重要提示： 从公共注册表以外的位置（即 Google 字体、Typekit 等）提供的字体需要设置正确的 CORS 标头。 有关更多详细信息，请参阅 如何将 CDN 与 Webfonts 一起使用 。
<object> 占位符像 <img> 占位符一样工作，其 DOM 的额外好处是能够被检查和修改。 与 <img> 占位符一样， data-src 属性比 data 属性更可靠。
