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

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

 

holder.js 缩略图占位插件

代码如下

 



    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

  3. <head> 
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 

  5. <script> 
    6. 

  6.  
    7. 

  7. Holder.run({ 
    8. 

  8.     themes: { 
    9. 

  9.         "simple":{ 
    10. 

  10.             background:"#66FFCC", 
    11. 

  11.             foreground:"#000", 
    12. 

  12.             size:12 
    13. 

  13.             } 
    14. 

  14.     }, 
    15. 

  15.     p_w_picpaths: "#new" 
    16. 

  16.     }) 
    17. 

  17.  
    18. 

  18.  
    19. 

  19. </script> 
    20. 

  20.  
    21. 

  21. <script src="holder.js"></script> 
    22. 

  22. <style> 
    23. 

  23. div{ 
    24. 

  24.     margin:2px; 
    25. 

  25.     } 
    26. 

  26.  
    27. 

  27. </style> 
    28. 

  28. <title>holder-demo</title> 
    29. 

  29. </head> 
    30. 

  30.  
    31. 

  31. <body> 
    32. 

  32. <div style=" width:200px; background-color:#F9F"> 
    33. 

  33. <img src="holder.js/200x100"> 
    34. 

  34. 第一示例 
    35. 

  35. </div> 
    36. 

  36.  
    37. 

  37.  
    38. 

  38. <!--#########################################--> 
    39. 

  39.  
    40. 

  40. <div style="width:600"> 
    41. 

  41. <span style=" width:200px;"> 
    42. 

  42. <img data-src="holder.js/200x100/gray"> 
    43. 

  43.  
    44. 

  44. </span> 
    45. 

  45. <span style=" width:200px;"> 
    46. 

  46. <img data-src="holder.js/200x100/industrial"> 
    47. 

  47.  
    48. 

  48. </span> 
    49. 

  49. <span style=" width:200px;"> 
    50. 

  50. <img data-src="holder.js/200x100/social"> 
    51. 

  51. </span> 
    52. 

  52. </div> 
    53. 

  53. <p style="background-color:#F9F; width:200px;">第二示例</p> 
    54. 

  54.  
    55. 

  55.  
    56. 

  56. <!--  
    57. 

  57. data-src 可以作为src的补充  也就是当图片存在时显示图片 如果图片不显示时 可以用这个占位并显示图片提示文字 
    58. 

  58. gray/industrial/social  提供三种样式  默认为gray 
    59. 

  59.  
    60. 

  60. --> 
    61. 

  61.  
    62. 

  62. <!--#########################################--> 
    63. 

  63.  
    64. 

  64.  
    65. 

  65. <script> Holder.add_theme("bright", { background: "#EEEEEE", foreground: "gray", size: 30,font: "Alex Brush",text:"hello 中国" })</script> 
    66. 

  66. <div style=" width:200px; background-color:#F9F"> 
    67. 

  67. <img src="holder.js/200x100/bright"> 
    68. 

  68. 第三示例 
    69. 

  69. </div> 
    70. 

  70.  
    71. 

  71. <!--  
    72. 

  72. 可以自定义样式  后台颜色 前台颜色 字体大小 以及字体 不过字体为本机字体 不能引用外部字体   text显示提示文字 
    73. 

  73. 添加样式必须在引入holder.js之后 
    74. 

  74.  
    75. 

  75. --> 
    76. 

  76.  
    77. 

  77. <!--#########################################--> 
    78. 

  78.  
    79. 

  79.  
    80. 

  80.  
    81. 

  81.  
    82. 

  82. <div style=" width:200px; background-color:#F9F"> 
    83. 

  83. <img src="holder.js/200x100/#000:#fff/text:hello world/font:Alex Brush"> 
    84. 

  84. 第四示例 
    85. 

  85. </div> 
    86. 

  86.  
    87. 

  87. <!--  
    88. 

  88. 所有参数都可以在 src中定义 /宽*高/后天颜色:前台字体颜色/显示文字/字体 
    89. 

  89.  
    90. 

  90. --> 
    91. 

  91.  
    92. 

  92. <!--#########################################--> 
    93. 

  93.  
    94. 

  94.  
    95. 

  95. <div style=" width:500px; background-color:#F9F"> 
    96. 

  96. <img data-src="holder.js/100%x75/industrial"> 
    97. 

  97. 第五示例 
    98. 

  98. </div> 
    99. 

  99.  
    100. 

  100. <!--  
    101. 

  101. 百分比指定维度创建流体的占位符/字体 
    102. 

  102.  
    103. 

  103. --> 
    104. 

  104.  
    105. 

  105. <!--#########################################--> 
    106. 

  106.  
    107. 

  107.  
    108. 

  108.  
    109. 

  109. <style> #sample {url(holder.js /200x100/social) no-repeat}</style> 
    110. 

  110. <div style=" width:200px; background-color:#F9F"> 
    111. 

  111. <div id="sample" class="holderjs">原来是可以的啊 不过高度不对啊 这是怎么回事呢啊 难道说是最大高度么 看来得有内容填充到那里才能够显示啊 !!!!</div> 
    112. 

  112. 第六示例 
    113. 

  113. </div> 
    114. 

  114.  
    115. 

  115. <!--  
    116. 

  116. 可以用css样式来显示某个元素背景 
    117. 

  117. Holder.run({domain:"example.com"}) 可以设定参数  比如class的参数也可以用这种方法修改 
    118. 

  118.  
    119. 

  119. --> 
    120. 

  120.  
    121. 

  121. <!--#########################################--> 
    122. 

  122.  
    123. 

  123.  
    124. 

  124. <style> #sample {url(holder.js /200x100/social) no-repeat}</style> 
    125. 

  125. <div style=" width:200px; background-color:#F9F"> 
    126. 

  126. <img data-src="holder.js/200x100/simple" id="new"> 
    127. 

  127. 第七示例 
    128. 

  128. </div> 
    129. 

  129.  
    130. 

  130. <!--  
    131. 

  131. 可以用css样式来显示某个元素背景 
    132. 

  132. Holder.run({domain:"example.com"}) 可以设定参数  比如class的参数也可以用这种方法修改 
    133. 

  133.  
    134. 

  134. --> 
    135. 

  135.  
    136. 

  136. <!--#########################################--> 
    137. 

  137.  
    138. 

  138.  
    139. 

  139. </body> 
    140. 

  140. </html> 
    141. 



 


如果懒得动手也可以下载


示例下载


我基本把英文例子全做了一遍,并写上了注解很容易就能懂,有需要的可以去下载.当然也可以看英文文档自己开发 呵呵


这里是官网主页


这里是项目首页