jquery - 在 Safari 中提交表单时加载 GIF 会停止动画

Question

看看这个简单的 JSFiddle (忽略所有的 javascript 代码，这里的这个问题只是关于动画加载 GIF)。

我想在提交表单之前显示动画加载 GIF。

我试过这个:

setTimeout(function(){
 $('form[name="checkout-form"]').submit();
},1000);

这工作正常，动画加载 GIF 出现 1 秒，但是，一旦发送提交请求，它就会停止动画。

我该怎么做才能让 GIF 动画直到页面再次加载(或直到响应从页面返回？)

Answer 1

您需要对表单进行 AJAX。
当您提交表单时，页面和动画将被卸载。

所以试试

$(function() {
  $('form[name="checkout-form"]').on("submit",function(e) {
    e.preventDefault(); // stop the actual submission
    $("#animationgif").attr("src","submitting.gif?rnd="+new Date().getTime()).show();    
    $.post(this.action,$(this).serialize(),function() {
      $("#animationgif").attr("src","blank.gif").hide();    
    });
  });
});

?rnd="+new Date().getTime()是为了确保它从头开始，如果它是一个循环的ajax throbber 可以删除