Ajax在Opera/Edge异常、页面刷新失效及滚动加载合理性咨询

咱们先来拆解你遇到的几个问题，再聊聊这个方案的适用性：

一、当前代码导致问题的具体原因 #

1. 无请求锁导致重复请求，资源被挤占 #

你的滚动事件没有做任何防抖或请求状态判断——当用户滚动到阈值时，scroll事件会被连续触发N次，直接导致同时发送多个一模一样的Ajax请求。这在Edge里会因为请求排队、重复渲染拖慢加载速度；Opera可能因为浏览器的请求限制或重复请求的冲突，直接阻塞了后续请求，看起来完全失效。刷新页面后这个问题会更突出，刚加载完就触发一堆请求，要么内容重复添加，要么浏览器资源被占满，最终功能“假失效”。

2. 缺少分页标识，后端无法返回新内容 #

你每次请求in.php都没传递分页参数（比如page=2、last_post_id=xxx），后端根本不知道要返回下一页的内容！第一次请求拿第一页数据，后续请求还是拿同样的内容，用户滚动后看不到新东西，自然觉得功能失效。刷新页面后这个逻辑依然存在，永远只加载重复的第一页内容。

3. DOM元素未就绪就执行代码 #

如果这段JS代码直接放在页面头部，没包裹在$(document).ready()或者DOMContentLoaded事件里，页面刷新时#infinite元素还没渲染出来，$("#infinite").append(cos)根本找不到目标元素，后续的内容添加完全失效，所有浏览器都会出现这个问题。

4. 原生Ajax的兼容性短板 #

你用了原生XMLHttpRequest，但不同浏览器对其事件的支持有差异（比如旧版Opera对onload的处理可能有bug）。jQuery本身有封装好的Ajax方法，兼容性更稳定，没必要自己写原生逻辑。

二、修复后的代码示例 #

这里给你调整后的代码，解决上述所有问题：

$(document).ready(function() {
    let isLoading = false; // 请求锁：避免重复发起请求
    let currentPage = 1; // 当前分页标识
    
    $(window).scroll(function() {
        // 双重判断：只有不在加载中，且滚动到阈值时才触发请求
        if (!isLoading && $(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            isLoading = true; // 标记为加载中，防止重复触发
            // 用jQuery的get方法，兼容性更好
            $.get(`in.php?page=${currentPage}`, function(response) {
                if (response.trim()) { // 判断是否有新内容返回
                    $("#infinite").append(response);
                    currentPage++; // 分页号+1，准备下一页请求
                } else {
                    // 没有更多内容时，可以给用户提示
                    $("#infinite").append("<p class='no-more'>已加载全部内容</p>");
                    // 解绑滚动事件，避免无效触发
                    $(window).off("scroll");
                }
                isLoading = false; // 请求完成后释放锁
            }).fail(function() {
                // 请求失败也要释放锁，不然后续无法触发加载
                isLoading = false;
                alert("加载失败，请稍后重试");
            });
        }
    });
});

对应的后端in.php需要接收page参数，根据页码返回对应内容，示例如下：

<?php
// 接收分页参数，默认第一页
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$perPage = 10; // 每页展示10条帖子
$offset = ($page - 1) * $perPage;

// 替换为你的数据库查询逻辑
// 示例：按发布时间倒序取对应分页的帖子
$query = "SELECT * FROM posts ORDER BY created_at DESC LIMIT $offset, $perPage";
// 执行查询、获取帖子数据...

$html = "";
if (!empty($posts)) {
    foreach ($posts as $post) {
        // 拼接帖子的HTML结构
        $html .= "<div class='post-item'>
                    <h3>{$post['title']}</h3>
                    <p>{$post['content']}</p>
                  </div>";
    }
}

echo $html;
?>

三、这个滚动加载方案是否适合社交媒体内容展示？ #

无限滚动（滚动加载）其实非常适合社交媒体的内容展示——它符合用户“刷内容”的行为习惯，不需要手动点击“下一页”，体验更流畅。但要注意几个优化点：

• 添加加载状态提示（比如滚动到底部时显示“加载中...”），让用户明确知道正在加载；
• 处理无更多内容的场景（比如显示“已加载全部”），避免用户无效滚动；
• 考虑性能优化：比如移除已出视口的旧内容，减少DOM节点数量，避免页面卡顿；
• 增加回到顶部按钮，方便用户快速返回页面顶部。

内容的提问来源于stack exchange，提问作者Wawi Sobota