25

I have a series of AJAX calls via jQuery. When an ajax call is being performed, there is no visual indication. Normally if you click a link or otherwise some non-ajax load the browser displays a little loading icon up in the tab.

Is there any way to tell the browser to display this little icon in the tab? (There are about 30 of these calls so I hope to avoid modifying each one).

P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348

5 Answers5

11

No, you can't tell the browser such a thing.

But you can do your own loading indicator. Include a hidden element in your markup, then use the ajaxStart and ajaxStop events to control its visibility:

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

ajaxStart is fired by jQuery when an ajax request is started when none others are running; ajaxStop is fired when an ajax request completes are there are no others running.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Royi Namir
  • 144,742
  • 138
  • 468
  • 792
10

No.

But you can modify the css of the cursor.

body {
   cursor:wait;
}
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • I've explored a cursor change, but in my research the solution comes with a set of problems. E.G. The loading icon is specific to elements on the page. So to do a full page loading I need to add a wrapper div around the body, but this can cause freaky click break issues with Firefox. If it comes down to it, I think I'd rather add a "loading..." popup. – P.Brian.Mackey Nov 15 '11 at 15:48
  • 1
    A great non-intrusive loading indicator! – R. de Ruijter Dec 21 '21 at 15:55
4

You absolutely can. See this post: Changing website favicon dynamically

Just create an animated icon of a loading graphic and change the icon to that while it's loading.

The problem will be that you don't have the exact same loading graphic as the particular browser uses, but I think the message will be effectively conveyed.

Community
  • 1
  • 1
Matt Stauffer
  • 2,706
  • 15
  • 20
  • 2
    Favicon is not the same thing. No two browsers handle this alike. Not even the same browsers/different versions. – Andrew Barber Nov 22 '11 at 23:41
  • 1
    @AndrewBarber Google's Chrome and Mozilla's Firefox are 2 different browsers, in fact, 2 very popular browsers, and they handle this pretty much the same way. :-) – hanshenrik Mar 22 '16 at 05:07
3

Before getting into any code or anything I just want to say that this is a ugly solution, but it did actually work for me.

What I did was putting a iframe on the site. Then I hide it with display: none in the css.

Then on every ajax call I reload the iframe with a new page. This causes the browser to display the loading in the tab bar.

I do know it's not a pretty solution and it has some flaws. Like you can't control the duration of the loading if the iframe happens to load faster than the ajax. But I'm just throwing it out there. Maybe someone else can build on the concept.

Filip
  • 2,514
  • 17
  • 28
  • 1
    This is not only ugly, it is a very bad idea; it will cause even more confusion (because it will *never* be accurate) and it causes needless bandwidth usage, browser memory usage, and server processing. – Andrew Barber Nov 22 '11 at 23:42
  • I agree with you. It's not a good idea, but it's an idea at least. – Filip Nov 23 '11 at 08:33
  • @AndrewBarber you can MAKE it accurate. have 1 forceLoadingBarIframe.php which basically does `$_SESSION['stop_loading']=false;while(!$_SESSION['stop_loading']){echo ' ';flush();sleep(1);}` , then a stopLoadingBarIframe.php which basically does `$_SESSION['stop_loading']=true;` - then fire a xhr request to stopLoadingBarIframe.php to stop the loading bar! with a fast connection, the loading bar should be just about 1 second off – hanshenrik Mar 22 '16 at 05:24
0

Here's an alternative.
Before making the call, you could show the image and then in the function (not after call) hide it again.

SuperBiasedMan
  • 9,814
  • 10
  • 45
  • 73
Mubasshir Pawle
  • 309
  • 1
  • 3
  • 19