placeholder.js客戶端生成占位圖
一個Javascript庫，用于在瀏覽器端生成placeholder image，提供完善的配置和簡單的方法。EN-Readme
預(yù)覽
特點
-
不依賴任何 js 框架，比如 jq
-
小于 1k ，具體是0.98k，增加img配置方式之后，為1.52kb
-
配置項多，都有默認(rèn)值
-
使用簡單
使用
引入 placeholder.js 到你的前段代碼中:
<script src="placeholder.js"></script>
1.調(diào)用placeholder.js的方法進(jìn)行替換，舉個例子如下:
<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">
2.使用URL參數(shù)的方式配置Img的屬性options，例如：
<img class="placeholder" />
或者攜帶參數(shù)options:
<img options="size=256x128&text=Hello!" class="placeholder" />
請注意img標(biāo)簽的class屬性必須placeholder。
Placeholder 配置項
Placeholder 配置項用于API方法的輸入?yún)?shù), e.g.placeholder.getData({text: 'Image 404'}). 或者作為URL參數(shù)樣式作為img的屬性配置， e.g.options="size=256x128&text=Hello!"
-
size: placeholder圖片尺寸. 例如:256x128, 默認(rèn):128x128.
-
bgcolor: 背景顏色. 例如:#969696. 默認(rèn):random.
-
color: 前景顏色，文字顏色. 例如:#ccc. 默認(rèn):random.
-
text: 自定義文本內(nèi)容. 例如:Hello World, 你好. 默認(rèn): equal tosize.
-
fstyle: 字體樣式. 可以是normal / italic / oblique. 默認(rèn):oblique.
-
fweight: 字體weight. 可以是normal / bold / bolder / lighter / Number. 默認(rèn):bold.
-
fsize: 字體大小. 默認(rèn):自動計算字體大小防止文字超出圖片大小.
-
ffamily: 字體. 默認(rèn):consolas.
具體參數(shù)配置例子:
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標(biāo)簽的src屬性中使用，或者在css的背景中使用。
-
placeholder.getCanvas(opts): 獲得canvas元素, 可以直接插入到DOM結(jié)構(gòu)中。
為什么要造輪子
-
很多 image placeholder 都是在服務(wù)端生成，需要額外搭建服務(wù)以及耗費資源。
-
imsky/holder是客戶端生成，大名鼎鼎，但是在用到網(wǎng)頁上，動態(tài)圖片的時候，它的那種風(fēng)格用起來不太方便。
-
其他的 image placeholder 太大了，比如上面提到的 holder 壓縮之后還有 30k 以上，其實不太使用在網(wǎng)頁上使用。
待完成
-
更多的靈活配置。
-
作為瀏覽器端的js庫，盡可能的壓縮大小。
其他
任何問題歡迎反饋和 pr ，代碼非常簡單，相信 1 分鐘你就可以看懂，非常歡迎push request。