画像をキャッシュするには
var image = new Image();
image.src = "画像パス";
とすれば良い.これで"画像パス"がブラウザにキャッシュされ,再度読み込まれることはなくなる.

これまでonMouseOver,onMouseOutなどで画像の動的な切り替えを行ってきた.imgタグのsrc属性を切り換えることは,その切り替える画像を読み込ませる行為をブラウザに行わせていることになる.

ファイルサイズの軽い画像なら気にならないが,切り替える画像が重たい場合,ブラウザはその都度画像をサーバから読み込むことになり(サーバに問い合わせることになり),切り替え時に時間差が発生してしまう.JavaScriptのメモリ内に画像をキャッシュすることでその読み込む行為がなくなり,重たい画像でもスムーズに画像の切り替えが行われるようになる.

ここで厳密には「画像を先読みすること」と「キャッシュすること」は別の意味と捉えて欲しい.
画像を先読みしキャッシュすることで,*最初の*切り替え時に時間差がなくなる.
これに対し,ただ単にキャッシュするとは,都度読み込みがなくなりスムーズな画像切り替えが行われるようになる.

ただし,本当の意味で「先読み」の利点を生かすためには,画像がキャッシュされるまでは(読み込まれるまでは)何のアクションも起こさない,という処理を加える必要がでてくるがこれは若干難しいのでまた今度.このページではその処理は行っていない.

画像提供 : PhotoBox YAS
戻る ]