http://www.bootcdn.cn/holder/ 下載網(wǎng)址
參考網(wǎng)址:http://www.51xuediannao.com/js/texiao/holder.html
html圖片占位符插件holder.js可以為圖片生成一個占位符圖片也可以為某個區(qū)域生成一個占位符圖片，準(zhǔn)確的說應(yīng)該是為某個區(qū)域生成一個占位符圖片携兵，因為img也可以看做是一個區(qū)域疾掰。不依
html圖片占位符插件holder.js
查看演示 立即下載 GitHub 評論/建議/報錯 打賞支持
html圖片占位符插件holder.js可以為圖片生成一個占位符圖片也可以為某個區(qū)域生成一個占位符圖片，準(zhǔn)確的說應(yīng)該是為某個區(qū)域生成一個占位符圖片徐紧，因為img也可以看做是一個區(qū)域静檬。不依賴于jquery等第三方庫。
holder.js圖片生成技術(shù)是用的svg
SVG是個復(fù)雜的東西并级，可以作為一門學(xué)問去研究拂檩，本文不研究這個。
holder.js瀏覽器兼容性
瀏覽器支持范圍還不錯嘲碧，IE678支持部分功能：
Chrome广恢、Firefox 3+
Safari 4+
Internet Explorer 9+ (部分功能支持IE6-8)
Opera 12+
Android (with fallback)
在圖片img標(biāo)簽上調(diào)用：
把參數(shù)寫在src上或者使用data-src,如：src="holder.js/300x200?text=我是占位符" 或者 data-src="holder.js/300x200?text=我是占位符"
效果如圖：
html圖片占位符插件holder.js示例圖片
在指定區(qū)域調(diào)用：
比如咱要在 id="test" 這個區(qū)域加入占位符可以使用js代碼 Holder.addImage("holder.js/200x100?theme=new", "#test").run() 這樣插入
//在指定區(qū)域（#test）調(diào)用 示例：
//web前端開發(fā)http://www.51xuediannao.com/
Holder.addTheme("new", {
fg: "#ccc",
bg: "#000",
size: 10
}).addImage("holder.js/200x100?theme=new", "#test").run();
調(diào)用參數(shù)
多個參數(shù)就像url上的參數(shù)寫法一樣用&鏈接
所有參數(shù)如下：
theme:主題。例如:holder.js/300x200?theme=sky
random:使用隨機(jī)主題呀潭。例如:holder.js/300x200?random=yes
align:"center" , //對齊 left,center,right holder.js/300x200?align=left 并不是很好用，也不建議用至非，不配置默認(rèn)居中就好
outline: //畫出輪廓和對角線的占位符钠署。例如:holder.js/300x200?outline=yes
lineWrap: //最大線長度寬度比形象。例如:holder.js/300x200?lineWrap=0.5
============================================================================
bg: "#eee", //背景顏色 holder.js/300x200?bg=2a2025
fg: "#999", //字體顏色 holder.js/300x200?fg=ffffff
text: 文本, //文本 holder.js/300x200?text=Hello
size: 20, //字號 holder.js/300x200?text=Hello
font: "微軟雅黑", //字體
fontweight: "400", //字體加粗程度荒椭，100-700可以嘗試
holder.js自定義皮膚
自定義皮膚語法： Holder.addTheme("皮膚名字", { 各種參數(shù)對象 });
調(diào)用自定義皮膚就是在調(diào)用參數(shù)后面附帶 theme=皮膚名字谐鼎，如：data-src="holder.js/300x200?text=我是占位符&theme=皮膚名字"
皮膚參數(shù)：
bg: "#eee", //背景顏色 holder.js/300x200?bg=2a2025
fg: "#999", //字體顏色 holder.js/300x200?fg=ffffff
text: 文本, //文本 holder.js/300x200?text=Hello
size: 20, //字號 holder.js/300x200?text=Hello
font: "微軟雅黑", //字體
fontweight: "400", //字體加粗程度，100-700可以嘗試
//自定義皮膚示例：
Holder.addTheme("diy", {
bg: "#eee",
fg: "#999",
size: 20,
font: "微軟雅黑",
fontweight: "400",
outline:"yes"
});
