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

用 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(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>
posted on 2011-01-24 17:43  如花smile  阅读(3444)  评论(1)  编辑  收藏  举报