div中的状态栏消息

Question

我想要实现的是一个加载描述框，它显示正在加载的内容或加载的百分比。

我的设置是基本的“在document.all之后显示div”，整个页面都在div内。

在document.all变为true之前，它一直显示一个漂亮的圆形图像（ajax加载器样式），我想要的是（如果可能的话）在页面不显示时添加一些描述，例子可能是：

加载20％

或

从等处加载信息... |当加载脚本或与服务通信时，这个将使用状态栏消息中实际显示的内容。

我在Blogger上运行它，所以任何php或curl等都不会工作，如果可以使用javascript或ajax完成它将是完美的。

感谢您的时间！

Answer 1

这取决于您将使用什么来制作百分比。图片？获取所有图像的计数，并在加载时附加处理程序。

我有一个jQuery plugin，但我会写一些普通的JavaScript来做。

// 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