表单提交后Loading动画无法隐藏的技术问题求助

嘿，我来帮你搞定这个问题～先给你理清楚根源，再给你几个可行的解决方案：

问题根源 #

你原来的$(window).load(function(){ $('#loading').hide(); })是在当前页面所有资源（包括那张loading.gif）加载完成后隐藏动画，但通过gotopage函数提交表单时，浏览器会发起同步POST请求并跳转到index.php页面——这时候原来页面的JS代码就停止执行了，而如果新跳转的index.php页面里也有#loading元素，但没加对应的隐藏代码，或者代码执行有问题，自然就会出现loading一直显示的情况。

具体解决方案 #

1. 给目标页面（index.php）加上隐藏代码

如果index.php页面也包含#loading元素，一定要在该页面里也加入隐藏loading的JS代码。建议把这段代码抽离到公共的JS文件里，所有需要loading的页面都引入这个文件，省得重复写：

// 注意：jQuery 3.0+已经废弃了$(window).load()，用这个兼容写法
$(window).on('load', function() {
  $('#loading').hide();
});

2. 确保代码能找到#loading元素

如果你的JS代码放在页面头部，可能会出现DOM还没加载完就执行代码的情况，这时候$('#loading')会找不到元素，自然没法隐藏。解决办法有两个：

• 把代码放在$(document).ready()里，确保DOM加载完成后再监听load事件：

  $(document).ready(function() {
    $(window).on('load', function() {
      $('#loading').hide();
    });
  });
  

• 直接把脚本标签放到</body>标签的前面，这样页面元素都加载完了再执行JS：

  <body>
    <!-- 页面所有内容 -->
    <div id="loading"> <img src="images/loading.gif" alt="loading..."/> </div>
    
    <!-- 先引入jQuery，再写自己的代码 -->
    <script src="jquery.min.js"></script>
    <script>
      $(window).on('load', function() {
        $('#loading').hide();
      });
    </script>
  </body>
  

3. 如果不想页面跳转（异步提交表单）

要是你本来就不想让页面跳转，只是想提交数据，那可以把gotopage改成用jQuery的$.ajax异步提交，这样就能完全控制loading的显示和隐藏了：

function gotopage(destpage) {
  // 提交前先显示loading
  $('#loading').show();
  
  $.ajax({
    url: 'index.php',
    method: 'POST',
    // 这里可以加你要提交的表单数据，比如 data: { username: 'xxx', password: 'xxx' },
    success: function(response) {
      // 提交成功后做你想做的事，比如更新页面内容
      // 最后隐藏loading
      $('#loading').hide();
    },
    error: function() {
      // 提交出错也要记得隐藏loading哦
      $('#loading').hide();
      alert('提交失败啦，请重试～');
    }
  });
}

额外检查项 #

• 确认index.php页面里正确引入了jQuery库，不然$函数会报错，代码根本跑不起来；
• 检查#loading元素的ID拼写有没有错（ID是区分大小写的哦）。

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