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

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

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)

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

JSmiles

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

0 文章

0 评论

84961 人气

关注发私信

友情链接

文江博客