jQuery中Loader GIF无法正常显示及旋转问题求助

我来帮你一步步解决这个加载器不旋转、提前隐藏的问题，咱们从几个关键环节入手：

1. 先解决加载器不旋转的问题：检查GIF路径 #

你的加载器GIF路径是../../assets/images/icons/loader.gif，这个相对路径很可能和当前页面的位置不匹配，导致图片根本没加载出来，自然不会旋转。

• 打开浏览器开发者工具（按F12），切换到Network标签，刷新页面，搜索loader.gif，看看请求状态是不是404（找不到资源）。
• 把路径改成绝对路径更稳妥，比如/assets/images/icons/loader.gif（假设你的项目根目录下有这个文件夹结构），确保图片能正常加载。

2. 修正加载器的初始样式与定位 #

当前的#wait元素样式有两个小问题：

• 定位只设置了top:50%;left:50%，这会让加载器的左上角在屏幕中心，看起来不是真正居中，加上transform:translate(-50%,-50%)就能让它完美居中。
• 初始状态没有设置display:none，如果页面加载时没有ajax请求，加载器会一直显示；而如果ajax请求触发太快，就会出现“刚显示就隐藏”的错觉。

修改后的HTML代码：

<div id="wait" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:2px;display:none;">
  <img src='/assets/images/icons/loader.gif'/>
</div>

3. 确保jQuery代码在DOM加载完成后执行 #

你的jQuery代码如果直接写在页面里，可能会在#wait和#VivaData元素还没被浏览器渲染出来时就执行，导致选择器找不到元素，事件绑定失败。把代码包裹在$(document).ready()里，确保DOM就绪后再执行：

$(document).ready(function() {
  // 绑定ajax开始事件
  $(document).ajaxStart(function(){ 
    console.log('start ajax'); 
    $("#wait").show(); // 用show()比手动设置display更简洁可靠
  }); 

  // 绑定ajax完成事件
  $(document).ajaxComplete(function(){ 
    console.log('ajax complete'); 
    $("#wait").hide(); // 同理用hide()
  }); 

  // 发起加载请求
  $("#VivaData").load("demo_ajax_load.asp");
});

4. 避免缓存导致ajax事件不触发 #

如果浏览器缓存了demo_ajax_load.asp的响应，jQuery的load方法可能会直接读取缓存，不会触发ajaxStart和ajaxComplete事件。可以给请求URL加个随机参数禁用缓存：

$("#VivaData").load("demo_ajax_load.asp?" + new Date().getTime());

这样每次请求的URL都不一样，浏览器就不会用缓存了。

5. 验证事件是否正常触发 #

打开浏览器控制台（F12），查看是否输出了start ajax和ajax complete这两行日志：

• 如果没有start ajax：说明ajaxStart事件没触发，可能是事件绑定失败，或者请求没有被识别为ajax请求（可以换成$.get方法测试一下）。
• 如果两行日志几乎同时出现：说明请求太快，加载器显示时间太短，看起来像是没显示。可以在服务器端加个延迟（比如ASP里用Sleep(1000)让响应慢1秒），测试加载器的旋转效果。

按照上面的步骤逐一排查，应该就能解决你的问题啦～

内容的提问来源于stack exchange，提问作者Dip Girase