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

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

 

holder.js 缩略图占位插件_第1张图片

代码如下

 

   
   
   
   
    
    
    
    
    
  1. > 
    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-demotitle> 
    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.  
    58. 
    
    
    
    
  58.  
    59. 
    
    
    
    
  59. <script> Holder.add_theme("bright", { background: "#EEEEEE", foreground: "gray", size: 30,font: "Alex Brush",text:"hello 中国" })script> 
    60. 
    
    
    
    
  60. <div style=" width:200px; background-color:#F9F"> 
    61. 
    
    
    
    
  61. <img src="holder.js/200x100/bright"> 
    62. 
    
    
    
    
  62. 第三示例 
    63. 
    
    
    
    
  63. div> 
    64. 
    
    
    
    
  64.  
    65. 
    
    
    
    
  65.  
    66. 
    
    
    
    
  66.  
    67. 
    
    
    
    
  67.  
    68. 
    
    
    
    
  68.  
    69. 
    
    
    
    
  69.  
    70. 
    
    
    
    
  70. <div style=" width:200px; background-color:#F9F"> 
    71. 
    
    
    
    
  71. <img src="holder.js/200x100/#000:#fff/text:hello world/font:Alex Brush"> 
    72. 
    
    
    
    
  72. 第四示例 
    73. 
    
    
    
    
  73. div> 
    74. 
    
    
    
    
  74.  
    75. 
    
    
    
    
  75.  
    76. 
    
    
    
    
  76.  
    77. 
    
    
    
    
  77.  
    78. 
    
    
    
    
  78.  
    79. 
    
    
    
    
  79.  
    80. 
    
    
    
    
  80. <div style=" width:500px; background-color:#F9F"> 
    81. 
    
    
    
    
  81. <img data-src="holder.js/100%x75/industrial"> 
    82. 
    
    
    
    
  82. 第五示例 
    83. 
    
    
    
    
  83. div> 
    84. 
    
    
    
    
  84.  
    85. 
    
    
    
    
  85.  
    86. 
    
    
    
    
  86.  
    87. 
    
    
    
    
  87.  
    88. 
    
    
    
    
  88.  
    89. 
    
    
    
    
  89.  
    90. 
    
    
    
    
  90.  
    91. 
    
    
    
    
  91. <style> #sample {url(holder.js /200x100/social) no-repeat}style> 
    92. 
    
    
    
    
  92. <div style=" width:200px; background-color:#F9F"> 
    93. 
    
    
    
    
  93. <div id="sample" class="holderjs">原来是可以的啊 不过高度不对啊 这是怎么回事呢啊 难道说是最大高度么 看来得有内容填充到那里才能够显示啊 !!!!div> 
    94. 
    
    
    
    
  94. 第六示例 
    95. 
    
    
    
    
  95. div> 
    96. 
    
    
    
    
  96.  
    97. 
    
    
    
    
  97.  
    98. 
    
    
    
    
  98.  
    99. 
    
    
    
    
  99.  
    100. 
    
    
    
    
  100. <style> #sample {url(holder.js /200x100/social) no-repeat}style> 
    101. 
    
    
    
    
  101. <div style=" width:200px; background-color:#F9F"> 
    102. 
    
    
    
    
  102. <img data-src="holder.js/200x100/simple" id="new"> 
    103. 
    
    
    
    
  103. 第七示例 
    104. 
    
    
    
    
  104. div> 
    105. 
    
    
    
    
  105.  
    106. 
    
    
    
    
  106.  
    107. 
    
    
    
    
  107.  
    108. 
    
    
    
    
  108.  
    109. 
    
    
    
    
  109. body> 
    110. 
    
    
    
    
  110. html> 
    111.

 

如果懒得动手也可以下载

示例下载

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

这里是官网主页

这里是项目首页