一個 1kb 的image placeholder的js庫：image-placeholder.js

一個Javascript庫，用于在瀏覽器端生成placeholder image，提供完善的配置和簡單的方法。EN-Readme

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

預覽

官方網站示例

特點

1. 不依賴任何 js 框架，比如 jq
2. 小于 1k ，具體是0.98k，增加img配置方式之后，為1.52kb
3. 配置項多，都有默認值
4. 使用簡單

使用

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

1.調用placeholder.js的方法進行替換，舉個例子如下:

2.使用URL參數的方式配置Img的屬性options，例如：

或者攜帶參數options:

請注意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 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.

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庫，盡可能的壓縮大小。