一个不到 1kb 的 image placeholder 的 js 库

image-placeholder.js

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

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

预览

官方网站示例

《一个不到 1kb 的 image placeholder 的 js 库》

《一个不到 1kb 的 image 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

    原文作者:aTool_vip
    原文地址: https://segmentfault.com/a/1190000004161123
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞