資訊專欄INFORMATION COLUMN
摘要：一個(gè)庫，用于在瀏覽器端生成，提供完善的配置和簡單的方法。獲得元素可以直接插入到結(jié)構(gòu)中。是客戶端生成，大名鼎鼎，但是在用到網(wǎng)頁上，動(dòng)態(tài)圖片的時(shí)候，它的那種風(fēng)格用起來不太方便。待完成更多的靈活配置。作為瀏覽器端的庫，盡可能的壓縮大小。
image-placeholder.js
一個(gè)Javascript庫，用于在瀏覽器端生成placeholder image，提供完善的配置和簡單的方法。EN-Readme
Github：https://github.com/hustcc/placeholder.js
預(yù)覽官方網(wǎng)站示例
特點(diǎn)不依賴任何 js 框架，比如 jq
小于 1k ，具體是0.98k，增加img配置方式之后，為1.52kb
配置項(xiàng)多，都有默認(rèn)值
使用簡單
使用引入 placeholder.js 到你的前段代碼中:
1. 調(diào)用placeholder.js的方法進(jìn)行替換，舉個(gè)例子如下:
或者攜帶參數(shù)options:
請注意img標(biāo)簽的class屬性必須placeholder。
Placeholder 配置項(xiàng)Placeholder 配置項(xiàng)用于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 to size.
fstyle: 字體樣式. 可以是 normal / italic / oblique. 默認(rèn): oblique.
fweight: 字體weight. 可以是 normal / bold / bolder / lighter / Number. 默認(rèn): bold.
fsize: 字體大小. 默認(rèn): 自動(dòng) 計(jì)算字體大小防止文字超出圖片大小.
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=consolasPlaceholder 方法
placeholder.getData(opts): 獲得placeholder圖片的base64字符串，可以直接在img標(biāo)簽的src屬性中使用，或者在css的背景中使用。
placeholder.getCanvas(opts): 獲得canvas元素, 可以直接插入到DOM結(jié)構(gòu)中。
為什么要造輪子很多 image placeholder 都是在服務(wù)端生成，需要額外搭建服務(wù)以及耗費(fèi)資源。
imsky/holder是客戶端生成，大名鼎鼎，但是在用到網(wǎng)頁上，動(dòng)態(tài)圖片的時(shí)候，它的那種風(fēng)格用起來不太方便。
其他的 image placeholder 太大了，比如上面提到的 holder 壓縮之后還有 30k 以上，其實(shí)不太使用在網(wǎng)頁上使用。
待完成更多的靈活配置。
作為瀏覽器端的js庫，盡可能的壓縮大小。
其他任何問題歡迎反饋和 pr ，代碼非常簡單，相信 1 分鐘你就可以看懂，非常歡迎push request。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78331.html
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對 image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對 image 懶加載組件。多...
摘要：清楚自己想要什么樣的組件，就自己動(dòng)手?jǐn)]唄。咱們先來看看它的效果吧如果大家有時(shí)間，窩還是鼓勵(lì)大家自己動(dòng)手實(shí)現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時(shí)保持特有組件特性。需要確保已安裝。 副標(biāo)題----為什么我要寫這個(gè) react 插件 圖片懶加載是項(xiàng)目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點(diǎn)： 沒有只針對 image 懶加載組件。多...
閱讀 1975·2023-04-25 15:45
閱讀 1214·2021-09-29 09:34
閱讀 2505·2021-09-03 10:30
閱讀 2009·2019-08-30 15:56
閱讀 1466·2019-08-29 15:31
閱讀 1273·2019-08-29 15:29
閱讀 3204·2019-08-29 11:24
閱讀 3061·2019-08-26 13:45
