Holder 客户端图像占位符

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

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

安装

npm: npm install holderjs
yarn: yarn add holderjs
unpkg: https://unpkg.com/holderjs
cdnjs: https://cdnjs.com/libraries/holder
jsDelivr: https://www.jsdelivr.com/package/npm/holderjs
Bower: bower install holderjs
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。

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个默认的主题：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">

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

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

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

<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);

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

背景占位符

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-holder 或 angular-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)

发布评论

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

列表为空，暂无数据

关于作者

JSmiles

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

0 文章

0 评论

84960 人气

关注发私信

友情链接

文江博客