Is JQUERY or JS any way to detect at any time when a window loads? In principle, any network activity?

Question

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

Answer 1

My answer is below and the previous answers of users are only trying to check, the browser is currently executing an XmlHttpRequest request (i.e. ajaxy). You asked if you could tell if the browser is making any kind of network request (i.e. loading images / css or maybe a long comet request). I don’t know any javascript API that would tell you this - they can exist, but I suspect that if they do, they will be browser specific [if anyone knows the answer to this chip in]. Obviously, tools like Firebug and dynaTrace can detect network activity, but I think this tool "connects" to the browser much deeper than javascript code.

Having said all this, if you want to read the XHR generated by jQuery, then the dave1010 answer seems good.

However, I think that he is subject to some problems of the race condition: -

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

Whenever an Ajax request is sent, jQuery checks for other outstanding Ajax requests. If none are running, jQuery fires an ajaxStart event. Any and all handlers registered in the .ajaxStart () method are executed at this time.

So, if XHR is started with a long start, and the other was started before the first one ended, the ajaxStart handler will be called only once. The second XHR can complete before the first and set loading = false , even if the first request is still running.

Looking at the source of jQuery 1.4 seems to confirm this. Interestingly, jQuery 1.4 has an active XHR account (jQuery.active), but this is not mentioned in the docs, and therefore it is probably best not to use it (which is very unfortunate because it will make life easier).

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

[I think] the global ajaxSend event handlers are called before each XHR. Using this in the "ajaxStart" preference should help, but we still need to consider the number of active requests, rather than a simple download flag.

Perhaps something like the following will work?

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

Keep in mind that this will give incorrect answers if any code calls $ .ajax with the global parameter set to false, and therefore it is hardly bulletproof;

Also keep in mind that activeXhrCount only considers XHRs generated by jQuery - those from other libraries that you can use will not be counted.

Answer 2

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

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

Read ajaxStart for more details.

Answer 3

I think you need to think about yourself, I did something similar earlier [for example, when gmail shows the download from above]

the idea is to create an array, then add / remove from it and keep checking it to see 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);