0

I have multiples Synchronous AJAX requests and it takes 3 seconds to load my page .

What i want to do is to display a loading page ( with a gif ) and when the page is loaded like when the Ajax requests are completed it fades out.

I followed an example from smallenvelop.com but the gif image looks freezed and just until the end that it displays the animation . how can i overcome this ? like even if the synchronous ajax requests are running my page can display the animation ?

azelix
  • 1,207
  • 1
  • 19
  • 40
  • possible duplicate of [How to show loading spinner in jQuery?](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) – jmgross Apr 27 '15 at 14:43
  • A gif should 'play' during a synchronous ajax request (iirc).. Can you post some of your code? Any reason you're using synchronous instead of async? – Charlie Wynn Apr 27 '15 at 14:45
  • 1
    Use async requests. You'll run into trouble in other places if you try to make sync requests work. – ssube Apr 27 '15 at 14:52
  • Synchronous load at page load time is usually by design to capture a visitor's stop at the site, even if they attempt to unload the site before loading has finished. The very nature of the operation limits you as the developer as well. Another case is some situation where a coder wants to limit the number of concurrent socket connections from any one client and so uses synchronous calls. IN the latter, you can do this using async and successive calls. If you want the synchronous code to remain intact you can use a webworker to move it off the main thread. But that's just getting odd. – Radio Apr 27 '15 at 14:56
  • 1
    @CharlieWynn: A gif should freeze during a synchronous ajax call iirc. That is because a synchronous ajax call never enters the event loop and therefore the page never gets repainted and therefore all animations can't happen (even a gif) – slebetman Apr 27 '15 at 15:24
  • @slebetman Thanks! Good to know. I was thinking a straight up gif in an img tag would just get rendered by the browser before any javascript got executed. – Charlie Wynn Apr 27 '15 at 15:34

1 Answers1

3

When running a synchronous ajax request, the thread of the browser tab is doing just that: handling the request. That's the point of a synchronous request. It's also why the animation is frozen until the ajax request is finished.

Use asynchronous ajax requests.

Florian Margaine
  • 50,873
  • 14
  • 87
  • 110
  • Yes, that's what i did, and it works fine, the animation is smooth but i have encountered another problem related to asynchronous ajax request; i'll ask another question about it. Thanks. – azelix Apr 28 '15 at 08:49