Question

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

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

我试过了：

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

这样可以正常工作，动画加载GIF会显示1秒钟，但是一旦发送提交请求就会停止动画。

我需要做些什么才能让GIF动画直到页面再次加载（或直到响应从页面返回？）

Answer 1

你需要AJAX表格。提交表单时，将卸载页面和动画。

所以试试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

$(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(); }); }); });是为了确保它从头开始，如果它是一个循环的ajax throbber则可以删除

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

1 个答案: