CSS 애니메이션의 이미지를 미리로드 하시겠습니까?

Question

이미지에 CSS 애니메이션이 있는데 페이지가로드 될 때 재생하려고합니다. 현재 일어나고있는 현상은 페이지를로드 할 때 처음 몇 번 재생되는 애니메이션없이 이미지가로드된다는 것입니다. 그 후 잘 작동합니다. 이미지가 캐싱 된 것 같습니다.

애니메이션을 바로 사용할 수 있도록 이미지를 미리로드하는 방법이 있습니까?

Answer 1

이미지를 미리로드하는 것이 아니라 이미지가로드 될 때까지 애니메이션을 적용하지 않는 것이 좋습니다.

.loaded { 
    position: absolute; 
    left: 60%; 
    bottom: -40%; 
    margin-left: -190px; 
    -webkit-animation-name: FadeIn; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-duration: 1s; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -webkit-animation-name: movinghand; 
    -webkit-animation-duration: 0.5; 
} 

Answer 2

난 당신이 이동하여 같은 일을 수행 할 수 있다고 생각 :

$(window).bind("load", function(){ 
    $("#future-head-hand").addClass("loaded"); 
}); 

그럼 대신 그 클래스에 애니메이션을 적용 jQuery를 사용하면 모든 것이로드 한 번만 이미지에 클래스를 적용 할 수 있습니다 모든 js을 html의 맨 아래에 놓아서 CSS와 이미지를 모두로드해야합니다.

Answer 3

Adobe Edge를 사용하는 경우 View > Preloader Stage으로 이동하여 실제로 준비되기 전에 애니메이션의 로딩을 보여주는 회 전자 또는 이와 비슷한 것을 추가 할 수 있습니다.