IE6でJavaScriptによる画像切り替えがうまく動かない

サムネイル画像をクリックすると、その画像を特定の場所に表示する。ってヤツをJavaScriptで作ってました。切り替えの肝となる部分は以下のようなコードです。


function changeImage(image_url, image_tag_id){
　var img = document.getElementById(image_tag_id);
　img.src = image_url;
}


実際には、エラー処理や、アスペクト比を保持したまま拡大縮小するコードなど含まれているのですがここでは省略します。

このコードはFireFox2.0やIE7では問題なく動作するのですが、IE6では動作したりしなかったり安定しない感じでした。
色々コードの形を変えて試した感じだと、img.srcへの代入が非同期で行われ、画像読み込みが完了する前に関数を抜けると画像が切り替わらないというのが原因だろうと思いました。もっと違う理由かもしれませんが。
この問題に対し、Imageクラスを使用しあらかじめ画像を読み込んでおくという、本来は画像切り替えのタイムラグを減らすために利用されるテクニックが有効かなと最初思ったのですが、ローカルキャッシュからの画像の読み込みに時間が掛かれば(ブラウザ以外で重い処理を行ってるとか)、同じ問題が発生する可能性があるので、違う解決法を考えました。

Imageオブジェクトにはcompleteプロパティというものがあり、画像の読み込み中はfalseを返すようになってます。そのプロパティをsetIntervalでチェックするようにしました。
具体的には以下のとおりです。


var imgtmp;
var img;

function changeImage(image_url, image_tag_id){
　imgtmp = new Image();
　imgtmp.src = image_url;
　img = document.getElementById(image_tag_id);
　setInterval(waitImageLoading, 500);
}

function waitImageLoading(){
　if(imgtmp.complete){
　　img.src = imgtmp.src;
　　clearInterval();
　}
}


今書いてて思ったのですが、Imageクラスを使用しあらかじめ画像を読み込んでおく方法と変わらないような気が・・・
まぁ、サーバ側でhtmlを動的に生成してる場合で、画像切り替えのJavaScriptを外部ファイルにしてる場合、このファイルへの追記のみで対応可能なところがメリットでしょうか。
画像をあらかじめ読み込む方法だと、JavaScriptファイルを読み込んでる元のHTMLに手を加えないと普通に作ってる分には難しいので。(HTML以外のファイルもサーバ側で動的に生成するのは管理コストが高くなりやすい)