頁面滾動到底部自動 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
