« Objection6にとつにゅう | メイン | スケートアメリカ 高橋大輔のSP »

CSSでマウスオン画像表示のもたつきを解消する方法

メモ。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1113226166
より。
ナビゲーション画像のマウスオン・アウトの表示切り替えをCSSで行う場合、表示がもたつく(タイムラグがあるというか、表示に時間がかかることがある)。その回避方法。

・通常時とオンマウス時両方の画像を一つの画像にし、オンマウス時にbackgroundの背景位置をずらす。
a {background:url(同じ画像) 0px 0px no-repeat;}
a {background:url(同じ画像) 0px -100px no-repeat;}

・空要素を作り、そこに背景画像として読み込ませておく。
div.preload {
background:url(オンマウス画像1);
background:url(オンマウス画像2);
background:url(オンマウス画像3);
}

これみんなどうしてるんだろう???と思っていたのですが、こういうことだったのか。
そういえばなんか本に、ナビゲーションのマウスオン・アウト画像がひっついた画像を使ってるのがあって、なんだコレ?と思ってたんですが、なるほど…。

とりあえず空要素でやってみました…。

グッジョブだったらポチッと→

コメントを投稿

月別アーカイブ

2017年
2016年
2013年
2012年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
           

Blogのフィードを取得

Powered by
Movable Type 6.3.3