changeImgによる画像の入れ替え時のIEにおける不安定さ

質問

changeImgで画像を入れ替えたいのですが、
FireFoxでは問題ないのですが、

IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。

表示されないときに右クリックの画像を表示するにすると表示されます。

http://inoue.sub.jp/test/

ソースは

**************************
function changeImg(iName,img){
document.images[iName].src=img;
}
**************************
<img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/>

<a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);">
<img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a>
<a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);">
<img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a>

になります。

何処がおかしいのでしょうか？どうぞよろしくお願いいたします。

回答No.1

神崎 渉瑠（@taloo）

キャッシュの関係かな？
プリロードしておくといかがでしょうか。

<script type="text/javascript">
(function init(){
var imgs=['img/01.jpg','img/07.jpg','img/08.jpg','img/02.jpg','img/09.jpg','img/10.jpg'];

for(var im,i=0;i<imgs.length;i++){
im=new Image();
im.src=imgs[i];
}
})();

function changeImg(iName,img){
//
}
</script>

未検証です。

forループのところはこれでも良いかもしれませんが、
for(var im=new Image(),i=0;i<imgs.length;i++){
im.src=imgs[i];
}
毎回newしないと、ちゃんとキャッシュに入ってくれないかもしれないので、念のため、ということで。

お礼

talooさま

悲しいくらい分かっていないのですが、
教えていただいたものを追加してみました。

http://inoue.sub.jp/test2/index3.html

以前より安定して表示されますが、完璧とは行かないようです。

他の方法でもやってみます。

ありがとうございました。