Page Loading Status

Is there any way to know how far browser loaded the page? Either by using JavaScript or browser native functions. Based on the page status i want to build progress bar.

Solution 1:

I'm not 100% sure this will work, but.. here is the theory:

First of all, don't stop JavaScript running until the page has loaded. Meaning, don't use window.ready document.ready etc..

At the top of the page initialise a JavaScript variable called loaded or something and set it to 0.

var loaded = 0;

Throughout the page increment loaded at different points that you consider to be at the correct percentages.

For example, after you think half the page would have been loaded in the code set loaded = 50;.

Etc..

As I say, this is just a concept.

Solution 2:

Code:

functionrequest() {
    showLoading(); //calls a function which displays the loading message

    myRequest = GetXmlHttpObject();
    url = 'path/to/script.php';
    myRequest.open('GET',url,true);
    myRequest.onreadystatechange = function() {
        if(myRequest.readyState == 4 && myRequest.status == 200) {
            clearLoading(); //calls a function which removes the loading message//show the response by, e.g. populating a div//with the response received from the server
        }
    }
    myRequest.send(null);
}

At the beginning of the request I call showLoading() which uses Javascript to dynamically add the equivalent of your preLoaderDiv. Then, when the response is received, I call clearLoading() which dynamically removes the equivalent of your preLoaderDiv.

Solution 3:

You'll have to determine it yourself, and to do that you'll have to have a way to determine it. One possibility is to have dummy elements along the page, know their total, and at each point count how many are already present. But that will only give you the amount of DOM obtained, and that can be a very small part of the load time - most often than not, the browser is idle waiting for scripts and images.