2

画像 (左上にホーム リンクとして) があり、CSS :hover を使用して、ロールオーバー時に画像を変更します。

問題は、最初にロールオーバーしたときに画像の読み込みに時間がかかることです。一時的な空白スペースがあり、イメージが段階的に読み込まれます。1秒くらいかかりますが、めんどくさいです。

ロールオーバーがシームレスになるようにこれを修正するにはどうすればよいですか? 画像をプリロードする方法はありますか?

4

5 に答える 5

4

私が考えることができる2つのオプションがあります。

  1. css 画像スプライト、または
  2. :hoverページの他の場所にある非表示に画像を配置しdivます。

1、スプライト:

CSS Spriteの場合、「ホーム」リンクの背景画像を 1 つ用意し、単純にその位置を で変更します:hover。

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

ただし、これには css-sprite バックグラウンドを持つ要素の高さを設定する必要があります。

2、隠されたプリロード要素:

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>
于 2011-01-02T22:10:23.880 に答える
1

これを行う 1 つの方法は、同じ URL を持つ非表示の画像をページに追加することです。したがって、ドキュメントの本文の先頭に次を追加することで、ブラウザにこの画像をできるだけ早くロードするように実際に指示します。

<IMG src="rolloverImage.png" style="display:none">

このタグはドキュメントの一部のままですが、「display:none」設定のため、表示もレンダリングもされません。その load イベントをリッスンし、読み込まれたタグを DOM から完全に削除して、ドキュメントから「ゴミ」を取り除くこともできます。画像がメモリに読み込まれると、同じ URL を参照するたびに自動的に再利用されるため、別の画像のソースを同じ URL に設定すると、メモリから読み込まれます。

お役に立てば幸いです、コビ

于 2011-01-02T22:10:14.220 に答える
1

1. 回答: CSS スプライト を使用する

2. 回答:または、次のようなものを作成します。

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

そしてCSS：

img.nohover {

ボーダー:0

}

img.hover {

ボーダー:0;

表示:なし

}

a:hover img.hover {

表示:インライン

}

a:hover img.nohover {

表示:なし

}

于 2011-01-02T22:12:34.517 に答える
1

ロールオーバーに非常にうまく機能することがわかった方法は、CSS スプライトを使用することです。つまり、画像の元のバージョンとロールオーバー バージョンの両方を含む画像を使用します。そうすれば、両方のバージョンが同時に読み込まれ、background-positionスタイルを変更するだけでバージョンを変更できます。

于 2011-01-02T22:09:25.460 に答える
0

スタイルが に設定された div に画像を配置し{ height: 0; overflow: hidden; }ます。これにより、ブラウザは画像をプリロードします。

于 2011-01-02T22:10:42.623 に答える