jquery - 制作一个进程栏，显示loaded %?

Question

我做了一些研究，发现了这个：

http://jsfiddle.net/xM6v9/

但我也想显示已加载页面的百分比 (%)..

就像显示一个带有“00% 已加载百分比。请稍候”的文本框。其中“00”应该是加载的百分比。

怎么可能呢？

Answer 1

http://jsbin.com/egekaj/1/edit我创建的只是一个带有条形动画的模拟，但它会在每个图像加载后进行动画处理。

var images = [
'1.jpg',
'2.jpg',
'3.jpg'
];

var imagesN = images.length;

var i = 0;

var img = new Image();
img.onload = (function(){
    for ( i = 0; i < imagesN; ++i ){
        $('#gallery').append('<img src="'+images[i]+'">');   
    }
})(i); 

var c = 0;
$("#gallery img").load(function(i){
    c++;
    var status = c*(100/imagesN)+'%';
    $("#load_status").html( parseInt(status, 10) ); 
    $('#loader').stop().animate({width: status},300);
    if (c === imagesN){
        $("#gallery").fadeIn(700);
        $('#load_status, #loading_bar').hide();
    }
});

Answer 2

没有简单的方法来显示当前百分比，这就是为什么我们使用旋转 gif 而不是基于百分比的进度条。

来自 Jquery的load()函数仅在加载过程完成时执行一个回调，此回调用于删除旋转的 gif ...

所以你只有 2 个信息：0% 和 100%

要获得准确的加载百分比，您需要使用第二个脚本并每 2 秒调用一次（例如）以更新百分比，但这没有用，除非您正在执行繁重的服务器端操作...

其实没有更好的办法。

Answer 3

window.load 和 document.ready 事件在页面 DOM 加载后发生。如果您想这样做，您可以查看使用jQuery Load 加载页面的各个部分，然后根据您正在加载的部分增加您的百分比。没有“开箱即用”的方式来做到这一点。