-
ID:jjqA5/ さんの質問

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 件

ID:GEscoJ さんの回答

コンテンツのレンダリングにはある程度の時間がかかります。
この場合、20Mほどのおおきな画像を縮小して表示しなければならないため、ロードされていても体感できるレベルで遅延が発生しているのではないでしょうか。

頻繁に利用するところに置く画像であれば、600×500の画像をあらかじめ用意しておくのが良いと思います。

ID:4cmR6Q さんの回答

background-imageのurlの切り替えより、displayの切り替え、もしくは、z-indexの切り替えの方が速いと思うよ。レンダリング済みを切り替えるだけなので。

ID:m8rMZN さんの回答

スプライトじゃだめなんでしょうか?
それなら一枚なので、最初に表示される時点でレンダリング終わってると思うんですが。

ID:rcc6HG

いいとおもうよ

最終更新日:2013-01-11 (4,330 views)

関連するトピックス

ページ上部に戻る