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

问题描述

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

Check out this simple JSFiddle (ignore all the javascript code, this question here is only about the animated loading GIF).

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

I want to show the animated loading GIF before a form gets submitted.

我尝试过:

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

这很好，动画加载的GIF会显示1秒钟，但是，一旦发送了提交请求，它就会停止动画.

And this works fine, the animated loading GIF appears for 1 second, however, it stops the animation as soon as the submit request has been sent.

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

What do I have to do in order to let the GIF animated until the page loads again (or until the response comes back from the page?)

推荐答案

您需要AJAX表单.提交表单时，页面和动画将被卸载.

You need to AJAX the form.When you submit the form, the page and animations are unloaded.

所以尝试

$(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跳动者，则可以将其删除

The ?rnd="+new Date().getTime() is to make sure it starts from the beginning and can be removed if it is a looping ajax throbber

这篇关于在Safari中提交表单时，加载GIF会停止动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！