js ajax向上滑动加载更多,jQuery & JavaScript 实现上滑加载更多

下载全部文件

在线查看 JS 代码

function bottomScrollLoading(contentObj, loadingObj, url) {

var loading = false;

$(window).scroll(function (){

if (loading)

{

return; // 已经在加载中了，再拖也没有用

}

var scrollTop = $(window).scrollTop();

var clientHeight = $(window).height();

// var clientHeight = document.body.clientHeight; // 如果没有为网页指定 DOCTYPE，则用这句代替上一句

if (scrollTop + clientHeight < $(document).height()){

return; // 还没有拖到底

}

loading = true;

$(loadingObj).show(); // 显示“加载中”

$(window).scrollTop(scrollTop + $(loadingObj).height()); // 继续滚动，让“加载中”显示完整

// ajax 读取

$.ajax({

url: url,

success: function (data){

// setTimeout(function (){

$(contentObj).append(data);

// }, 5000); // 为了效果明显，作了延迟，调试用。

},

complete : function (){

// setTimeout(function (){

$(loadingObj).hide();

$(window).scrollTop(scrollTop); // 由于前面为了显示“加载中”让网页下滚了，这里要复原，否则如果遇到加载的内容高度 < “加载中”高度，就会导致又触发滚动加载。

loading = false;

// }, 5000); // 为了效果明显，作了延迟，调试用。

}

});

});

}

$(window).ready(function (){

bottomScrollLoading("#list", "#bottomLoading", "data.htm");

});

如果要做成拉到底还可以多拉一点点，此时提示“继续上滑，加载更多”，然后再继续上滑，才加载更多，这就更复杂了。

请继续阅读升级版。

相关阅读