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