<html> <head> <title>图片自动加载</title> <script type="text/javascript" src="http://www.loqall.com/js/jquery-1.7.1.min.js"></script> <script> var globalcount = 0; function feedToolBar(id) { $(document).ready(function(){ $(window).bind("scroll", function(event){ var fold = $(window).height() + $(window).scrollTop(); if( fold >= $('#'+id).offset().top-20){ p = parseInt($('#'+id).attr('page')); nextpage = p+1; url =$('#'+id).attr('query'); maxpage = parseInt($('#'+id).attr('max')); if(globalcount == 1){return false;}//如果进入队列的就跳出 if(p >= maxpage) { $('#'+id).html('<img src="http://www.loqall.com/tpl/image/hand.gif" class="loading"/>look more...'); }else{ globalcount = 1; //已经进入队列了 $('#'+id).html('<img src="http://www.loqall.com/tpl/image/loading.gif" class="loading"/><span>wait for a moment</span>'); $.post(url,{page:p},function(){ area = $('#'+id).attr('area'); $('#'+area).append('<li><img src="3.jpg" class="image"/></li><li><img src="4.jpg" class="image"/></li>'); $('#'+id).attr('page',nextpage); globalcount = 0; //出队列 }) } } }); }); } </script> </head> <body> <ul id="feedArea"> <li><img src="1.jpg" class="image"/></li> <li><img src="2.jpg" class="image"/></li> </ul> <div id="feedAjaxTool" page="1" max="4" area="feedArea" query="#" class="feedajax"></div> <script>feedToolBar('feedAjaxTool');</script> </body> </html>