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

加载图像后隐藏进度条

2 个答案: