當我們在進行網頁的排版布局時，有時會需要放置些占位圖片來豐富內容，手動生成這些占位圖片的話，特別是尺寸要精確到像素時，就會有些繁瑣。
好在 holder.js 可以幫我們自動生成占位圖片，而且還能定義占位圖片的一些基本樣式。
holder.js版本更新地址：
基本用法
Holder.js的基本用法很簡單，可以去 官網 下載， 引入holder.js文件就可以了，也可以直接使用Bootcss的CDN :
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>
向頁面中插入占位圖片，只需把img標簽的src屬性統一設置成holder.js，并附上圖片的尺寸就可以了：
<img src="holder.js/300x200">
holder.js就會在該處自動生成一張規定尺寸的占位圖片：
控制占位圖片尺寸
holder.js中的圖片尺寸，默認單位是像素。也可以用百分比作為單位，這樣占位圖片就會根據父節點的尺寸自動縮放。注意，holder.js中百分比要寫p，而不是%：
<img src="holder.js/100px200"`>
想要讓占位圖片在縮放時，依然保持固定的長寬比，可以加上auto參數：
<img src="holder.js/300x200?auto=yes">
調整占位圖片的樣式
調整顏色
holder.js生成的占位圖片默認是淺灰色配色，配色可以通過theme參數修改：
<img src="holder.js/300x200?auto=yes&theme=vine">
holder.js共定義了6種占位圖片配色，分別是：sky、vine、lava、gray、industiral、social。
如果內置的配色方案不滿足你的需要的話，還能自己定義配色。可以配置項有限，但基本上能滿足需要：
Holder.addTheme("dark", {
bg: "#000", // 背景色
fg: "#aaa", // 前景色（字符顏色）
size: 11, // 字符大小
font: "Monaco", // 字體
fontweight: "normal" // 字符粗細
});調整文字
占位圖片的正中默認顯示該圖片的尺寸，可以通過text參數修改成任意文字。如果需要換行，就在換行處輸入\n，注意\n的兩邊各需要一個空格：
<img src="holder.js/300x200?text=此處請放一張綠色的圖片 \n 最好有邊框">
以上就是holder.js的使用方法。
