5

How can I check the window load progress? I know there is a jquery event for when the page fully loads but I also want to be able to track the percentage of its load progress.

Something like (just pseudocode)

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

and this will get the progress of the page load and change the progress bar accordingly.

Is this possible?

j08691
  • 204,283
  • 31
  • 260
  • 272
omega
  • 40,311
  • 81
  • 251
  • 474
  • Why not use a simple preloader gif? Unless the page takes a looooong time to load the hasle of percentage based preload is not worth it. In that case you can use http://jqueryui.com/demos/progressbar/ and bake something with it – elclanrs Sep 07 '12 at 20:02
  • 3
    I think any page that has to have a loading bar is taking too long. Especially with the concept of instant gratification nowadays. People don't want to have to wait at all, and almost never have to on the web. – Jon Egeland Sep 07 '12 at 20:02
  • 1
    What exactly is making the page to take so long to load? Images, background process? – Hanlet Escaño Sep 07 '12 at 20:05

2 Answers2

1

To see how much of the DOM is loaded, you can strategically check for the existence elements on the page. The following post is a good reference for doing so, but simply having an array of the IDs of the elements you want to check and then using setTimeout() to call an update function every 200ms or something should allow you to see what has been loaded and update your progress bar accordingly.

How to check if element exists in the visible DOM?

Community
  • 1
  • 1
TMan
  • 1,775
  • 1
  • 14
  • 26
0

As Hanlet mentioned, there are some commom scenarios that this can be used:

  1. You have a website and your page has a lot of images;
  2. You have a web app and your page has a lot of processes or ajax requests; or
  3. Both.

For number 1, I've seen people using image pre-loaders with two major benefits, first is that when page loads, all the images will just be there, and second is that images are usually the heavier part of a page load, so a basic percentage calculation on these would almost illustrate it. A simple javascript image pre-loader algorithm would loop through every img tag that are on the document and create an Image object, setting its src atribute before inserting it on the page.

For number 2, I would make a observer-like Progress object like this:

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 should register it in the progress bar with the Progress.addProcess('myprocessname'); and call Progress.setCompleted('myprocessname'); when it finishes.

For number 3, I would try some way to know all the page's requests (including images, ajax data requests, external javascript calls, and the other processes), and mix it with the Progress object solution in number 2, but I never tried this one.

ViniciusPires
  • 983
  • 3
  • 12
  • 26
  • To add up, keep in mind that most of time, **the progress is a lie**. – ViniciusPires Oct 03 '13 at 14:19
  • Also, instead of making the percentage calculation, you should try the HTML5 `progress` tag. Setting the `max` attribute with the length of `Progress.processes` and the `value` attribute with the number of processes completed, would result in the same result (or even better). – ViniciusPires Oct 03 '13 at 14:58