預加載CSS動畫的圖像？

Question

我對圖像有一個css動畫，我希望它在頁面加載時播放。目前發生的情況是，在加載頁面的前幾次沒有動畫播放的情況下，圖像被加載。之後，工作正常。我猜圖像被緩存了。

是否有預加載圖像的方法，以便動畫可以直接使用？

Answer 1

而不是預加載圖像，我建議不要應用動畫，直到圖像加載。使用jQuery，你可以申請一個類只有一次一切都已經加載的圖像：

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

那麼動畫應用到類，而不是：

.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

我想你可以通過移動完成同樣的事情所有的js到你的html的底部，這樣它會加載所有的CSS和圖像。

Answer 3

如果您使用的Adobe邊緣，你可以進入View > Preloader Stage，並添加一個微調，或類似的東西，以顯示動畫的加載，它實際上是準備好之前。