JQUERY or JS is there a way to detect anytime the Window is loading? Basically any network activity?

Question

Is there a way with JQUERY or Javascript, to detect anytime the browser window is loading something, making an ajax call, loading an image, etc... Basically any network activity?

Answer 1

i think you have to build some think by your self, i did something like this before [ like when gmail shows loading upper there ]

the idea is about making an array then add/remove from it and keep checking it for know if there is an open connection

the code should look like this

var liveAjax = [];

//making ajax call
liveAjax[liveAjax.length] = true;
$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    liveAjax[liveAjax.length] = false;
    or delete liveAjax[liveAjax.length]
  }
});


then checking the alive calls by
setInterval(function(){
//looping in liveAjax  and check if there any true value, then there is ajax call elese nothing happens
},200);

Answer 2

Something along the lines of this jQuery (put in the HEAD) should work.

var loading = true;

$(window).load(function () {
   loading = false;
}).ajaxStart(function () {
   loading = true;
}).ajaxComplete(function () {
   loading = false;
});

Read up on ajaxStart for more details.

Answer 3

My answer below and the previous users' answers are only attempting to check if the browser is currently making an XmlHttpRequest (i.e. ajaxy) request. You asked if you could tell if the browser was making any network request (i.e. downloading images/css or perhaps a long running 'comet' request). I don't know of any javascript API that would tell you this - they may exist but I suspect that if they do then they would be browser specific [if anyone out there knows the answer to this please chip in]. Obviously tools like Firebug and dynaTrace can detect network activity but I think these tool "hook in" to the browser a lot deeper down than javascript code.

Having said all that, if you want to count XHRs spawned by jQuery then dave1010's answer seems like a good one.

However I think it is prone to some race condition problems : -

According to the docs (http://api.jquery.com/ajaxStart/)

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

So if a long running XHR was started and another one was started before the first had completed, the ajaxStart handler would only be called once. The 2nd XHR could complete before the first one and set loading = false, even though the first request is still in progress.

Looking at the jQuery 1.4 source seems to confirm this. Interestingly, jQuery 1.4 has a count of active XHRs (jQuery.active) but this is not mentioned in the docs and so it is probably best not to use it (which is a pity because it would make life a bit easier).

See http://gist.github.com/277432#LID5052 for the code that checks to see that $.active is 0 before invoking ajaxStart handlers.

[I think] The 'ajaxSend' global event handlers are called before each and every XHR. Using this in preference to 'ajaxStart' should help but we will still need to keep a count of active requests as opposed to a simple "loading" flag.

Perhaps something like the following will work?

var activeXhrCount = 0;
$(document).ajaxSend(function() {activeXhrCount++;}).ajaxComplete(function(){activeXhrCount--;});

Be aware that this will give incorrect answers if any code calls $.ajax with the global option set to false and so is hardly bullet proof;

Also keep in mind that activeXhrCount only counts XHRs spawned by jQuery - those from other libraries that you may utilize will not be counted.