javascript - 加载图像后隐藏进度条

Question

我有一个带有 Bootstrap、CSS 和 jQuery 的进度条。一切正常，但我希望这个栏在所有图像加载后消失。为此，我尝试放入以下脚本：

if(n==100) { $('#fabbar').hide(); }

这是脚本：

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

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

  if(n==100) { $('#fabbar').hide(); }

  });

在我的身体里，我有：

    <div class="progress progress-info progress-striped active">
    <div class="bar" id='fabbar' style="width: 20%">0%</div>
    </div>
    
    <a href="images/1.jpg"><img class="gallery" src="images/1.jpg"></a>
    <a href="images/2.jpg"><img class="gallery" src="images/2.jpg" ></a>    
    <a href="images/3.jpg"><img class="gallery" src="images/3.jpg" ></a>
    <a href="images/4.jpg"><img class="gallery" src="images/4.jpg" ></a>

...

Answer 1

为此使用 WaitforImages jquery 插件： https ://github.com/alexanderdickson/waitForImages

这是它应该如何工作的：

$(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 + '%');
    });

});

$('body').waitForImages(function() {
    // All descendant images have loaded, now hide the progress bar.
    $(".bar_wrap").fadeOut();
});

查看演示（（单击运行按钮）） http://jsfiddle.net/yphM4/24/

Answer 2

应该管用：

$(function () {
    var n = 0,
        $imgs = $('img.gallery'),
        val = 100 / $imgs.length,
        $bar = $('#fabbar');
    $("img").one('load', function () {
        n = n + val;
        // for displaying purposes
        $bar.width(n + '%').text(n + '%');
         n === 100?$('#fabbar').hide():false;       
    }).each(function () {
        if (this.complete) $(this).load();
    });
});