javascript: time until page load

i am writing a animation with javascript and want to print to user loading time until all images loaded.

images set in html as: <img 开发者_如何学运维src="" />

are there javascript code to know when all page loaded?

i.e time until onLoad() event called

You might be able to do something like this at the bottom of the page

<span id="imgsMsg"></span>
<script type="text/javascript">
var imgs = document.images;
var len = imgs.length;
var percent = 100;
var count=0;
var messagecontainer = document.getElementById("imgsMsg");
for (var i=0;i<len;i++) {
   imgs[i].onload=function() {
     count++;
     messagecontainer = (percent - Math.floor((100/len)*count))+"% loaded"; // hope my math is correct ;)
   }
}
</script>
</body>

The best you can probably do is to track the number of images that have been loaded, and divide that into the total number of images remaining. Something like this:

var total_loaded = 0;
$('img').load(function()
{
    total_loaded += 1;
    var load_progress = total_loaded / $('img').length;
    // you can now use load_progress to show the user a rough progress animation
} );

If you want a "time remaining" display, you'll need to fake it. You could track the total time elapsed and compare that to the load_progress variable to get the remaining time, for example.

This isn't hard to do, with $(window).load:

var readytime = new Date().getTime();
$(window).load(function() {
    var loadingtime = (new Date().getTime() - readytime) / 1000; // in seconds

    $('#yourTimingField').text(loadingtime + ' seconds');
});

This measures the amount of time between the this part of the script and the loading of all subelements.