Holder 使用 SVG 在浏览器中呈现图像占位符。
占位符选项
占位符选项通过 URL 属性设置,例如 holder.js/300x200?x=y&a=b
. 多个选项由 &
字符分隔。
theme
:用于占位符的主题。 例子:holder.js/300x200?theme=sky
random
:使用随机主题。 例子:holder.js/300x200?random=yes
bg
: 背景颜色。 例子:holder.js/300x200?bg=2a2025
fg
:前景(文本)颜色。 例子:holder.js/300x200?fg=ffffff
text
:自定义文本。 例子:holder.js/300x200?text=Hello
size
:自定义文本大小。 默认为pt
单位。 例子:holder.js/300x200?size=50
font
:自定义文本字体。 例子:holder.js/300x200?font=Helvetica
align
:自定义文本对齐方式(左,右)。 例子:holder.js/300x200?align=left
outline
:为占位符绘制轮廓和对角线。 例子:holder.js/300x200?outline=yes
lineWrap
:最大线条长度与图像宽度的比率。 例子: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
属性更可靠。