Question

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 document.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!

Answer 1

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.