使用jQuery getJSON时加载GIF无法显示的问题求助

你遇到的问题主要有两个原因，咱们一步步来解决：

1. 选择器不匹配 #

你的HTML里给加载容器加的是class="loader"，但JS里用的是$("#loader")（按ID选择），同时CSS里也是针对#loader（ID选择器）的。这就导致JS找不到对应的元素，show()和hide()自然没效果。

先把HTML里的div改成用ID：

<div id="loader" style="display:none;">
  <img src="~/Images/loadingAnim.gif" width="208" height="13"/>
</div>

2. 异步操作的顺序问题 #

$.getJSON是异步请求，它不会阻塞后续代码执行。你现在的代码是：显示加载 → 发起请求 → 立刻隐藏加载。这时候请求还在后台跑，加载GIF刚显示就被隐藏了，所以你看不到它。

正确的做法是：把隐藏加载的代码放到getJSON的回调函数里，等请求成功完成后再执行隐藏操作。如果还要处理请求失败的情况，也可以在fail()回调里隐藏加载，避免加载动画一直显示。

修正后的JS代码：

$(document).ready(function () {
  $("#ID").change(function () {
    // 先显示加载动画
    $("#loader").show();
    
    $.getJSON(url, { /* 你的参数 */ })
      .done(function(data) {
        // 请求成功后的逻辑，比如处理返回的数据
        // ...
        
        // 数据处理完后隐藏加载动画
        $("#loader").hide();
      })
      .fail(function() {
        // 请求失败时也要隐藏加载动画，避免一直转
        $("#loader").hide();
        // 可以加个错误提示
        alert("请求失败，请稍后重试");
      });
  });
});

这样调整后，当下拉框变化时，会先显示加载GIF，等请求完成（不管成功还是失败）再隐藏它，你就能看到加载动画了。

内容的提问来源于stack exchange，提问作者Bouros Ioannis