Holder 可直接在客戶端渲染圖片的佔位。支持在線和離線，提供一個鏈式 API 對圖像佔位進行樣式處理。
這是一個比較有用的插件,可以是你的縮略圖,以及不顯示圖片時佔位圖片,比較好看.當然他的用法不僅僅使這些.我還利用這個插件繪製了一些小圖標,爲網站增色不少,而且速度也比圖片的好很多.好了直接看例子吧.
代碼如下
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- Holder.run({
- themes: {
- "simple":{
- background:"#66FFCC",
- foreground:"#000",
- size:12
- }
- },
- images: "#new"
- })
- </script>
- <script src="holder.js"></script>
- <style>
- div{
- margin:2px;
- }
- </style>
- <title>holder-demo</title>
- </head>
- <body>
- <div style=" width:200px; background-color:#F9F">
- <img src="holder.js/200x100">
- 第一示例
- </div>
- <!--#########################################-->
- <div style="width:600">
- <span style=" width:200px;">
- <img data-src="holder.js/200x100/gray">
- </span>
- <span style=" width:200px;">
- <img data-src="holder.js/200x100/industrial">
- </span>
- <span style=" width:200px;">
- <img data-src="holder.js/200x100/social">
- </span>
- </div>
- <p style="background-color:#F9F; width:200px;">第二示例</p>
- <!--
- data-src 可以作爲src的補充 也就是當圖片存在時顯示圖片 如果圖片不顯示時 可以用這個佔位並顯示圖片提示文字
- gray/industrial/social 提供三種樣式 默認爲gray
- -->
- <!--#########################################-->
- <script> Holder.add_theme("bright", { background: "#EEEEEE", foreground: "gray", size: 30,font: "Alex Brush",text:"hello 中國" })</script>
- <div style=" width:200px; background-color:#F9F">
- <img src="holder.js/200x100/bright">
- 第三示例
- </div>
- <!--
- 可以自定義樣式 後臺顏色 前臺顏色 字體大小 以及字體 不過字體爲本機字體 不能引用外部字體 text顯示提示文字
- 添加樣式必須在引入holder.js之後
- -->
- <!--#########################################-->
- <div style=" width:200px; background-color:#F9F">
- <img src="holder.js/200x100/#000:#fff/text:hello world/font:Alex Brush">
- 第四示例
- </div>
- <!--
- 所有參數都可以在 src中定義 /寬*高/後天顏色:前臺字體顏色/顯示文字/字體
- -->
- <!--#########################################-->
- <div style=" width:500px; background-color:#F9F">
- <img data-src="holder.js/100%x75/industrial">
- 第五示例
- </div>
- <!--
- 百分比指定維度創建流體的佔位符/字體
- -->
- <!--#########################################-->
- <style> #sample {url(holder.js /200x100/social) no-repeat}</style>
- <div style=" width:200px; background-color:#F9F">
- <div id="sample" class="holderjs">原來是可以的啊 不過高度不對啊 這是怎麼回事呢啊 難道說是最大高度麼 看來得有內容填充到那裏才能夠顯示啊 !!!!</div>
- 第六示例
- </div>
- <!--
- 可以用css樣式來顯示某個元素背景
- Holder.run({domain:"example.com"}) 可以設定參數 比如class的參數也可以用這種方法修改
- -->
- <!--#########################################-->
- <style> #sample {url(holder.js /200x100/social) no-repeat}</style>
- <div style=" width:200px; background-color:#F9F">
- <img data-src="holder.js/200x100/simple" id="new">
- 第七示例
- </div>
- <!--
- 可以用css樣式來顯示某個元素背景
- Holder.run({domain:"example.com"}) 可以設定參數 比如class的參數也可以用這種方法修改
- -->
- <!--#########################################-->
- </body>
- </html>
如果懶得動手也可以下載
我基本把英文例子全做了一遍,並寫上了註解很容易就能懂,有需要的可以去下載.當然也可以看英文文檔自己開發 呵呵