页面滚动到底部自动 Ajax 获取文章

Posted 2020-08-03 兌_onlyone

页面滚动到底部自动 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