Status bar message inside div

what i am trying to achieve is a loading description box, where it displays what is loading or the percentage of the loading.

My setup is a basic "show div after on docume开发者_开发知识库nt.all" and the entire page is inside that div.

Before the document.all becomes true, it keeps showing a nifty circle image (ajax loader style) and what i want is (if possible) to add a little description while the page doesn't show, an example could be:

Loading 20%

or

Loading information from etc... | this one would be using what actually shows in the status bar message when its loading scripts or communicating with services.

I run this on Blogger, so any php or curl etc won't work, it would be perfect if it could be done using javascript or ajax.

Thank you for your time!

---

It depends on what you are going to use to make a percentage. Images? Get count for all images, and attach a handler on load.

I have a jQuery plugin for that, but I'll write you some normal JavaScript to do it.

// Implement your own cross browser onDOMReady event
var allImgs = document.getElementsByTagName('img'),
    allImgsLength = allImgs.length,
    imgsLoaded = 0,
    statusbar = document.getElementById('status');

for (var i = 0; i < allImgsLength; i++) {

    allImgs[i].onload = function() {

        imgsLoaded++;

        statusbar.innerHTML = 'Loaded ' + imgsLoaded + ' of ' + allImgsLength + '.';   

        if (imgsLoaded == allImgsLength) {
            statusbar.innerHTML = 'All ' + imgsLoaded + ' images loaded.'; 
        }   

    }        
}

jsFiddle.