問題点
さて、ここからは前掲のスクリプトを改良していきます。 改良と言いましたが、前のスクリプトで何かいけない点があったか、お気付きになられない方もいるかもしれません。 スクリプトに無駄はないつもりですし、どこも問題がないように見えるはずです。 しかし、実際には、前掲のスクリプトでは、画像の入れ替えが行われる際に、サーバ上にある画像を取りに行く動作が入ってきます。 これは、ローカル上やブロードバンド環境では大した問題と感じられない場合もありますが、コンピュータや回線に余計な負荷をかける可能性があります。 ここでは、差し替える画像をあらかじめすべて読み出してしまい、画像の入れ替えごとにサーバにファイルを取りに行く動作をしないですむようにする方法を解説します。
対策
では、この問題の対策を挙げていきます。 対策としては、事前にImageオブジェクトを定義してしまう方法が有効と思われます。 Imageオブジェクトを定義することで、その定義の処理が行われた時点で差し替えに利用する画像を変数もしくは配列の中に格納することができ、その際に一緒に画像もロードされます。 具体的には以下のように記述します。
例：
pl_img=new Image();
pl_img.src="***.jpg";
上記の例では、「pl_img」という名前の変数をImageオブジェクトとして定義し、このImageオブジェクトのsrcプロパティを指定することで、変数pl_imgに画像を読み込ませています。 こうした場合、画像を差し替える処理を行うスクリプトの部分で、画像のURLの代わりにImageオブジェクトとして定義した変数を利用した記述をします。
例：
document.images[1].src=pl_img.src;
実装例
上記の対策を含めて、前ページでまとめたスクリプトの内容を書き改めてみましょう。
例：
<script type="text/javascript">
<!--
var ro_img= new Image();
ro_img.src="***"; //***の部分は変更する画像のURI
function cngImg(){
document.+++.src=ro_img.src; // +++の部分は画像を差し替える要素の識別子
}
// -->
</script>
かなり些細な変更になりましたね。 これで、前回のスクリプトよりもスムースに画像の入れ替えができるようになると思います。 以下に、また前ページと同じように、実例を載せておきます。 画像変化のときの反応速度なども合わせて、違いを見てみてください。
実際のところを言えば、Imageオブジェクトで事前に画像ファイルを取得しない場合でも、画像の入れ替え時に実際にサーバに画像ファイルを取りに行くのは、大抵は1回だけになります。 2回目以降の動作では、その画像ファイルがブラウザにキャッシュされ、そのキャッシュを参照するようになるので、スムースに動作するようになります。 ですので、これを問題視しないことも選択肢の一つです。 しかし、ユーザーに優しいページ作りをするのであれば、思わぬところでサーバにアクセスしたりするような動作は不安をあおる可能性もあるのであまり好ましくないでしょうし、ページ内で利用するファイルは一度にまとめてダウンロードするほうが快適な感じが強くなると思います。 ですので、できれば事前に画像ファイルをロードさせるようなスクリプト作りをしたほうが、ユーザーに対しては親切と思います。