用 jquery 制作随着显示页面的滚动条的滚动动态加载图片，适用于图片太多的页面，在访问网页时，可以先只加载第一屏要显示的图片，当用户进行向下滚动查看页面的时候，动态去加载这些图片，好处是减少页面第一次显示的流量，加快页面第一屏显示的速度。
主要原理：通过 setInterval 定时事件，检测滚动条的位置，再进行 ajax 请求服务端数据，加载图片到页面上。
现有 淘宝商城，3366等网站都有应用。
主要演示代码如下：
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
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. 'img.php?p=' +pageNo+ '&r='
32. 'GET'
33. 'text'
34. 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. "(" +responseData+ ")"
52. itemsSize = returnjson.items.length;
53.
54. ''
55. 1 )*pageSize + 1
56. for (i= 0
57. '<ul class="item">'
58. '<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. '<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. '</ul>'
62. }
63. '<div class="clear"></div>'
64. '#items' ).html($( '#items'
65.
66. // 当前页码数小于3页时继续显示更多提示框
67. if (pageNo < 3
68. '#showmore' ).html( '<a class="handle" href="javascript:show()">显示更多结果</a>'
69. else
70. clearInterval(iIntervalId);
71. '#showmore'
72. }
73. }
74.
75. // 判断滚动条是否到达底部
76. function reachBottom() {
77. 0
78. if
79. scrollTop = document.documentElement.scrollTop;
80. else if
81. scrollTop = document.body.scrollTop;
82. }
83. if ((scrollTop > 0
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
95. if (pageNo >= 3
96. clearInterval(iIntervalId);
97. '#showmore'
98. return
99. }
100. show();
101. }
102. };
103. </script>
