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

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

上一篇:Oracle查询性能优化


下一篇:mysql 数据库连接池