background:urlで背景画像を切り替えて、ロールオーバーなどを実装する場合について質問です。
■以下のようなhtmlとcssがあるとします。
<div></div>
<style>
div{
background:url(test.jpg);
background-repeat:no-repeat;
width:600px;
height:500px;
}
div.over{
background:url(test-over.jpg);
}
</style>
これをdivにロールオーバーしたときに、divにoverクラスを振れば背景画像が切り替わるのですが、test-overをプリロードしているにもかかわらず、すぐにtest-over.jpgが表示されないことがあります。試しに20MB近くの画像で試したところ、プリロードしているにもかかわらず、表示するのに少々時間がかかりました。
そこで質問なのですが、このような画像の切替は、少なからず切り替え後の表示に時間がかかってしまうものなのでしょうか？
みんなの回答 3 件
コンテンツのレンダリングにはある程度の時間がかかります。
この場合、20Mほどのおおきな画像を縮小して表示しなければならないため、ロードされていても体感できるレベルで遅延が発生しているのではないでしょうか。
頻繁に利用するところに置く画像であれば、600×500の画像をあらかじめ用意しておくのが良いと思います。
background-imageのurlの切り替えより、displayの切り替え、もしくは、z-indexの切り替えの方が速いと思うよ。レンダリング済みを切り替えるだけなので。
スプライトじゃだめなんでしょうか？
それなら一枚なので、最初に表示される時点でレンダリング終わってると思うんですが。
関連するトピックス