0

次のCSSコードを使用して、ユーザーが「無効」（灰色）アイコンの上にマウスを置いたときに「ホット」（色付き）アイコンを表示しています。

.pic a:link { background: url(http://www.mydomain.com/media/disabled/pic.png) top center no-repeat; }
.pic a:hover { background: url(http://www.mydomain.com/media/hot/pic.png) top center no-repeat; }
.pic a:active { background: url(http://www.mydomain.com/media/normal/pic.png) top center no-repeat; }

正常に動作しますが、厄介な点が1つあります。ユーザーが初めて「無効」アイコンにマウスを合わせると、「ホット」アイコンが表示されるまでにわずかな遅延が発生します。それ以降のすべてのマウスオーバーでは、遅滞なく「ホット」アイコンが表示されます。この遅延が最初のマウスオーバーで発生するのを防ぐ方法はありますか？

4

3 に答える 3

2

これは一般的な問題であり、3つの解決策があります。

  1. JavaScriptを使用してファイルをプリロードします。
  2. 別の表示されている要素を使用してファイルをプリロードしますが、z順序付けを含むいくつかのトリックで隠されています。
  3. CSSスプライトを使用する：http：//css-tricks.com/css-sprites/
于 2012-11-14T01:12:58.497 に答える
0

背景画像をプリロードする手法を使用します。表示されている遅延は、ユーザーがカーソルを合わせるまでブラウザーが画像をフェッチしないことが原因です。

これを行うためのいくつかのテクニックに関する記事を次に示します。

于 2012-11-14T01:14:27.307 に答える
0

CSS スプライトは、これを解決する正しい方法です。これを解決するだけでなく、ダウンロードする画像の量を減らすことで、サイトの初期読み込みを高速化します. 特にモバイル クライアントで役立ちます。

于 2012-11-14T01:22:59.830 に答える