Get the percentage of the page load using javascript?

Question

Hi guys,

I'm writing an iphone application and need to show a progress bar that shows the loading progress of a web page. I want to insert a JS function to this page and once I call it, it will give me the load progress (how much bytes have been loaded and the total size). Is this possible?

Thanks

Answer 1

I don't think it is possible using Javascript, and unless the page is VERY big, I don't see why you'd need this. If you have lots of images on the page, this may be possible to tell how many of them are fully loaded.

Edit: I found this, that looks like want you want to do.

Edit 2 : And this answer on SO.

Answer 2

No, it's not possible. You can emulate it by breaking up your page to small pieces and load it one by one with ajax requests but I don't think it is worth the trouble.

Another idea is to put little pieces of script like

<script>percentage += 10; updateProgressBar();</script>

through your page. That script will be executed the second browser loads (or parses) it so you will be able to estimate the progress.

Answer 3

How do you know what percentage of the HTML is loaded by Safari? Javascript from what I know of 1.7 can never be aware of that. If it did you would have far more sophisticated loaders for Gmail and the wealth of Google apps. You can do very crude estimations by injecting scripts and elements into the DOM programatically but it's a lot of effort for not much gain.

The best you can hope for is an animated GIF that runs for how long you'd estimate the page to load in a worst case scenario. Or the easier solution is to just use a throbber, hour glass or barber's pole.