自动加载html,jQuery实现的自动加载页面功能示例-优快云博客

该示例展示了如何使用jQuery实现自动加载HTML内容的功能。当用户滚动到页面底部时，内容会动态加载，增加了用户体验。文章包括了`scrollpagination.js`和`index.html`的代码实现，并提供了在页面加载过程中的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考，具体如下：

demo.html：

---------------

阅谁问君诵，水落清香浮

+++++++++++++++

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：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$(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;

});

};

});

内容开始

加载中

结束了

效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。