Best way to make loading progress bar?

[Web Interface Tricks]

Hi, I've made a crude progress bar that works by checking
document.documentElement.innerHTML.length periodically throughout the
file, and updating the width of div according to the proportion of the
total size that's loaded.The code is like this:

======================================
<script>

var document_size = 334315;

function update_progress()
{
var progress_box = document.getElementById("progress_bar");
var current_size = document.documentElement.innerHTML.length;
var current_percent = Math.ceil((current_size / document_size)
* 100);

// different browsers measure the size differently, so limit
to 100%
current_percent = Math.min(100, current_percent);
progress_box.style.width = current_percent + "%";
}

// Do this after the document is loaded:
function hide_progress_bar()
{
setTimeout(function()
{document.getElementById("progress_cover").style.display =
"none";
document.documentElement.style.overflow = "auto";
if (window.onresize) window.onresize();},
100);
}
</script>

<style>

#progress_cover {background-color:white;position:fixed;
top:0px;left:0px;height:100%;width:100%;z-index:
10000000000;}
#progress_container {position:absolute;top:45%;height:10%;
left:20%;width:60%;border:2px groove;}
#progress_bar {background-color:green;width:0%;height:100%;}
</style>

<div id='progress_cover'>
<h1 style='margin:10px;'>Loading...</h1>

<div id='progress_container'>
<div id='progress_bar'></div>
</div>

</div>
======================================

Some problems with this approach are:
- You have to manually test and enter the total innerHTML size.
- Different web-browsers give significantly different values for
document.documentElement.innerHTML.length, so you have to force it to
stay no bigger than 100%

It seems to work ok on all the browsers I tested (you can see it in
operation at http://webinterfacetricks.com/) but I can't help but
think there are better, neater ways. Any advice would be appreciated.

 

[Web Interface Tricks]

Hi, I've made a crude progress bar that works by checking
document.documentElement.innerHTML.length periodically throughout the
file, and updating the width of div according to the proportion of the
total size that's loaded.The code is like this:

======================================
<script>

    var document_size = 334315;

    function update_progress()
    {
        var progress_box = document.getElementById("progress_bar");
        var current_size = document.documentElement.innerHTML.length;
        var current_percent = Math.ceil((current_size / document_size)
* 100);

        // different browsers measure the size differently, so limit
to 100%
        current_percent = Math.min(100, current_percent);
        progress_box.style.width = current_percent + "%";
    }

    // Do this after the document is loaded:
    function hide_progress_bar()
    {
        setTimeout(function()
            {document.getElementById("progress_cover").style.display =
"none";
            document.documentElement.style.overflow = "auto";
            if (window.onresize) window.onresize();},
            100);
    }
</script>

<style>

    #progress_cover {background-color:white;position:fixed;
                    top:0px;left:0px;height:100%;width:100%;z-index:
10000000000;}
    #progress_container {position:absolute;top:45%;height:10%;
                        left:20%;width:60%;border:2px groove;}
    #progress_bar {background-color:green;width:0%;height:100%;}
</style>

<div id='progress_cover'>
    <h1 style='margin:10px;'>Loading...</h1>

    <div id='progress_container'>
        <div id='progress_bar'></div>
    </div>

</div>
======================================

Some problems with this approach are:
- You have to manually test and enter the total innerHTML size.
- Different web-browsers give significantly different values for
document.documentElement.innerHTML.length, so you have to force it to
stay no bigger than 100%

It seems to work ok on all the browsers I tested (you can see it in
operation athttp://webinterfacetricks.com/) but I can't help but
think there are better, neater ways. Any advice would be appreciated.

Another problem is that this measures the proportion of page-text that
has been loaded, it does not take into account any external script or
image files. There aren't any external files on the example page but
it would be good if the progress bar could be more generally
applicable.

Any suggestions?