Question

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

http://jsfiddle.net/xM6v9/

但我还要显示已加载的页面的百分比（％）..

如显示“00％已加载的文本框。请稍候”。其中“00”应该是加载的百分比。

怎么办呢？

Answer 1

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

Jquery的load()函数只在加载过程完成时执行一个回调，并且这个回调用于删除旋转的gif ......

所以你只得到2个信息：0％和100％

要获得确切的加载百分比，您需要使用第二个脚本并每隔2秒调用一次（例如）来更新百分比，但除非您正在进行大量的服务器端操作，否则这是无用的。

实际上没有更好的方法。

Answer 2

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

Answer 3

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();
    }
});

制作一个处理栏，显示加载％？

3 个答案: