1

画像に css アニメーションがあり、ページの読み込み時に再生したい。現在起こっていることは、ページをロードする最初の数回でアニメーションを再生せずに画像がロードされることです。その後は正常に動作します。画像がキャッシュされていると思います。

アニメーションがすぐに機能するように画像をプリロードする方法はありますか?

4

3 に答える 3

2

画像を事前に読み込むのではなく、画像が読み込まれるまでアニメーションを適用しないことをお勧めします。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;
}
于 2012-07-17T12:09:28.953 に答える
1

すべてのCSSと画像の後にロードされるように、すべてをあなたjsの一番下に移動することで、同じことを達成できると思います。html

于 2012-07-17T14:59:23.193 に答える
1

Adobe Edge を使用している場合はView > Preloader Stage、実際に準備が整う前に、スピナーなどを追加して、アニメーションが読み込まれていることを示すことができます。

于 2012-07-17T15:02:19.337 に答える