原理
php部分檢測(cè)x-pjax頭 存在即返回頁(yè)面正文部分
滾動(dòng)到底部時(shí) 發(fā)生ajax請(qǐng)求并附上x-pjax頭 寫入新標(biāo)簽做第二頁(yè)
前端部分
scroll事件 當(dāng)頁(yè)面滾動(dòng)時(shí)觸發(fā)
ajaxloading為true才可以進(jìn)行加載(防止多次ajax)
判斷當(dāng)前地址是否為"/"或者"/page/"及"/category/"這樣的地址,是的話繼續(xù)判斷
判斷是否存在下一頁(yè) 存在的話進(jìn)行頁(yè)面滾動(dòng)判斷 是否到達(dá)頁(yè)面底部 到達(dá)進(jìn)行ajax請(qǐng)求 并將ajaxloading設(shè)為false 防止再次請(qǐng)求
顯示加載動(dòng)畫并請(qǐng)求 成功則寫入最后一個(gè)class為nextpage的標(biāo)簽 并移除當(dāng)前換頁(yè)欄 隱藏動(dòng)畫 ajaxloading設(shè)置為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();
}
})
}
}
};
};
});