Question

我通常做

$('#load').show();
$(document).ready(function(){
    $('#load').hide();
});

其中<div id="load">只有动画gif

但我想改进一点并显示进度条

具有

<div id="load"><div id="done"></div></div>

所以我可以，在超时（我猜）

var percent_done = how_do_i_figure_out(); /*  here is where i need help */
$('#done').width(percent_done);

Answer 1

无法完成！

你无权访问尚未渲染的元素，所以你怎么知道缺少什么？！

Answer 2

我只会使用假的进度条。这是一个例子。

http://jsfiddle.net/dM8Qp/1/

无法知道DOMready事件发生之前的时间。

HTML

<div id="pb"></div>

JS

$("#pb").progressbar();
var preloader = $("<div />").css("height", "0px").animate({
    height: 95
}, {
    step: function() {
        //console.log(Math.ceil(parseFloat($(this).css("height"))))
        $("#pb").progressbar("value", Math.ceil(parseFloat($(this).css("height"))));
    },
    duration: 2000
});

$(document).ready(function(){
    preloader.promise().done(function(){
        $("#pb").add(preloader).remove();
    });
});

根据评论中的gdoron建议更新。

Answer 3

有太多变量无法正确确定加载所需的时间。一些无法计算（如互联网连接速度）。

如何知道document.ready还剩多少时间/％？

3 个答案: