AJAX加载完所有文章后滚动页面CSS加载器反复显示如何解决？

问题原因 #

你当前的代码存在四个核心缺陷导致该bug：

• 无请求锁：滚动事件触发频率极高，未判断是否有正在进行的AJAX请求时，会反复触发loadMore方法，导致加载器反复显隐
• 无加载终止标记：已经没有更多文章可加载时，没有停止滚动监听或屏蔽loadMore逻辑，每次滚动到阈值都会触发无效请求
• posts存在性判断逻辑错误：posts == 'undefined'的判断方式不成立，应该判断变量类型而非直接和字符串'undefined'对比，导致即使无数据也不会终止加载逻辑
• 初始页码逻辑缺陷：currentPage初始值为1，你设定仅当currentPage>=2时才提取帖子内容，首次触发loadMore请求到的第一页内容不会被渲染

修复方案 #

直接修改前端JS代码即可，修改后的代码如下：

(function($) {
    var currentPage = 2; // 第一页已经在页面初始化时渲染完成，直接从第二页开始加载
    var isLoading = false; // 新增请求锁，避免重复请求
    var hasMorePosts = true; // 标记是否还有更多文章可加载

    $('.pagination').hide();

    $(window).scroll(function() {
        // 只有没有正在加载、还有更多文章、滚动到阈值时才触发加载
        if (!isLoading && hasMorePosts && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            loadMore();
        }
    });

    function loadMore() {
        isLoading = true; // 加锁
        $.ajax({
                url: baseUrl + '?page=' + currentPage,
                type: 'GET',
                beforeSend: function() {
                    $('.loader').show();
                }
            })
            .done(function(data) {
                $('.loader').hide();
                var posts = $(data).find('#postsContainer').html();
                // 判断是否还有帖子
                if (typeof posts == 'undefined' || posts.trim() == '') {
                    hasMorePosts = false; // 没有更多帖子了，终止后续加载
                    // 可选：移除滚动监听，彻底避免无效触发
                    // $(window).off('scroll');
                } else {
                    $('#postsContainer').append(posts);
                    currentPage = currentPage + 1;
                }
                isLoading = false; // 解锁
            })
            .fail(function() {
                // 请求失败也要解锁，避免后续无法加载
                $('.loader').hide();
                isLoading = false;
            });
    }

})(jQuery);

可选优化（非必须） #

如果希望提升加载性能，可以单独写一个接口只返回帖子列表的HTML片段或者JSON数据，不用每次请求整个页面，减少数据传输体积和DOM查找的开销。

内容的提问来源于stack exchange，提问作者Razvan Zamfir