jquery 滚动条动态图片加载（模拟淘宝商城图片加载）

用 jquery 制作随着显示页面的滚动条的滚动动态加载图片，适用于图片太多的页面，在访问网页时，可以先只加载第一屏要显示的图片，当用户进行向下滚动查看页面的时候，动态去加载这些图片，好处是减少页面第一次显示的流量，加快页面第一屏显示的速度。

　　主要原理：通过 setInterval 定时事件，检测滚动条的位置，再进行 ajax 请求服务端数据，加载图片到页面上。

　　现有 淘宝商城，3366等网站都有应用。

　　主要演示代码如下：

Java代码  

1. <script type= "text/javascript" >  
2. var iHeight = 0 ;  
3. var iTop = 0 ;  
4. var clientHeight = 0 ;  
5. var iIntervalId = null ;  
6. var itemsSize = 0 ;  
7. var pageNo = 1 ;    // 当前页数，默认设为第 1 页   
8. var pageSize = 4 ;  // 每页显示的数量   
9.   
10. getPageHeight();  
11.   
12. // 添加定时检测事件，每2秒检测一次   
13. iIntervalId = setInterval("_onScroll();" ,  2000 );  
14.   
15. // 取得当前页面显示所占用的高度   
16. function getPageHeight() {  
17.   if (document.body.clientHeight && document.documentElement.clientHeight) {    
18.     clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;            
19.   } else  {    
20.     clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;        
21.   }  
22.   
23.   iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
24. }  
25.   
26. // 调用ajax取服务端数据   
27. function show() {  
28.   pageNo++;  
29.   
30.   $.ajax({  
31.     url: 'img.php?p=' +pageNo+ '&r=' +Math.random(),  
32.     type: 'GET' ,  
33.     dataType: 'text' ,  
34.     timeout: 4000 ,  
35.     beforeSend: showLoadingImg,  
36.     error: showFailure,  
37.     success: showResponse  
38.   });  
39. }  
40.   
41. function showLoadingImg() {  
42.   $('#showmore' ).html( '<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>' );  
43. }  
44.   
45. function showFailure() {  
46.   $('#showmore' ).html( '<font color=red> 获取查询数据出错 </font>' );  
47. }  
48.   
49. // 根据ajax取出来的json数据转换成html   
50. function showResponse(responseData) {  
51.   var returnjson = eval("(" +responseData+ ")" );  
52.   itemsSize = returnjson.items.length;  
53.   
54.   var nextpagehtml = '' ;  
55.   var pageOffset = (pageNo-1 )*pageSize +  1 ;  
56.   for (i= 0 ; i<itemsSize; i++) {  
57.     nextpagehtml += '<ul class="item">' ;  
58.     nextpagehtml += '<li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="' + returnjson.items[i].name + '"><img src="' + returnjson.items[i].pic + '" alt="' + returnjson.items[i].name + '" /></a></li>' ;  
59.     nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="http://www.xuekaifa.com" target="_blank" title="' + returnjson.items[i].name + '">' + returnjson.items[i].name + '</a></li>' ;              
60.                           
61.     nextpagehtml += '</ul>' ;  
62.   }  
63.   nextpagehtml += '<div class="clear"></div>' ;  
64.   $('#items' ).html($( '#items' ).html() + nextpagehtml);  
65.   
66.   // 当前页码数小于3页时继续显示更多提示框   
67.   if (pageNo <  3 ) {  
68.     $('#showmore' ).html( '<a class="handle" href="javascript:show()">显示更多结果</a>' );  
69.   } else  {  
70.     clearInterval(iIntervalId);  
71.     $('#showmore' ).hide();  
72.   }  
73. }  
74.   
75. // 判断滚动条是否到达底部   
76. function reachBottom() {  
77.   var scrollTop = 0 ;  
78.   if (document.documentElement && document.documentElement.scrollTop) {    
79.     scrollTop = document.documentElement.scrollTop;    
80.   } else   if  (document.body) {    
81.     scrollTop = document.body.scrollTop;    
82.   }  
83.   if ((scrollTop >  0 ) && (scrollTop + clientHeight == iHeight)) {  
84.     return   true ;    
85.   } else  {    
86.     return   false ;   
87.   }  
88. }  
89.   
90. // 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时   
91. function _onScroll() {  
92.   iTop = document.documentElement.scrollTop + document.body.scrollTop;  
93.   getPageHeight();  
94.   if (((iTop+clientHeight)>parseInt(iHeight* 0.99 ))||reachBottom()) {  
95.     if (pageNo >=  3 ) {  
96.       clearInterval(iIntervalId);  
97.       $('#showmore' ).hide();  
98.       return ;  
99.     }  
100.     show();  
101.   }  
102. };  
103. </script>