js控制图片延时加载

 

注重网页显示速度的常用这个手段。意思就是滚动条没滚到的就先不加载。

整理了下网上资料，总结如下。

原理：

1.先不把img标签的src赋实际的图片路径

2.将图片路径保存在img的name属性中

3.js判断图片是否在可视窗口内，取出name的值，赋给src，此刻才加载图片。

我这里使用的是jquery。

[html] view plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/> 
  5. <scriptsrc="http://blog.suiyidian.cn/texiao/jquery-1.3.1.js"type="text/javascript"></script> 
  6. <title>js图片延时加载特效</title> 
  7. <scripttype="text/javascript"> 
  8.     $(function () { 
  9.         var d = new Array(); 
  10.         for (var i = 0; i < $("img").length; i++) { 
  11.             d[i] = $("img").eq(i).attr("name"); 
  12.         } 
  13.          
  14.         for (i = 0; i < $("img").length; i++) { 
  15.             if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) { 
  16.                 $("img").eq(i).attr("src", "hc.gif"); 
  17.             } else { 
  18.                 $("img").eq(i).attr("src", d[i]); 
  19.             } 
  20.         } 
  21.  
  22.         $(window).scroll(function () { 
  23.             for (i = 0; i < $("img").length; i++) { 
  24.                 if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) { 
  25.                     $("img").eq(i).attr("src", "hc.gif"); 
  26.                 } else { 
  27.                     $("img").eq(i).attr("src", d[i]); 
  28.                 } 
  29.             } 
  30.         }); 
  31.     }) 
  32. </script> 
  33. </head> 
  34. <body> 
  35. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  36. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  37. <br/><br/><br/><br/><br/><br/> 
  38. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  39. <br/> 
  40. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  41. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  42. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  43. <br/><br/><br/><br/><br/><br/> 
  44. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  45. <br/> 
  46. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  47. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  48. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  49. <br/><br/><br/><br/><br/><br/> 
  50. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  51. <br/> 
  52. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  53. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  54. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  55. <br/><br/><br/><br/><br/><br/> 
  56. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  57. <br/> 
  58. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  59. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  60. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  61. <br/><br/><br/><br/><br/><br/> 
  62. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  63. <br/> 
  64. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  65. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  66. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  67. <br/><br/><br/><br/><br/><br/> 
  68. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  69. <br/> 
  70. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  71. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  72. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  73. <br/><br/><br/><br/><br/><br/> 
  74. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  75. <br/> 
  76. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  77. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  78. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  79. <br/><br/><br/><br/><br/><br/> 
  80. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  81. <br/> 
  82. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  83. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  84. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  85. <br/><br/><br/><br/><br/><br/> 
  86. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  87. <br/> 
  88. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  89. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  90. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  91. <br/><br/><br/><br/><br/><br/> 
  92. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  93. <br/> 
  94. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  95. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  96. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  97. <br/><br/><br/><br/><br/><br/> 
  98. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  99. <br/> 
  100. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  101. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  102. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  103. <br/><br/><br/><br/><br/><br/> 
  104. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  105. <br/> 
  106. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  107. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  108. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  109. <br/><br/><br/><br/><br/><br/> 
  110. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  111. <br/> 
  112. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  113. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  114. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  115. <br/><br/><br/><br/><br/><br/> 
  116. <imgname="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg"src="hc.gif"  /> 
  117. <br/> 
  118. <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  119. </body> 
  120. </html> 
posted @ 2012-11-12 18:36  wenllsz  阅读(328)  评论(0)  编辑  收藏  举报