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

看看这个简单的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就可以被删除