GIFマウスを起動し、一時停止しますか？

Question

私は静的なページのサイドバーにこれらの画像を表示しようとしていますが、マウスオーバーするとGIFとしてアニメートされます。私の現在の設定は、background-image CSSのプロパティ画像を静的なjpgにすることですが、mouseoverでアニメーション化されたgifに変更します。私のポイントをより良く説明するためのコードは次のとおりです。

CSS：

#segments li a.fnb { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/ 
} 

#segments li a.whhu { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg); 
} 

#segments li a.fnb:hover { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif); 
} 

#segments li a.whhu:hover { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif); 
} 

私はそれが私のポイントを作るために不要ですが、残りの部分からあなたを惜しまます。

HTML：

<ul id="segments"> 
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li> 
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li> 
</ul> 

サイトは、それが現在どのように動作するかを確認するために画像を左サイドバーをチェックアウトし、http://tcptest.tumblr.comです。

これは機能しますが、私の唯一の問題は、これまでの最初のホバーではgifをロードする必要があり、gifがロードされている間に空白になる短い瞬間です。これは大したことではありませんが、それは本当にプロフェッショナルではありません。

私はJSを使うというこのアイデア（link）を試しましたが、失敗しました。

私は疑問に思う：私はこのランダムな空白の瞬間を得ることができないようにCSSや他の言語でこれを行うための良い方法はありますか？

Answer 1

画像をあらかじめ読み込む方法を学びます。 "HTMLプリロードイメージ"のGoogle検索は、あなたに行くでしょう...

このリンクは、javascriptを使用して良いアイデアがあるようです。

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

Answer 2

あなたがページ上の他の場所IMG要素に画像を含めることができ、それらは隠されたコンテナ（CSSでdisplay:noneまたはvisibility:hidden）を持っているので、ロードされたときにページが最初にロードが、見えていません。これはキャッシュホバリングされたイメージクライアント側に役立ちます。そのため、ブラウザがCSSで参照されている：ホバーイメージを要求したときに遅延が発生しません。

CSSで使用するIMGSRCという属性で、同じファイルパスを使用して、ブラウザが同じイメージとして認識するようにします。

これは、JavaScriptソリューションがうまく機能しない場合です。上記のあなたの例から

...

<!-- Cache Images --> 
<div style="display:none"> 
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt=""> 
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt=""> 
</div> 

EDIT：かもしれないがアニメーションに応じて、あなたに影響を与えるアニメーションGIFを持つ別の問題は関係なく...あり

アニメーション（ホバー）画像がプリロードされているかどうかにかかわらず、一度ロードされると、ブラウザは、現在表示されているかどうかにかかわらず、背景で画像を再生する傾向があります。そのため、イメージから離れて移動したときにアニメーションが元の位置に移動するのではなく、現在の位置にアニメーションが「ジャンプ」します。短いアニメーションではなく長いアニメーションでは目立ちます。

Answer 3

あなたはCSS経由で隠されているページ（display: none）にDIVを追加し、そこでのアニメーションGIFのためIMGタグを入れることができます。これにより、画像が強制的にページにプリロードされます。

詳細はthis linkを確認してください。