隱藏進度條，一旦圖像加載

Question

我有引導的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

應該工作：

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

Answer 2

對於使用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/