當(dāng)我們?cè)谶M(jìn)行網(wǎng)頁(yè)的排版布局時(shí)，有時(shí)會(huì)需要放置些占位圖片來(lái)豐富內(nèi)容，手動(dòng)生成這些占位圖片的話，特別是尺寸要精確到像素時(shí)，就會(huì)有些繁瑣。

好在 holder.js 可以幫我們自動(dòng)生成占位圖片，而且還能定義占位圖片的一些基本樣式。

基本用法

Holder.js的基本用法很簡(jiǎn)單，可以去 官網(wǎng) 下載， 引入holder.js文件就可以了，也可以直接使用Bootcss的CDN :

<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>

向頁(yè)面中插入占位圖片，只需把img標(biāo)簽的src屬性統(tǒng)一設(shè)置成holder.js，并附上圖片的尺寸就可以了：

<img src="holder.js/300x200">

holder.js就會(huì)在該處自動(dòng)生成一張規(guī)定尺寸的占位圖片：

控制占位圖片尺寸

holder.js中的圖片尺寸，默認(rèn)單位是像素。也可以用百分比作為單位，這樣占位圖片就會(huì)根據(jù)父節(jié)點(diǎn)的尺寸自動(dòng)縮放。注意，holder.js中百分比要寫p，而不是%：

<img src="holder.js/100px200"`>

想要讓占位圖片在縮放時(shí)，依然保持固定的長(zhǎng)寬比，可以加上auto參數(shù)：

<img src="holder.js/300x200?auto=yes">

調(diào)整占位圖片的樣式

調(diào)整顏色

holder.js生成的占位圖片默認(rèn)是淺灰色配色，配色可以通過(guò)theme參數(shù)修改：

<img src="holder.js/300x200?auto=yes&theme=vine">

holder.js共定義了6種占位圖片配色，分別是：sky、vine、lava、gray、industiral、social。

如果內(nèi)置的配色方案不滿足你的需要的話，還能自己定義配色?？梢耘渲庙?xiàng)有限，但基本上能滿足需要：

Holder.addTheme("dark", {
  bg: "#000", // 背景色
  fg: "#aaa", // 前景色（字符顏色）
  size: 11, // 字符大小
  font: "Monaco", // 字體
  fontweight: "normal" // 字符粗細(xì)
});

調(diào)整文字

占位圖片的正中默認(rèn)顯示該圖片的尺寸，可以通過(guò)text參數(shù)修改成任意文字。如果需要換行，就在換行處輸入\n，注意\n的兩邊各需要一個(gè)空格：

<img src="holder.js/300x200?text=此處請(qǐng)放一張綠色的圖片 \n 最好有邊框">

以上就是holder.js的使用方法。