이미지가로드되면 진행률 표시 줄을 숨기기

Question

부트 스트랩 css 및 jquery가있는 진행 표시 줄이 있습니다. 모든 것이 잘 작동하지만 모든 이미지가로드 될 때이 막대가 사라지게하고 싶습니다. 이를 위해 내가 다음 스크립트 A의 해 봤어 :

$(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> 

... 

어떤 도움이 될 것입니다 여기에

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

스크립트의 위대한

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 플러그인 :

$(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/