4

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

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

I tried this:

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

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.

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?)

semirturgay
  • 4,151
  • 3
  • 30
  • 50
basZero
  • 4,129
  • 9
  • 51
  • 89
  • I had similar issues with Mobile Safari. The solution was to provide loading indicator as data-uri, base64 background-image. See: https://css-tricks.com/data-uris/ for details. – Samuli Hakoniemi Oct 02 '15 at 09:37

1 Answers1

1

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

So try

$(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();    
    });
  });
});

The ?rnd="+new Date().getTime() is a tactic called cache busting, which will make sure it starts from the beginning.
It can be removed if it is a looping ajax throbber.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Thanks, I'll give it a try... Is this bullet proof in the sense of compatibility to Safari/Firefox/Chrome/IE ? – basZero Oct 02 '15 at 13:12
  • I would assume so. You MAY need to add a ?rnd="+new Date().getTime() to make the animation play in IE – mplungjan Oct 02 '15 at 13:35
  • @basZero: did this work for you? I'm finding myself in a similar predicament, and almost all options are/have run out – Hassan Baig Aug 01 '17 at 11:52
  • @HassanBaig : in my first test it didn't work, to be more concrete, my textarea fields did not serialize correctly (special characters got lost), so this is still open and unanswered for me! – basZero Aug 02 '17 at 08:23