推荐一个比较好用的插件dropload.min.js
依赖jquery
demo:
$(
function(){
// 页数
var
page =
1;
// 每页展示10个
// var size = 10;
var
category=
"
<?php echo
$category_id
;
?>
";
$(
'.stuff_conbox').
dropload({
scrollArea :
window,
domUp : {
domClass :
'dropload-up',
domRefresh :
'<div class="dropload-refresh"></div>',
domUpdate :
'<div class="dropload-update"><img src="/statics/img/loading.gif" alt=""></div>',
domLoad :
'<div class="dropload-load"><span class="loading"></span></div>'
},
domDown : {
domClass :
'dropload-down',
domRefresh :
'<div class="dropload-refresh"></div>',
domLoad :
'<div class="dropload-load"></div>',
domNoData :
'<div class="dropload-noData"></div>'
},
loadUpFn :
function(me){
setTimeout(
function(){
// 插入数据到页面,放到最后面
// 每次数据插入,必须重置
window.
location.
reload();
me.
resetload();
},
1000);
},
loadDownFn :
function(me){
page++;
// 拼接HTML
var
str =
'';
$.
ajax({
type:
'POST',
url:
'/api/detailmao',
data:{
type:
2,
pagenum:
page},
success:
function(data){
if(data){
$(
".stuff_conbox").
append(data);
// 如果没有数据
}
else{
// 锁定
me.
lock();
// 无数据
me.
noData();
}
// 为了测试,延迟1秒加载
setTimeout(
function(){
// 插入数据到页面,放到最后面
$(
'.stuff_conbox').
append(
str);
// 每次数据插入,必须重置
me.
resetload();
},
1000);
},
error:
function(xhr, type){
alert(
'Ajax error!');
// 即使加载出错,也得重置
me.
resetload();
}
});
},
threshold :
50
});
});