今私が作っているサイトでは、メニューの画像がa:hoverでもう一つの

質問

今私が作っているサイトでは、メニューの画像がa:hoverでもう一つの画像に
切り替るようにしているのです、タイムラグがあります。
マウスを画像にのせると一瞬画像が消えてからもう一つの画像に切り替り、
一度それをやると次からはスムーズに画像が切り替ります。

これをはじめからスムーズに画像が切り替るようなjavascriptを教えて下さい。

回答No.3

yambejp

ホバーさせるたびに読みに行くのが原因だという可能性がたかいので
最初に全部読み込ませるというのが現実的ですね
javascriptで画像をimgオブジェクトにあらかじめよんでおくのが
昔からよくつかわれる対処方法です

回答No.2

babu_baboo

おはようございます。
ことばでは、むずかしいのですが・・。

もし、そのがぞうが、はいけいならば、いかのようなこともできるじょ。

２つのがぞうを、じょうげにくっつけて１つのがぞうにします。
すたいるしーとで、ひょうじするはんいを、きちんとせっていします
そのうえで、a と a:hover で background-position を、いじる

回答No.1

mtaka2

マウスを載せてから、切替後の画像を取得しにいくため、取得できるまで間があくのが原因です。
(だから、画像が取得できた後である2回目以降はスムーズになる)
ですので、予め画像を取得させておけば、1回目でもタイムラグがなくなります。

JavaScriptなんか使わなくても
<img src="ホバー時に表示したい画像のURL" style="display:none">
といったタグを入れておくだけで十分です。