一個不到 1kb 的 image placeholder 的 js 庫

jasperyang 發(fā)布于2019-08-19 17:14 / 1430人閱讀

摘要：一個庫，用于在瀏覽器端生成，提供完善的配置和簡單的方法。獲得元素可以直接插入到結構中。是客戶端生成，大名鼎鼎，但是在用到網(wǎng)頁上，動態(tài)圖片的時候，它的那種風格用起來不太方便。待完成更多的靈活配置。作為瀏覽器端的庫，盡可能的壓縮大小。

image-placeholder.js

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

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

預覽

官方網(wǎng)站示例

特點

不依賴任何 js 框架，比如 jq

小于 1k ，具體是0.98k，增加img配置方式之后，為1.52kb

配置項多，都有默認值

使用簡單

使用

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

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

或者攜帶參數(shù)options:

請注意img標簽的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, 默認: 128x128.

bgcolor: 背景顏色. 例如: #969696. 默認: random.

color: 前景顏色，文字顏色. 例如: #ccc. 默認: random.

text: 自定義文本內(nèi)容. 例如: Hello World, 你好. 默認: equal to size.

fstyle: 字體樣式. 可以是 normal / italic / oblique. 默認: oblique.

fweight: 字體weight. 可以是 normal / bold / bolder / lighter / Number. 默認: bold.

fsize: 字體大小. 默認: 自動計算字體大小防止文字超出圖片大小.

ffamily: 字體. 默認: 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標簽的src屬性中使用，或者在css的背景中使用。

placeholder.getCanvas(opts): 獲得canvas元素, 可以直接插入到DOM結構中。

為什么要造輪子

很多 image placeholder 都是在服務端生成，需要額外搭建服務以及耗費資源。

imsky/holder是客戶端生成，大名鼎鼎，但是在用到網(wǎng)頁上，動態(tài)圖片的時候，它的那種風格用起來不太方便。

其他的 image placeholder 太大了，比如上面提到的 holder 壓縮之后還有 30k 以上，其實不太使用在網(wǎng)頁上使用。

待完成

更多的靈活配置。

作為瀏覽器端的js庫，盡可能的壓縮大小。

其他

任何問題歡迎反饋和 pr ，代碼非常簡單，相信 1 分鐘你就可以看懂，非常歡迎push request。

GPU云服務器云服務器 js的des庫 js 把一個數(shù)組的值 js一個數(shù)據(jù)的餅圖 js找一個元素的爸爸

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78331.html

看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

Vixb 2019-08-30 14:06 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

zhou_you 2019-08-22 15:13 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現(xiàn)一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現(xiàn)有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

xingpingz 2019-08-01 18:40 評論0 收藏0