W
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.
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.