成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jasperyang / 1441人閱讀

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

image-placeholder.js

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

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

預(yù)覽

官方網(wǎng)站示例

特點

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

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

配置項多,都有默認(rèn)值

使用簡單

使用

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


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


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


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

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。

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/78331.html

相關(guān)文章

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

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

    Vixb 評論0 收藏0
  • 看完你也想編寫自己 react 插件

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

    zhou_you 評論0 收藏0
  • 看完你也想編寫自己 react 插件

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

    xingpingz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<