이미지가로드 된 후에 만 ​​CSS 애니메이션 재생

Question

페이지 입력시 일부 이미지 및 텍스트에 animate.css (FadeInDown)가 사용됩니다. 로컬에서 벌금을 실행하지만 서버에서로드해야하는 모든 이미지 (대용량 파일 크기가 아니라 단지 많은 이미지) 때문에 서버가 원활하지 않습니다.

문제 : animate.css가 (페이지로드시) 발동되지만 이미지가 절반 로딩되는 동안. 나는 'display : none'이미지를 사용할 수 있고 JS/LazyLoad를 사용하여 이미지가로드 된 것을 보여줄 수 있지만 animate.css가 이미 실행되었음을 알 수 있습니다.

그래서 내가 필요가 있다고 생각 : 당신이 페이지로 연결되는 링크를 클릭하면 A. 정확히 이미지가로드 될 때까지 animate.css을 지연/ 또는 실패를 표시, B., 그것은 진행되지 않습니다 모든 것이 완전히로드 될 때까지 다음 페이지로 이동합니다.

누구를 도울 수 있습니까? 다른 모든 것들이 이미지처럼뿐만 아니라로드 될 때

animate.css

@keyframes fadeInDown { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateY(0); 
    -ms-transform: translateY(0); 
    transform: translateY(0); 
    } 
} 

Answer 1

jQuery, 당신은 기능을 실행하기 위해 DOM이로드 될 때 함수를 실행하기 위해 $(document).ready()를 사용 $(window).on("load", handler) 수 있습니다. 그래서 기본적으로

, 당신이 사용할 수 있습니다

$(window).on("load", function(){ 
    // '#yourElement' this is the id of the html element you want to animate. 
    // you can also use any other selector as well. 
    $('#yourElement').addClass('animated fadeInDown'); 
}); 

Answer 2

를 별도로 각 이미지에 애니메이션을 설정하려면, 각각의 이미지가 로딩 될 때 당신은 이런 식으로 뭔가를 할 수 있습니다

$("img").one("load", function() { 
    $(this).addClass('fadeInDown'); 
}).each(function() { 
    if(this.complete) $(this).load(); 
});