Holder 客户端图像占位符

发布于 2021-06-18 02:38:51 字数 10556 浏览 1513 评论 0

Holder 使用 SVG 在浏览器中呈现图像占位符。被用在众多开源项目中,没有额外的外部请求,轻量级插件,高度可定制。

安装

使用

引入 holder.js 在您的 HTML 中:

<script src="holder.js"></script>

然后 Holder 将处理具有特定 src 属性的所有图像,如下所示:

<img src="holder.js/300x200">

上面的标签将呈现为一个 300 像素宽和 200 像素高的占位符。

为避免控制台 404 错误,您可以使用 data-src 代替 src

JS 方式调用

要以编程方式插入占位符,请使用 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个默认的主题:skyvinelavagrayindustrial,和social

自定义主题

主题有5个属性:fgbgsizefontfontweight。该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">

使用该text选项时,不显示图像尺寸。要将尺寸重新插入文本,只需使用特殊的 holder_dimensions 占位符即可。

<img data-src="holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions">

由于 SVG 对跨域资源链接的限制,使用自定义字体的占位符默认使用画布呈现。如果您只使用本地可用的字体,您可以通过设置noFontFallbacktrueinHolder.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 标头。有关更多详细信息,请参阅 如何将 CDN 与 Webfonts 结合使用

<object> 占位符的工作方式类似于 <img> 占位符,其 DOM 的额外好处是能够被检查和修改。与 <img> 占位符一样,data-src属性比data属性更可靠。

流体占位符

重要提示:百分比是用p字符指定的,而不是用%字符指定的。

以百分比指定维度会创建一个响应媒体查询的流动占位符。

<img data-src="holder.js/100px75?theme=social">

默认情况下,流体占位符将以像素为单位显示其当前大小。要显示原始尺寸,即 100%x75,请将textmode标志设置为literalholder.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);

这将启用更新并立即呈现占位符。

背景占位符

Holder 可以将占位符渲染为具有 holderjs 该类的元素的背景图像,如下所示:

#sample {background:url(?holder.js/200x200?theme=social) no-repeat}
<div id="sample" class="holderjs"></div>

CSS 中的 Holder URL ? 前面应该有一个。与图像占位符一样,您可以在 data-background-src 属性中指定 Holder URL :

<div class="holderjs" data-background-src="?holder.js/300x200"></div>

重要提示:确保为带有背景占位符的元素定义高度和/或宽度。尚不支持流体背景占位符。

运行时设置

Holder 在运行时提供了几个影响图像生成过程的选项。这些是通过Holder.run调用传入的。

  • domain:用于图像生成的域。默认值:holder.js
  • dataAttr:用于定义原生src属性的回退的 HTML属性。默认值:data-src
  • renderer:要使用的渲染器。可用选项:svg, canvas。默认值:svg
  • images:用于查找img标签的 CSS 选择器。默认值:img
  • objects:用于查找object占位符的 CSS 选择器。默认值:object
  • bgnodes:用于查找具有背景占位符的元素的 CSS 选择器。默认值:body .holderjs
  • stylenodes:用于查找要导入 SVG 占位符的样式表的 CSS 选择器。默认值:head link.holderjs
  • noFontFallback:如果使用自定义字体,请不要退回到画布上。
  • noBackgroundSize: 不要设置background-size背景占位符。

在加载时使用自定义设置

您可以通过 Holder.run 在包含后立即执行自定义设置来阻止 Holder 运行其默认配置holder.js。但是,您必须Holder.run再次执行以呈现使用默认配置的所有占位符。

lazyload.js 一起使用

Holder 兼容 lazyload.js 并适用于流体和固定宽度图像。为获得最佳结果,请运行 .lazyload({skip_invisible:false}).

与 React 一起使用

在 React 组件中使用 Holder 时,执行 Holder.run in componentDidMount 以在状态更改后启用渲染。有关更多详细信息,请参阅此问题

与 Vue 一起使用

您可以使用 vue-holderjs 在 Vue 2+ 项目中使用 Holder 。

与 Angular.js 一起使用

您可以在 Angular 项目中使用 Holder 与 ng-holderangular-2-holderjs 用于 Angular 2 项目。

与 Meteor 一起使用

由于 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

冰葑

文章 0 评论 0

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