4 Replies - 2096 Views - Last Post: 15 February 2014 - 03:55 PM

#1 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 817
  • Joined: 16-September 09

Only load wait image if content is still loading?

Posted 29 January 2014 - 06:15 PM

Hi Guys,

I'm playing with a crazy idea. I have a lot of ajax built in to my site and some of it takes some time to load. I've looked a little bit but I haven't really returned much. If I want to ajax my content (via jQuery) and only load the wait GIF if the content take longer than "X" amount of time, is there a way to do this? I've played with some different functions but haven't come back with too much.

Just looking to get pointed in the right direction.

As always, thanks in advance!!

Is This A Good Question/Topic? 0
  • +

Replies To: Only load wait image if content is still loading?

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3609
  • View blog
  • Posts: 12,419
  • Joined: 12-December 12

Re: Only load wait image if content is still loading?

Posted 29 January 2014 - 06:44 PM

When the ajax request is made you can display the wait-gif. When the request succeeds, or fails, you can remove the gif.

When the request is made then, as well as displaying the gif, you could also use setTimeout to run some code that removes it, after a suitable interval.




Sorry, to answer your specific requirement, when the request is made you can use setTimeout to display the gif. The code that shows the gif might also set another timeout to remove it, as well as removing it on success or failure. (I assumed above that you wanted to show the gif straight-away, as it is more common to do this.)

This post has been edited by andrewsw: 29 January 2014 - 06:51 PM

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 429
  • View blog
  • Posts: 1,569
  • Joined: 15-January 14

Re: Only load wait image if content is still loading?

Posted 30 January 2014 - 09:44 AM

If you only want the loading image to show up after a certain number of seconds then you'll need to set up some sort of polling. That means that you'll need some global variables to indicate whether anything is loading. One way to do that might be to set up an object where you can set various properties to indicate if things are loading. Doing that, when you're sending an ajax request to load something then you'll first need to set a property in that global object to indicate that particular content is loading, e.g.:

loading_flags.home_content = true;

Each thing that loads would need to use a unique property name. In the loading callback you would reset that property to false. Then your polling system would need to periodically loop through all properties of the object and check if any of them are set to true, meaning that it's still loading. To handle the time issue you would need another global to keep track if the first time that the poller found something loading, so that it can show the loading message after X seconds. And each time it found a property that was false, it would need to reset the last time for that property. As it's polling everything, if it finds something that is loading and the first time it saw it loading was X seconds ago, then it would show the loading image. Whenever it polls and finds nothing loading it would have to hide the loading image if it's visible. It sounds like a lot of work to implement a delayed loading image.

This post has been edited by ArtificialSoldier: 30 January 2014 - 09:44 AM

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,886
  • Joined: 30-April 10

Re: Only load wait image if content is still loading?

Posted 30 January 2014 - 10:07 AM

You may want to look into using $.ajaxStart() and $.ajaxStop()

These will tell you when the first ajax call is started and when ajax calls are done. This would be good for your timing events.

Set the timer to start after x amout of time if ajaxStop has not yet fired. Then when ajaxStop fires remove the GIF image and load content.

Or just do it the conventional way and just load the GIF up front and remove/hide it when ajax is done.

This post has been edited by laytonsdad: 30 January 2014 - 10:08 AM

Was This Post Helpful? 1
  • +
  • -

#5 guyfromri  Icon User is offline

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 817
  • Joined: 16-September 09

Re: Only load wait image if content is still loading?

Posted 15 February 2014 - 03:55 PM

View Postlaytonsdad, on 30 January 2014 - 12:07 PM, said:

You may want to look into using $.ajaxStart() and $.ajaxStop()

These will tell you when the first ajax call is started and when ajax calls are done. This would be good for your timing events.

Set the timer to start after x amout of time if ajaxStop has not yet fired. Then when ajaxStop fires remove the GIF image and load content.

Or just do it the conventional way and just load the GIF up front and remove/hide it when ajax is done.


Absolutely 100% what I was on the market for. Thanks very much!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1