本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考，具体如下：
demo.html：
<li><p>---------------</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>阅谁问君诵，水落清香浮</p></li> <li><p>+++++++++++++++</p></li>
scrollpagination.js：
(function( $ ){ $.fn.scrollPagination = function(options) { var opts = $.extend($.fn.scrollPagination.defaults, options); var target = opts.scrollTarget; if (target == null){ target = obj; } opts.scrollTarget = target; return this.each(function() { $.fn.scrollPagination.init($(this), opts); }); }; $.fn.stopScrollPagination = function(){ return this.each(function() { $(this).attr('scrollPagination', 'disabled'); }); }; $.fn.scrollPagination.loadContent = function(obj, opts){ var target = opts.scrollTarget; var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height(); if (mayLoadContent){ if (opts.beforeLoad != null){ opts.beforeLoad(); } $(obj).children().attr('rel', 'loaded'); $.ajax({ type: 'POST', url: opts.contentPage, data: opts.contentData, success: function(data){ $(obj).append(data); var objectsRendered = $(obj).children('[rel!=loaded]'); if (opts.afterLoad != null){ opts.afterLoad(objectsRendered); } }, dataType: 'html' }); } }; $.fn.scrollPagination.init = function(obj, opts){ var target = opts.scrollTarget; $(obj).attr('scrollPagination', 'enabled'); $(target).scroll(function(event){ if ($(obj).attr('scrollPagination') == 'enabled'){ $.fn.scrollPagination.loadContent(obj, opts); } else { event.stopPropagation(); } }); $.fn.scrollPagination.loadContent(obj, opts); }; $.fn.scrollPagination.defaults = { 'contentPage' : null, 'contentData' : {}, 'beforeLoad': null, 'afterLoad': null , 'scrollTarget': null, 'heightOffset': 0 }; })( jQuery );
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/scrollpagination.js"></script> <script type="text/javascript"> $(function(){ $('#content').scrollPagination({ 'contentPage': 'demo.html', //你要搜索结果的页面 'contentData': {},//你可以通过 children().size() 知道哪里是分页 //谁该怎么滚动？在这个例子中，完整的窗口 'scrollTarget': $(window), //在页面到达结束之前，从多少像素开始加载？ 'heightOffset': 10, //前负荷，一些功能，可能显示一个加载DIV 'beforeLoad': function(){ $('#loading').fadeIn(); }, 'afterLoad': function(elementsLoaded){ //加载后，一些功能的动画结果和隐藏预载的div $('#loading').fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); //如果超过100结果加载停止分页（仅用于测试） if ($('#content').children().size() > 100){ $('#nomoreresults').fadeIn(); $('#content').stopScrollPagination(); } } }); //元件中的延迟元件的褪色代码 $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 200); delay += 100; }); }; }); </script> </head> <body> <div id="demo"> <div></div> <ul id="content"> <li><p>内容开始</p></li> </ul> <div id="loading">加载中</div> <div id="nomoreresults">结束了</div> </div> </body> </html>
效果图如下：
希望本文所述对大家jQuery程序设计有所帮助。