在 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，则可以将其删除。