如何为jQuery .load()绑定的下拉框添加预加载器（preloader）

你的预加载器失效主要有两个核心原因：

1. 调用$(".showpost").load()时，会直接替换该容器内的所有内容（包括预加载器main_loader），导致第一次加载后预加载器就被移除，后续切换选项时没有元素可显示。
2. 没有在加载开始时触发预加载器的显示逻辑，也未将隐藏逻辑绑定到load()的完成回调中。

根据你的需求，提供两种可行的实现方式：

方式一：预加载器独立于内容容器（推荐） #

这种方式避免预加载器被加载操作替换，可靠性更高：

调整HTML结构 #

<!-- 预加载器初始隐藏，可通过CSS设置定位覆盖在内容容器上方 -->
<div class="main_loader" style="display:none; position: relative; width: 100%; height: 200px; background: #f5f5f5;">
  <div class="my_loader" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <!-- 这里放置你的加载动画样式 -->
  </div>
</div>
<div class="showpost"></div>

修改JS代码 #

$("#myselect").change(function(){
  const $loader = $(".main_loader");
  const $showpost = $(".showpost");
  
  // 加载开始：显示预加载器，清空原有内容
  $loader.fadeIn(200);
  $showpost.empty();
  
  // 执行内容加载
  $showpost.load(`${mysite_url_to_post} .posts_container`, function(response, status, xhr) {
    // 加载完成：隐藏预加载器
    $loader.fadeOut(500);
    
    // 可选：处理加载失败的情况
    if (status === "error") {
      $showpost.html(`<p>加载失败：${xhr.status} ${xhr.statusText}</p>`);
    }
  });
});

方式二：预加载器作为内容容器的子元素（动态重建） #

如果要保留原HTML结构，需要在每次加载前重新插入预加载器：

修改JS代码 #

$("#myselect").change(function(){
  const $showpost = $(".showpost");
  
  // 加载开始：清空内容，插入预加载器并显示
  $showpost.html(`
    <div class="main_loader">
      <div class="my_loader"></div>
    </div>
  `);
  
  // 执行内容加载
  $showpost.load(`${mysite_url_to_post} .posts_container`, function(response, status, xhr) {
    // 加载完成：处理失败情况（load会自动替换容器内容）
    if (status === "error") {
      $showpost.html(`<p>加载失败，请重试</p>`);
    }
  });
});

补充说明 #

• 注意load()的语法：$(selector).load(URL, data, callback)，URL后的空格加选择器是用来筛选加载页面中的指定元素，确保路径和选择器书写正确。
• 可以通过CSS给main_loader添加加载动画（比如旋转圆圈），进一步提升用户体验。

内容的提问来源于stack exchange，提问作者kate elly