如何在jQuery .load()点击事件中添加预加载器并控制显隐

Hey，我来帮你搞定这个预加载器的需求！你的现有代码已经能正常实现分页加载和历史记录更新，只需要添加几个关键步骤就能实现预加载器的显示和自动隐藏，具体如下：

1. 先准备预加载器的HTML和样式 #

首先你需要在页面里加一个预加载器的元素，以及对应的CSS样式，让它默认隐藏，需要时再显示：

HTML 结构 #

把这个元素放在页面合适的位置（比如内容容器内部或者页面全局）：

<div class="loader">正在加载中...</div>

CSS 样式 #

这里给你一个基础的居中样式，你可以根据自己的页面设计调整（比如改成加载动画图标）：

/* 预加载器基础样式 */
.loader {
    display: none; /* 默认隐藏 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000; /* 确保在内容上方 */
}

/* 给内容容器加相对定位，让预加载器相对于它居中 */
.preloadswitch {
    position: relative;
    min-height: 200px; /* 避免容器高度塌陷，确保预加载器能正常显示 */
}

2. 修改你的jQuery代码 #

核心逻辑是：点击分页链接时立刻显示预加载器，然后利用.load()的回调函数，在内容加载完成（无论成功或失败）后隐藏预加载器。

修改后的完整代码如下：

jQuery(document).on('click','#Pagination a', function(e){
    e.preventDefault();
    const link = jQuery(this).attr('href');
    
    // 第一步：点击后立即显示预加载器
    jQuery('.loader').show();

    // 更新浏览器历史记录（这部分你原来的代码没问题）
    window.history.pushState('obj', 'newtitle', link);
    
    // 第二步：执行加载，并用回调函数处理加载完成后的逻辑
    jQuery('.preloadswitch')
        .load(`${link} .the-categories`, function(response, status, xhr) {
            // 不管加载成功还是失败，先隐藏预加载器
            jQuery('.loader').hide();
            
            if (status === "success") {
                // 加载成功时，让新内容淡入显示
                jQuery(this).fadeIn('slow');
            } else {
                // 可选：加载失败时给用户提示（可以根据需求调整）
                jQuery(this).html('<p>加载失败，请稍后重试或检查链接</p>');
            }
        });
});

关键细节说明 #

• 显示时机：一定要在调用.load()之前就显示预加载器，这样用户点击后能立刻得到反馈，不会觉得页面没反应。
• 回调函数的作用：.load()的第三个参数是回调函数，它会在请求完全结束（包括成功和失败）时触发，所以在这里隐藏预加载器能避免出现加载器一直显示的情况。
• 错误处理：添加了状态判断，当加载失败时给用户提示，这是提升用户体验的小细节，你可以根据自己的需求调整提示内容。

如果你的预加载器是全屏覆盖式的，只需要调整CSS的定位为fixed，并设置宽高为100%即可，核心逻辑完全一致。

内容的提问来源于stack exchange，提问作者Francis Alvin Tan