页面滚动到底部自动 Ajax 获取文章
| 代码如下 |
复制代码 |
|
var _timer = {};
function delay_till_last(id, fn, wait) {
if (_timer[id]) {
window.clearTimeout(_timer[id]);
delete _timer[id];
}
return _timer[id] = window.setTimeout(function() {
fn();
delete _timer[id];
}, wait);
}
$(document).ready(function() {
var Ajax_Url = null;
$(window).scroll(function(){
delay_till_last('scroll_Ajax', function(){
if($(window).scrollTop() >= $(document).height() - $(window).height() - 80){ //如果你没有底部固定栏可以把 80 适当减少
Ajax_Url = $(".nextpage a").attr("href");//一个隐藏 a 标签储存下一页要拉取的链接
if( Ajax_Url ){
$.ajax({
type: "GET",
url: Ajax_Url,
success: function(data){
$(".nextpage").remove();
$(".postlist").append(data);
},
error: function(data){
$(".postlist").after('<div id="ajax-list-error">文章获取失败</div>');
}
});
}else{
ajax_load_hide();
$("#ajax-list-error").remove();
$(".postlist").after('<div id="ajax-list-error">全部文章已加载完毕，没有更多的文章了~</div>');
}
}
}, 100);
});
});
|
一开始的 delay_till_last 函数用来防止事件重复触发，也就是重复的内容加载好多遍。
.postlist 为文章 li 的 ul，有两处注意修改。
改造主循环，现在 function.php 里放一个函数
| 代码如下 |
复制代码 |
|
//Ajax Get List
function Bing_is_ajax_list(){
if( isset($_GET["action"]) && $_GET["action"] == "ajax_list" ) return false;
return trun;
}
|
Bing_is_ajax_list() 可以判断是否为 Ajax 请求，返回假为 Ajax
主循环：
| 代码如下 |
复制代码 |
|
wp_reset_query();
if( have_posts() ):
if( Bing_is_ajax_list() ) echo '<ul class="postlist">';
while( have_posts() ):
the_post();
//文章样式，我用的一个函数
Bing_postlist_li();
endwhile;
if( Bing_is_ajax_list() ) echo '</ul>';
echo '<div class="nextpage">';
next_posts_link( '' );
echo '</div>';
endif;
|
最后记得用 Bing_is_ajax_list() 判断，让为假（Ajax 请求）的时候把包括和文章列表 ul 标签自身给去掉，只加载一堆 li