二、获取文章分类页的下一页文章数据
分析:这个和上面的不太一样,这里只需要指定下一页的链接,点击时更新文章数据同时更新下一页链接就行
HTML:下一页文章链接、loading图标
<div class="load_more">
<?php next_posts_link( __( '加载更多', 'lee' ) ); ?> //链接地址
<em class="loading_icon"></em> //loading图标
</div>
CSS:具体样式请查看分类页效果
JS:将返回的数据添加至页面,更新链接,同时也要防止在返回数据前的多次点击
//分类页ajax翻页
if(!$(".load_more a").length){
$(".load_more").remove(); //判断是否含有下一页
}
//是否正在加载
var onloading = false;
$("#wrapper").on("click",".load_more a",function() {
if(onloading){
return false;
}else{
$.ajax({
type: "get",
url: $(this).attr("href"),
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
$(".load_more").find("a").text("加载中...");
$(".load_more em").show();
onloading = true;
},
error: function(request) {
console.log(request.responseText);
},
statusCode: {
404: function() {
console.log("404");
}
},
success: function(data) {
//获取文章所在的DOM及下一页链接
var result = $(data).find("#main .article");
var nextHref = $(data).find(".load_more a").attr("href");
// 渐显新内容
$(".load_more").before(result.fadeIn(400));
$(".load_more em").hide();
$(".load_more").find("a").text("加载更多");
if (nextHref != undefined) {
$(".load_more a").attr("href", nextHref);
} else { // 若没有链接,即为最后一页,则移除导航
$(".load_more").remove();
}
onloading = false;
}
});
}
return false;
});
// 给浏览器窗口绑定 scroll 事件
$(window).on("scroll",function() {
var windowH = $(window).height();
var documentH = $(document).height();
// 判断窗口的滚动条是否接近页面底部
if ($(document).scrollTop() + windowH > documentH - 100) {
if(onloading){
return false;
}else{
//滚动到页面底部时,自动触发点击下一页
$(".load_more a").click();
}
}
});
总结
使用ajax,能提升用户体验,但是也会给SEO带来影响,因为搜索引擎的爬虫爬取不到下一页甚至更多页的内容。但还是有方法解决的,比如直接在首页添加网站地图,使用SEO插件等等。
1 2

