7

背景に<div>画像があります。誰かがにカーソルを合わせる<div>と、背景画像が他の画像に変わるようにしています。問題は、マウスを初めて上に置いたときに、<div>ロード時に背景画像がちらつき、数ミリ秒間画像が表示されないことです。

このちらつきを取り除くにはどうすればよいですか？ユーザーが実際にホバーする前にホバー用の画像をロードして<div>、効果がすぐに得られるようにするにはどうすればよいですか。

背景を変更するための私のコード<div>は非常に単純です：

#someID{
    background-image: *image source*;
}
#someID:hover{
    background-image: *Another image source*
}

2つの目的の画像を1つの画像に入れてから背景の位置で再生するという解決策があることは知っていますが、背景画像を常に次のように設定しているため、ここではオプションではありません。

image-size: 100% 100%;
4

4 に答える 4

5

window.load（）関数内で、

  • すべての画像がページに読み込まれていることを確認してください。
    参考までに-各画像のCSS位置を絶対に設定し、Top：0pxとLeft：0pxをすべて、特定の幅と高さのposition：relativeを持つ親div内に設定することをお勧めします。

  • display：noneを、DC_が指摘したものとして表示されるべきではないものに設定します

  • jqueryのホバーメソッドまたはクリックメソッドを使用して画像をクリックします。選択したメソッド関数内で、現在の画像をfadeOut（）し、display：noneが関連付けられている画像をfadeIn（）します。

于 2013-03-09T20:20:57.360 に答える
3

プリロードするイメージを参照するイメージ タグを DOM のどこかに配置して、スタイルを指定できdisplay:none; visibility: hidden;ます。JavaScript プリロード ソリューションを使用することもできますが、信頼性は高くありません。

于 2013-03-09T20:08:08.590 に答える
1

CSS が変更されてリロードされると、ちらつきが発生します。ちらつきは、CSS の書き換えにかかるマイクロ秒単位の遷移です。

トランジションを別の背景の上に重ねることをお勧めします。ちらつきは、実際には #someID 要素が一瞬完全に透明になることです。

擬似コード:

#underLayer {
     background-image: *image source*;
}

#someID {
    background-image: *image source*;
}

/* On change for #someID */
#someID:hover {
    background-image: *image source*;
}
<!-- first div acts as a base layer to show underneath during transition flicker -->
<div id="underLayer">
    <div id="someID"> This div changes on hover</div>
</div>
于 2014-01-10T19:10:56.840 に答える
0

私は非常によく似た問題を抱えていました。これに関連していることがわかると思います: cubiq.org/you-shall-not-flicker

簡単な解決策 (記事から): -webkit-transform:translate3d(0,0,0).

于 2014-08-08T07:17:36.670 に答える