Question

我正在处理页面上的bootstrap bar预加载图像。事情很好但我不知道如何在加载所有图像后使进度条消失。这是我的代码：

<div class="progress progress-info progress-striped active">
    <div class="bar" id='fabbar' style="width: 20%">0%</div>
</div>
<img src="http://placekitten.com/1000/1000" alt="" width="100" height="100" />
<img src="http://placehold.it/1000x1000" alt="" width="100" height="100" />
<img src="http://placebear.com/1000/1000" alt="" width="100" height="100" />
<img src="http://lorempixel.com/1000/1000" alt="" width="100" height="100" />
<img src="http://placedog.com/1000/1000" alt="" width="100" height="100" />

JS

$(function () {
    var n = 0,
        $imgs = $('img'),
        val = 100 / $imgs.length,
        $bar = $('#fabbar');

    $imgs.load(function () {
        n = n + val;
        // for displaying purposes
        $bar.width(n + '%').text(n + '%');
$('#imgLoader').hide();
    });
});

现在我有两个问题。

整个酒吧在装货前已经消失了。
使百分比数字成为20％，40％，100％的函数。现在是93.33333333333334％。

Answer 1

对于你的第一个问题，你可以使用jQuery的$.Deferred来允许你的函数在finshes调用另一个函数而不是异步运行。它可以将多个回调注册到回调队列，调用回调队列，并中继任何同步或异步功能的成功或失败状态。您的代码看起来与此类似：

var FunctionOne = function () {
  // create a deferred object
  var r = $.Deferred();

 // do whatever you want (e.g. ajax/animations other asyc tasks)
 // and call `resolve` on the deferred object, once you're done
 r.resolve();
 // return the deferred object
 return r;
};

// define FunctionTwo as needed
var FunctionTwo = function () {
  $('#imgLoader').hide();
};

// call FunctionOne and use the `done` method
// with `FunctionTwo` as it's parameter
$(function() {
    FunctionOne().done(FunctionTwo);
})

加载所有图像后如何隐藏进度条

1 个答案: