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

Question

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

5

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

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

我尝试了这个：

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

这段代码运行良好，当提交请求后，动画加载GIF会出现1秒钟，但它会在请求发送完毕后停止。

那么我该怎么做才能让GIF在页面重新加载（或直到从页面接收到响应）之前继续播放动画呢？

- basZero

我在移动版Safari上也遇到了类似的问题。解决方法是将加载指示器作为data-uri，base64背景图像提供。详情请参见：https://css-tricks.com/data-uris/。 - Samuli Hakoniemi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

你需要使用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加载指示器，则可以将其删除。

"