Holder.js 基于 SVG 的浏览器占位图插件

发布于 2020-05-04 10:58:43 字数 10643 浏览 1724 评论 0

Holder.js 使用 SVG 在客户端呈现图像占位符,我们在网页设计时会需要一些图片来占位,但是去搜索使用合适尺寸的图片浪费时间,这时候就需要holder.js来自动生成占位图片,还可以定义一些图片的基本样式,方便快捷,holder.js 生成图片使用的是SVG技术,不依赖jQuery等第三方库。

安装

开始使用

包括 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, fontfontweight。这个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();

第一个论点addImagesrc属性,第二个是父元素的CSS选择器。

文本

Holder会自动向超出图像边界的文本添加分行符。如果文本太长,超出了水平和垂直的边界,文本就移到顶部。如果您喜欢控制换行符,可以添加\ntext财产:

<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对跨域资源链接的限制,使用自定义字体的占位符默认使用画布呈现。如果只使用本地可用字体,则可以通过设置noFontFallbacktrue在……里面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必须具有httphttps协议定义。

重要:字体来自公共注册中心以外的位置(即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)

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文