image-placeholder.js 图像占位符
一个 JavaScript 库,用于在浏览器端生成 placeholder image
,提供完善的配置和简单的方法。
特点
- 不依赖任何 js 框架,比如 jq
- YUI压缩大小1.46kb,gzip之后为
851 b
,小于1k - 配置项多,都有默认值
- 使用简单
使用
提供两种方式引入,分别为:浏览器script引入、模块化引入。
使用 script 引入
引入 placeholder.js 到你的前端代码中:
<script src="dist/placeholder.min.js"></script>
提供免费CDN:
通过 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 tosize
.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作为渲染参数。
为什么要造轮子
- 很多 image placeholder 都是在服务端生成,需要额外搭建服务以及耗费资源。
- imsky/holder 是客户端生成,大名鼎鼎,但是在用到网页上,动态图片的时候,它的那种风格用起来不太方便。
- 其他的 image placeholder 太大了,比如上面提到的 holder 压缩之后还有 30k 以上,其实
不太使用在网页上使用
。
github 地址:https://github.com/hustcc/placeholder.js
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论