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

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

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

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

　　主要演示代码如下：

 

<mce:script type="text/javascript"><!-- var iHeight = 0; var iTop = 0; var clientHeight = 0; var iIntervalId = null; var itemsSize = 0; var pageNo = 1; // 当前页数，默认设为第 1 页 var pageSize = 4; // 每页显示的数量 getPageHeight(); // 添加定时检测事件，每2秒检测一次 iIntervalId = setInterval("_onScroll();", 2000); // 取得当前页面显示所占用的高度 function getPageHeight() { if(document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); } // 调用ajax取服务端数据 function show() { pageNo++; $.ajax({ url: 'img.php?p='+pageNo+'&r='+Math.random(), type: 'GET', dataType: 'text', timeout: 4000, beforeSend: showLoadingImg, error: showFailure, success: showResponse }); } function showLoadingImg() { $('#showmore').html('<a class="handle" href="javascript:show()" mce_href="javascript:show()"><img src="images_test/loading.gif" mce_src="images_test/loading.gif" height="32px" />显示更多结果</a>'); } function showFailure() { $('#showmore').html('<font color=red> 获取查询数据出错 </font>'); } // 根据ajax取出来的json数据转换成html function showResponse(responseData) { var returnjson = eval("("+responseData+")"); itemsSize = returnjson.items.length; var nextpagehtml = ''; var pageOffset = (pageNo-1)*pageSize + 1; for(i=0; i<itemsSize; i++) { nextpagehtml += '<ul class="item">'; nextpagehtml += '<li class="i_thumb"><a href="http://www.xuekaifa.com" mce_href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" mce_src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>'; nextpagehtml += '<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a href="http://www.xuekaifa.com" mce_href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>'; nextpagehtml += '</ul>'; } nextpagehtml += '<div class="clear"></div>'; $('#items').html($('#items').html() + nextpagehtml); // 当前页码数小于3页时继续显示更多提示框 if(pageNo < 3) { $('#showmore').html('<a class="handle" href="javascript:show()" mce_href="javascript:show()">显示更多结果</a>'); } else { clearInterval(iIntervalId); $('#showmore').hide(); } } // 判断滚动条是否到达底部 function reachBottom() { var scrollTop = 0; if(document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } if((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) { return true; } else { return false; } } // 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时 function _onScroll() { iTop = document.documentElement.scrollTop + document.body.scrollTop; getPageHeight(); if(((iTop+clientHeight)>parseInt(iHeight*0.99))||reachBottom()) { if(pageNo >= 3) { clearInterval(iIntervalId); $('#showmore').hide(); return; } show(); } }; // --></mce:script>  

 

　　运行结果如图所示：

 

 

 

　　完整源码下载地址：http://www.xuekaifa.com/article/20110119/000414.html