How to check pageload progress?

Question

How to check window loading progress? I know there is a jquery event when the page loads completely, but I also want to track the percentage of its loading.

Something like (just pseudo code)

$(window).load_change(function(){ set_progress_bar(window.load_percentage); }); 

and this will ensure page loading progress and accordingly change the progress bar.

Is it possible?

Answer 1

To find out how many of the DOM are loaded, you can strategically check for elements on the page. The following entry is a good reference for this, but just having an array of identifiers of the elements you want to check, and then using setTimeout() call the update function every 200 ms or something should let you see what has been loaded and update your indicator accordingly fulfillment.

How to check if an element exists in the visible DOM?

Answer 2

As Hanlet mentioned, there are several combo scripts you can use:

• You have a website and there are many images on your page;
• You have a web application and there are many processes or ajax requests on your page; or
• AND.

For number 1, I saw people using image preloaders with two main advantages: firstly, when loading a page, all images will be , and secondly, that images are usually the heavier part of page loading, so the basic percentage calculation on them almost illustrates this is. A simple javascript image preview algorithm will go through each img tag that is in the document and create an Image object by setting its src attribute before embedding it on the page.

For number 2, I would make an object that looks like an observer, as follows:

 var Progress = { processes:{}, // Adds a process to keep track on addProcess:function(name){ this.processes[name] = false; // false for non-completed }, // Sets a process as completed, calls redrawProgress setCompleted:function(name){ this.processes[name] = true; this.redrawProgress(); }, redrawProgress:function(){ /* Updates the progress bar */ } }; 

And then inside each process you have to register it in the execution line with Progress.addProcess('myprocessname'); and call Progress.setCompleted('myprocessname'); when he is done.

For number 3, I would try to find out all the requests for the page (including images, ajax data requests, external javascript calls and other processes) and mix them with the solution of the Progress object in number 2, but I never tried this one.