ポジションチェンジによる背景画像の入れ替え
- 2006
- 11/11
- 18:13
ポジションチェンジによる背景画像の入れ替え
さて何のことでしょう？
リンク部分にマウスカーソルを合わせたときに背景画像を入れ替える手法は、メニューなどでよく使われる方法ですが、入れ替える画像容量が大きいときにタイムラグが発生してしまいます。
特に1回目はサーバーから画像を読み込むため余計に時間がかかり、2回目以降もキャッシュから読み込む時間がほんの少しかかります。
そこで入れ替え前と入れ替え後の画像をひとつにまとめてしまい、画像の位置を変えることによって入れ替える方法がポジションチェンジです。
例1：2枚の画像を入れ替える方法
（わかりやすいように特大容量画像を使ってます）
OFFの画像（容量約500KB）
ONの画像（容量約500KB）
例2：1枚の画像をポジションチェンジする方法
background-position: 0px 500px;
で画像の位置を500px下にずらします。
（わかりやすいように特大容量画像を使ってます）
OFFONまとめた画像（容量約1000KB）
ブラウザやパソコンの性能によって若干違いはありますが、おおむねポジションチェンジのほうが画像の入れ替えが早く出来ます。
さて何のことでしょう？
リンク部分にマウスカーソルを合わせたときに背景画像を入れ替える手法は、メニューなどでよく使われる方法ですが、入れ替える画像容量が大きいときにタイムラグが発生してしまいます。
特に1回目はサーバーから画像を読み込むため余計に時間がかかり、2回目以降もキャッシュから読み込む時間がほんの少しかかります。
そこで入れ替え前と入れ替え後の画像をひとつにまとめてしまい、画像の位置を変えることによって入れ替える方法がポジションチェンジです。
例1：2枚の画像を入れ替える方法
（わかりやすいように特大容量画像を使ってます）
OFFの画像（容量約500KB）
ONの画像（容量約500KB）
例2：1枚の画像をポジションチェンジする方法
background-position: 0px 500px;
で画像の位置を500px下にずらします。
（わかりやすいように特大容量画像を使ってます）
OFFONまとめた画像（容量約1000KB）
ブラウザやパソコンの性能によって若干違いはありますが、おおむねポジションチェンジのほうが画像の入れ替えが早く出来ます。
- CSS |
- Comments：0 |
- Trackbacks：0 |
- Edit
Comments
- コメントの投稿
Trackbacks
- Trackback URL
- http://season.14.dtiblog.com/tb.php/30-d5968649
