Holder.js 基于 SVG 的浏览器占位图插件
Holder.js 使用 SVG 在客户端呈现图像占位符,我们在网页设计时会需要一些图片来占位,但是去搜索使用合适尺寸的图片浪费时间,这时候就需要holder.js来自动生成占位图片,还可以定义一些图片的基本样式,方便快捷,holder.js 生成图片使用的是SVG技术,不依赖jQuery等第三方库。
安装
- npm:
npm install holderjs
- yarn:
yarn add holderjs
- Bower:
bower install holderjs
- RawGit: https://cdn.rawgit.com/imsky/holder/master/holder.js
- cdnjs: http://cdnjs.com/libraries/holder
- jsDelivr: http://www.jsdelivr.com/#!holder
- Rails Assets:
gem 'rails-assets-holderjs'
- Meteor:
meteor add imsky:holder
- Composer:
php composer.phar update imsky/holder
- NuGet:
Install-Package Holder.js
开始使用
包括 holder.js
在HTML中:
<script src="holder.js"></script>
Holder 随后将使用特定的 src
属性,比如这个:
<img src="holder.js/300x200">
上面的标签将呈现为一个占位符,宽300像素,高200像素,若要避免控制台404错误,可以使用data-src
而不是src
。
程序使用
若要以编程方式插入占位符,请使用run()
API:
var myImage = document.getElementById('myImage');
Holder.run({
images: myImage
});
占位符选项
占位符选项是通过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
.
定制主题
主题有5个属性:fg
, bg
, size
, font
和fontweight
。这个size
属性指定主题的最小字体大小。这个fontweight
默认值是bold
。您可以创建如下示例主题:
Holder.addTheme("dark", {
bg: "#000",
fg: "#aaa",
size: 11,
font: "Monaco",
fontweight: "normal"
});
如果有一组占位符要在其中使用特定文本,则可以通过添加text
主题的属性:
Holder.addTheme("thumbnail", { bg: "#fff", text: "Thumbnail" });
使用自定义主题
在Holder中使用自定义主题有两种方法:
- 在运行时包含主题,以呈现已经使用主题名称的占位符
- 在任意点包含主题,并重新呈现使用主题名称的占位符。
第一种方法是最简单的。在你包括holder.js
,添加script
添加所需主题的标记:
<script src="holder.js"></script>
<script>
Holder.addTheme("bright", {
bg: "white", fg: "gray", size: 12
});
</script>
第二种方法要求您调用run
添加主题后,如下所示:
Holder.addTheme("bright", {bg: "white", fg: "gray", size: 12}).run();
在特定图像上使用自定义主题和域
您可以在具有自定义主题的不同图像上使用Holder:
<img data-src="example.com/100x100?theme=simple" id="new">
Holder.run({
domain: "example.com",
themes: {
"simple": {
bg: "#fff",
fg: "#000",
size: 12
}
},
images: "#new"
});
插入具有自定义主题的图像
可以通过链接Holder调用以编程方式添加占位符:
Holder.addTheme("new", {
fg: "#ccc",
bg: "#000",
size: 10
}).addImage("holder.js/200x100?theme=new", "body").run();
第一个论点addImage
是src
属性,第二个是父元素的CSS选择器。
文本
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">
由于SVG对跨域资源链接的限制,使用自定义字体的占位符默认使用画布呈现。如果只使用本地可用字体,则可以通过设置noFontFallback
到true
在……里面Holder.run
各种选择。但是,如果需要使用外部加载的字体呈现SVG占位符,则必须使用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头。看见如何在Web字体中使用CDN更多细节。
<object>
占位符的工作方式如下<img>
占位符,可以检查和修改它们的DOM的额外好处。同.一样<img>
占位符data-src
属性比data
属性。
流体占位符
重要:%指定为p
字符,而不是用%
性格。
指定维度的百分比将创建响应媒体查询的流动占位符。
<img data-src="holder.js/100px75?theme=social">
默认情况下,流体占位符将显示其当前大小(以像素为单位)。若要显示原始尺寸(即100%X75),请将textmode
旗子literal
就像这样:holder.js/100px75?textmode=literal
.
自动大小占位符
如果要避免Holder强制执行图像大小,请使用auto
像这样的旗帜:
<img data-src="holder.js/200x200?auto=yes">
以上将呈现一个占位符,没有任何嵌入CSS的高度或宽度。
若要显示自动大小占位符的当前大小,请将textmode
旗子exact
就像这样:holder.js/200x200?auto=yes&textmode=exact
.
防止窗口大小调整上的更新
当窗口调整大小时,流体占位符和处于精确模式的自动大小占位符都会被更新。若要设置是否在调整窗口大小的情况下更新特定图像,可以使用setResizeUpdate
方法如下:
var img = $('#placeholder').get(0);
Holder.setResizeUpdate(img, false);
上述内容将暂停对指定图像(必须是DOM对象)的任何呈现更新。
若要再次启用更新,请运行以下命令:
Holder.setResizeUpdate(img, true);
这将启用更新并立即呈现占位符。
背景占位符
控件可以将占位符呈现为元素的背景图像。holderjs
同学们,就像这样:
#sample {background:url(?holder.js/200x200?theme=social) no-repeat}
<div id="sample" class="holderjs"></div>
CSS中的Holder URL应该有一个?
在前面。与图像占位符一样,可以在data-background-src
属性:
<div class="holderjs" data-background-src="?holder.js/300x200"></div>
重要:确保为具有背景占位符的元素定义高度和/或宽度。尚不支持流体背景占位符。
运行时设置
Holder在运行时提供了几个影响图像生成过程的选项。这些都是通过Holder.run
打电话。
domain
用于图像生成的域。默认值:holder.js
.dataAttr
用于定义本机回退的HTML属性src
属性。默认值:data-src
.renderer
要使用的渲染器。可供选择的办法:svg
,canvas
。默认值:svg
.images
*用于查找img
标签。默认值:img
.objects
*用于查找object
占位符。默认值:object
.bgnodes
*CSS选择器,用于查找具有背景面板的元素。默认值:body .holderjs
.stylenodes
用于查找要导入SVG占位符的样式表的CSS选择器。默认值:head link.holderjs
.noFontFallback
::如果使用自定义字体,不要倒在画布上。noBackgroundSize
*不要设置background-size
背景占位符。
在加载时使用自定义设置
通过执行以下操作,可以防止Holder运行其默认配置。Holder.run
在包含以下内容之后立即使用自定义设置holder.js
。但是,您必须执行Holder.run
再次呈现使用默认配置的任何占位符。
用与 lazyload.js
Holder与 lazyload.js
同时适用于流体和固定宽度的图像。为了获得最好的结果,运行.lazyload({skip_invisible:false})
.
与VUE一起使用
您可以在Vue 2+项目中使用Holder vue-holderjs.
与Angular.js一起使用
您可以在角项目中使用Holder ng-holder 或与 angular-2-holderjs 用于角度2的项目。
与流星一起使用
因为默认情况下,Meteor在文档顶部包含脚本,所以调用Holder时DOM可能无法完全可用。因此,将与Holder相关的代码放在“DOM就绪”事件侦听器中。
用webpack
如果你用 ProvidePlugin
在 webpack 配置中,请确保按照以下方式配置它:
plugins: [
new webpack.ProvidePlugin({
'Holder': 'holderjs',
'holder': 'holderjs',
'window.Holder': 'holderjs'
})
]
浏览器支持
- Chrome
- Firefox 3+
- Safari 4+
- Internet Explorer 9+ (with partial support for 6-8)
- Opera 12+
- Android (with fallback)
相关链接
- 官网:http://holderjs.com/
- Github 地址:https://github.com/imsky/holder
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论