모든 이미지가로드 될 때까지 GIF로드 표시 하시겠습니까?

Question

전 배경으로 회전 목마를 사용하여 부트 스트랩 3으로 포트폴리오 사이트를 구축하고 있습니다. 내가 원하는 것은 이미지가 커질수록 각 사이트의 이미지 배열이로드 될 때까지로드 GIF를 표시 할 수 있어야한다는 것입니다.

여기에 지금 사용중인 html 코드가 있습니다.

<div class="carousel-inner"> 
    <div class="item active"> 
    <img src="./img/bg_01.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 

    <div class="item"> 
    <img src="./img/bg_02.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
</div> 

나는 이미지 사전로드에 대해 봤지만 굳이 원하는 것을 찾지 못했습니다. 어떤 방향으로 나아가 야할까요? 어쩌면 아약스/jquery 플러그인?

감사합니다. 에릭

Answer 1

imagesLoaded는 이미지가로드되었을 때 감지

찾고있는 수 있습니다.

데모 : http://imagesloaded.desandro.com/
GitHub의 :

imagesLoaded('#container', function() { //hide loader }); 

Answer 2

:

처음에 당신이 다음 이미지를로드 JS의 라인을 숨길 보여 https://github.com/desandro/imagesloaded

사용이 매우 간단 할 것 이미지를 사용할 준비가 될 때까지 GIF 로더를 보여줍니다.

$(window).onbeforeload(function(){ 
//Your code here 
}) 

페이지가로드 창 페이지가 완전히 페이지뿐만 아니라 DOM을로드하는 경우에만 트리거

$(window).load(function(){ 
//Your code here 
}); 

LOAD 이벤트 준비 사용을 일단.

미리보기에서 이미지 자리 표시자는 사용할 수 있으므로 이미지 대신 자리 표시 자만 표시됩니다. 이미지가로드되면 자리 표시자가 실제 이미지로 대체됩니다.

희망이

Answer 3

안녕, 다음 바이올린을 확인 기본적으로 로더보기, img 태그에와 기능 상에 onload 이벤트를 결합하십시오 데 도움이 당신이 로더를 숨길 수 있습니다 전화

http://jsfiddle.net/quDP4/

<div class="carousel-inner"> 
    <div class="item active"> 
     <div class="loader"></div> 
    <img src="http://bartelme.at/material/hdr/hdr5.jpg" alt="" onload="loaded(this)" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
</div> 
</div> 

<script> 
function loaded(imgloaded) 
{ 
imgloaded.previousElementSibling.style.display="none"; 

} 
</script>