image-placeholder.js 图像占位符

发布于 2021-06-14 02:37:40 字数 4550 浏览 1743 评论 0

一个 JavaScript 库,用于在浏览器端生成 placeholder image,提供完善的配置和简单的方法。

特点

  1. 不依赖任何 js 框架,比如 jq
  2. YUI压缩大小1.46kb,gzip之后为851 b,小于1k
  3. 配置项多,都有默认值
  4. 使用简单

使用

提供两种方式引入,分别为:浏览器script引入、模块化引入。

使用 script 引入

引入 placeholder.js 到你的前端代码中:

<script src="dist/placeholder.min.js"></script>

提供免费CDN:

  1. bootcdn placeholder.js
  2. cndjs placeholder.js

通过 ES6 引入

// install before
// npm install placeholder.js

import placeholder from 'placeholder.js';

// or

var placeholder = require("placeholder.js");

支持UMD加载,得到的对象(如全局对象placeholder)。

使用方法

1. 调用 placeholder.js 的方法进行替换,举个例子如下:

<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">

2. 使用 URL 参数的方式配置Img的属性options,例如:

<img class="placeholder" />

或者携带参数options:

<img options="size=256x128&text=Hello!" class="placeholder" />

注意事项:

  • img 标签的 class 属性要包含 placeholder 才会生效.
  • URL参数中的 text 值应该被 encodeURIComponent 转码,主要包括: % 为 %25, & 为 %26, = 为 %3D, 空格 为 %20 e.g.
<img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder">

上面的配置会生成一个占位图,其中的文字内容为: Hello%25&=

Placeholder 配置项

Placeholder 配置项用于API方法的输入参数, e.g. placeholder.getData({text: 'Image 404'}). 或者作为URL参数样式作为img的属性配置, e.g. options="size=256x128&text=Hello!"

  • size: placeholder图片尺寸. 例如: 256x128, 默认: 128x128.
  • bgcolor: 背景颜色. 例如: #969696. 默认: random.
  • color: 前景颜色,文字颜色. 例如: #ccc. 默认: random.
  • text: 自定义文本内容. 例如: Hello World, 你好. 默认: equal to size.
  • fstyle: 字体样式. 可以是 normal / italic / oblique. 默认: oblique.
  • fweight: 字体weight. 可以是 normal / bold / bolder / lighter / Number. 默认: bold.
  • fsize: 字体大小. 默认: 自动 计算字体大小防止文字超出图片大小.
  • ffamily: 字体. 默认: consolas.

具体参数配置例子:

var opts = {
  	size: '512x256',
	bgcolor: '#ccc', 
	color: '#969696',
	text: 'Hello World, 你好',
	fstyle:'oblique',
	fweight: 'bold',
	fsize:'40',
	ffamily: 'consolas'
}
console.log(placeholder.getData(opts)) //get the base64 of the placeholder image.

作为img的options属性为:

size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas

Placeholder 方法

  • placeholder.getData(opts): 获得placeholder图片的base64字符串,可以直接在img标签的src属性中使用,或者在css的背景中使用。
  • placeholder.getCanvas(opts): 获得canvas元素, 可以直接插入到DOM结构中。
  • placeholder.render(): 渲染**class='placeholder'**的img标签,并且使用对应的options作为渲染参数。

为什么要造轮子

  1. 很多 image placeholder 都是在服务端生成,需要额外搭建服务以及耗费资源。
  2. imsky/holder 是客户端生成,大名鼎鼎,但是在用到网页上,动态图片的时候,它的那种风格用起来不太方便。
  3. 其他的 image placeholder 太大了,比如上面提到的 holder 压缩之后还有 30k 以上,其实 不太使用在网页上使用

github 地址:https://github.com/hustcc/placeholder.js

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

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

发布评论

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

关于作者

JSmiles

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

0 文章
0 评论
84960 人气
更多

推荐作者

文章 0 评论 0

云雾

文章 0 评论 0

夏尔

文章 0 评论 0

alipaysp_yxYxYl56FW

文章 0 评论 0

涙—继续流

文章 0 评论 0

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