Holder 可直接在客户端渲染图片的占位。支持在线和离线，提供一个链式 API 对图像占位进行样式处理。

这是一个比较有用的插件,可以是你的缩略图,以及不显示图片时占位图片,比较好看.当然他的用法不仅仅使这些.我还利用这个插件绘制了一些小图标,为网站增色不少,而且速度也比图片的好很多.好了直接看例子吧.

 

代码如下

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <script> 
  6.  
  7. Holder.run({ 
  8.     themes: { 
  9.         "simple":{ 
  10.             background:"#66FFCC", 
  11.             foreground:"#000", 
  12.             size:12 
  13.             } 
  14.     }, 
  15.     p_w_picpaths: "#new" 
  16.     }) 
  17.  
  18.  
  19. </script> 
  20.  
  21. <script src="holder.js"></script> 
  22. <style> 
  23. div{ 
  24.     margin:2px; 
  25.     } 
  26.  
  27. </style> 
  28. <title>holder-demo</title> 
  29. </head> 
  30.  
  31. <body> 
  32. <div style=" width:200px; background-color:#F9F"> 
  33. <img src="holder.js/200x100"> 
  34. 第一示例 
  35. </div> 
  36.  
  37.  
  38. <!--#########################################--> 
  39.  
  40. <div style="width:600"> 
  41. <span style=" width:200px;"> 
  42. <img data-src="holder.js/200x100/gray"> 
  43.  
  44. </span> 
  45. <span style=" width:200px;"> 
  46. <img data-src="holder.js/200x100/industrial"> 
  47.  
  48. </span> 
  49. <span style=" width:200px;"> 
  50. <img data-src="holder.js/200x100/social"> 
  51. </span> 
  52. </div> 
  53. <p style="background-color:#F9F; width:200px;">第二示例</p> 
  54.  
  55.  
  56. <!--  
  57. data-src 可以作为src的补充  也就是当图片存在时显示图片 如果图片不显示时 可以用这个占位并显示图片提示文字 
  58. gray/industrial/social  提供三种样式  默认为gray 
  59.  
  60. --> 
  61.  
  62. <!--#########################################--> 
  63.  
  64.  
  65. <script> Holder.add_theme("bright", { background: "#EEEEEE", foreground: "gray", size: 30,font: "Alex Brush",text:"hello 中国" })</script> 
  66. <div style=" width:200px; background-color:#F9F"> 
  67. <img src="holder.js/200x100/bright"> 
  68. 第三示例 
  69. </div> 
  70.  
  71. <!--  
  72. 可以自定义样式  后台颜色 前台颜色 字体大小 以及字体 不过字体为本机字体 不能引用外部字体   text显示提示文字 
  73. 添加样式必须在引入holder.js之后 
  74.  
  75. --> 
  76.  
  77. <!--#########################################--> 
  78.  
  79.  
  80.  
  81.  
  82. <div style=" width:200px; background-color:#F9F"> 
  83. <img src="holder.js/200x100/#000:#fff/text:hello world/font:Alex Brush"> 
  84. 第四示例 
  85. </div> 
  86.  
  87. <!--  
  88. 所有参数都可以在 src中定义 /宽*高/后天颜色:前台字体颜色/显示文字/字体 
  89.  
  90. --> 
  91.  
  92. <!--#########################################--> 
  93.  
  94.  
  95. <div style=" width:500px; background-color:#F9F"> 
  96. <img data-src="holder.js/100%x75/industrial"> 
  97. 第五示例 
  98. </div> 
  99.  
  100. <!--  
  101. 百分比指定维度创建流体的占位符/字体 
  102.  
  103. --> 
  104.  
  105. <!--#########################################--> 
  106.  
  107.  
  108.  
  109. <style> #sample {url(holder.js /200x100/social) no-repeat}</style> 
  110. <div style=" width:200px; background-color:#F9F"> 
  111. <div id="sample" class="holderjs">原来是可以的啊 不过高度不对啊 这是怎么回事呢啊 难道说是最大高度么 看来得有内容填充到那里才能够显示啊 !!!!</div> 
  112. 第六示例 
  113. </div> 
  114.  
  115. <!--  
  116. 可以用css样式来显示某个元素背景 
  117. Holder.run({domain:"example.com"}) 可以设定参数  比如class的参数也可以用这种方法修改 
  118.  
  119. --> 
  120.  
  121. <!--#########################################--> 
  122.  
  123.  
  124. <style> #sample {url(holder.js /200x100/social) no-repeat}</style> 
  125. <div style=" width:200px; background-color:#F9F"> 
  126. <img data-src="holder.js/200x100/simple" id="new"> 
  127. 第七示例 
  128. </div> 
  129.  
  130. <!--  
  131. 可以用css样式来显示某个元素背景 
  132. Holder.run({domain:"example.com"}) 可以设定参数  比如class的参数也可以用这种方法修改 
  133.  
  134. --> 
  135.  
  136. <!--#########################################--> 
  137.  
  138.  
  139. </body> 
  140. </html> 
 
  
 
 
  
如果懒得动手也可以下载
 
  
示例下载
 
  
我基本把英文例子全做了一遍,并写上了注解很容易就能懂,有需要的可以去下载.当然也可以看英文文档自己开发 呵呵
 
  
这里是官网主页
 
  
这里是项目首页