How to know if all is loaded on the page?

Question

I am building a page with lots of ajax calls and creating the DOM dynamically. What is the best way to get to know whether all the ajax call is made and all the DOM element is finished building ?! I tried following prototype.js event observer :

Event.observe(window, 'load', function () {
 alert("Loaded!");
});

But it seems after the alert fired some elements are still being loaded. I am trying this on IE.

The window onload event fires when all of the page has loaded, that is, when the HTTP request and all of the files (ex. images) have been downloaded. Any AJAX request made afterwards doesn't affect the firing of the onload event. You should probably handle each onload event for each AJAX request and do something when all have fired. — JCOC611, Jan 29 '13 at 01:39
Having a page with a lot of asynchronous processes you might consider using a mediator pattern. http://stackoverflow.com/questions/14440809/good-pattern-to-use-for-multiple-xmlhttprequests-used-by-different-processes — HMR, Jan 29 '13 at 01:59

score 0 · Answer 1 · answered Jan 29 '13 at 01:40

You need to respond to the ajax calls completing by adding code to their success (or complete) handlers.

For example, let's assume you're making three ajax calls to populate the DOM. After each ajax call, increment some global counter by 1, then call a function that checks if the counter is three (meaning all of the ajax calls are finished). If it is, you would run your alert('Loaded!');.

This is easier to do with $.Deferred() objects, if you are using jQuery for your ajax calls.

Coin_op · Answer 2 · 2013-01-29T01:49:05.073

If you have lots of ajax calls returning elements on your page then the only way to know when they have all finished is to keep track of them and use their callbacks to work out when its all loaded. The load or ready events on the page are only concerned with resources loaded through the html and not loaded via asynchronous requests. Asynchronous being the key bit here.

If I were you I would have two global variables: totalNumberOfCalls & finishedCalls

At the start of my page I would set totalNumberOfCalls to the correct number, then on each callback I would have a small bit of code similar to this:

if (++finishedCalls == totalNumberOfCalls) console.log('Page Loaded');
else console.log( (finishedCalls / totalNumberOfCalls) * 100 + '% loaded');

This way you can easily add a simple counter to work out the progress.

If you are loading images and other external elements then it might be worth doing the counting on the load events of the returned elements so you get the actual finished loading time and not time when the request has returned but not any associated resources.

If this all seems a little too much, then just make the ajax calls synchronous instead, that way you page will stall while the calls are going on. This is not good practice though.

score 0 · Answer 3 · answered Jan 29 '13 at 16:36

You need to look into Ajax.Responders http://api.prototypejs.org/ajax/Ajax/Responders/

This will register a global event callback for a given event

Also Ajax.activeRequestCount will tell you how many active calls are running

var callback = {
  onComplete: function() {
    if(Ajax.activeRequestCount === 0){
        //all ajax calls are finished

        //If you only want to run this once make sure you unregister the event handlers
        Ajax.Responders.unregister(callback);
    }
  }
};
Ajax.Responders.register(callback);

How to know if all is loaded on the page?

3 Answers3