画像の不完全な読み込みについて

質問

ロールオーバー(アウト)で画像切り替えをしています。
ＭacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。

*****外部jsファイル********
if(document.images){
var hoge_over=new Image(70,162);
hoge_over.src="./hoge.gif";
var hoge_out=new Image(70,162);
hoge_out.src="./hoge2.gif";
}
function xOver(imgname){
if(document.images){
document.images[imgname].src=eval(imgname+"_over.src");
}
}
function xOut(imgname){
if(document.images){
document.images[imgname].src=eval(imgname+"_out.src");
}
}
*****htmlファイル********
<a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self">
<IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a>
**************************
問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。

回答No.1

shime-saba

こんにちは。
milkandhoneyさんのお力になれるかは分かりませんが、
一度試して頂きたい事があります。

/* 使用するファイルを指定 */
imgArray = new Array();
imgArray[0] = "./small01.gif";
imgArray[1] = "./small02.gif";
imgArray[2] = "./large01.gif";
imgArray[3] = "./large02.gif";

/* 指定したファイルの前読み込み */
preLoadAr = new Array();
for(i=0; i<imgArray.length; i++)
{
preLoadAr[i] = new Image();
preLoadAr[i].src = imgArray[i];
}

このように記述したjsファイルを取り込むなりhtmlソースに追記する等し、
ロールオーバー時の処理で
hogeImg.src = preLoadAr[2]
のように記述してやれば、
ページ読み込み時にimgArrayに指定した画像を
全て読み込んでから表示するようになります。

これでダメでしたら少しソースをじっくり読ませて頂きます。
仕事中に気分転換で徘徊しているので
微妙なお返事で申し訳ないです。