咨询热线:4006-75-4006
售前:9:00-23:30 备案:9:00-18:00 技术:7*24h
原理
php部分检测x-pjax头 存在即返回页面正文部分
滚动到底部时 发生ajax请求并附上x-pjax头 写入新标签做第二页
前端部分
scroll事件 当页面滚动时触发
ajaxloading为true才可以进行加载(防止多次ajax)
判断当前地址是否为"/"或者"/page/"及"/category/"这样的地址,是的话继续判断
判断是否存在下一页 存在的话进行页面滚动判断 是否到达页面底部 到达进行ajax请求 并将ajaxloading设为false 防止再次请求
显示加载动画并请求 成功则写入最后一个class为nextpage的标签 并移除当前换页栏 隐藏动画 ajaxloading设置为true
var ajaxloading=true;
$(window).scroll(function() {
if (ajaxloading) {
var pagedz = window.location.pathname;
if (pagedz == "/" || pagedz.indexOf('/page/') == 0||pagedz.indexOf('/category/')==0) {
var url = $('.next:last>a').attr('href');
if (url&&url!=document.location.href) {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (parseInt(scrollTop + windowHeight)+2>= scrollHeight) {
ajaxloading=false;
$('.cssload-fond').show();
$.ajax({
url: url,
dataType: 'html',
timeout: 5000,
beforeSend: function(xhr) {
xhr.setRequestHeader('X-PJAX', 'true')
},
success: function(data) {
console.log('ok');
ajaxloading=true;
$('.nextpage:last').html(data);
var state = {
title: document.title,
url: url,
};
window.history.pushState(null, document.title, url);
$('.page-navigator:first').remove();
$('.cssload-fond').hide();
},
error: function(data) {
console.log("eero" + data);
sendmessage('ajax失败');
$('.cssload-fond').hide();
}
})
}
}
};
};
});