image-placeholder.js

一个Javascript库，用于在浏览器端天生placeholder image，供应完美的设置和简朴的要领。EN-Readme

Github：https://github.com/hustcc/placeholder.js

预览

官方网站示例

特性

1. 不依赖任何 js 框架，比方 jq

2. 小于 1k ，详细是0.98k，增添img设置体式格局以后，为1.52kb

3. 设置项多，都有默许值

4. 运用简朴

运用

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

<script src="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 设置项

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构造中。

为何要造轮子

1. 许多 image placeholder 都是在效劳端天生，须要分外搭建效劳以及消耗资本。

2. imsky/holder是客户端天生，赫赫有名，但是在用到网页上，动态图片的时刻，它的那种作风用起来不太轻易。

3. 其他的 image placeholder 太大了，比方上面提到的 holder 紧缩以后另有 30k 以上，实在不太运用在网页上运用。

待完成

1. 更多的天真设置。

2. 作为浏览器端的js库，尽量的紧缩大小。

其他

任何问题迎接反应和 pr ，代码异常简朴，置信 1 分钟你就能够看懂，异常迎接push request。