placeholder.js是一款轻量级的可在浏览器端生成占位图片的javascript库插件。该图片占位插件大小小于1kb,不依赖于任何js框架,并提供完善的配置参数和简单的方法。它的特点还有:
- 不依赖任何框架javascript框架,例如jQuery。
- 小于1k,具体是0.98k,增加img配置方式之后,为1.52kb。
- 配置参数项多,都有默认值。
- 使用简单。
使用方法
使用该图片占位插件需要引入placeholder.js文件。
<script src="js/placeholder.js"></script>
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
。
配置参数
Placeholder配置项用于API方法的输入参数, 例如:placeholder.getData({text: 'Image 404'})
。 或者作为URL参数样式作为img的属性配置,例如: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' } //get the base64 of the placeholder image. console.log(placeholder.getData(opts))
或者作为img的options属性:
size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas
方法
-
placeholder.getData(opts)
:获得placeholder图片的base64字符串,可以直接在img标签的src属性中使用,或者在css的背景中使用。 -
placeholder.getCanvas(opts)
:获得canvas元素, 可以直接插入到DOM结构中。
image placeholder插件的github地址为:https://github.com/hustcc/placeholder.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!