页面滚动到底部自动 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
时间： 2024-09-20 05:38:29