IE6対策 その２

前に書いた記事で書き忘れていたので。

画像の読み込みが完了するまで処理を始めたくない事は多々あるわけですが、その手法としては、

1)イメージ要素の complete 属性がセットされるのを待つ。
2)イメージ要素の onload で次の処理を開始する（とかフラグを立てるとかする）。

なんかがありますね。
この 2) が IE6 では曲者です(IE7 や 8 でも多分同じ問題があると思いますが、未確認)。

var img = new Image;
img.src = 'hoge.jpg';
img.onload = function() {
    alert('画像の読み込み完了!');
}

一見何の問題もないコードです。実際 FF、Chrome、Opera ではちゃんと動きます。
が、IE ではこの onload が呼ばれたり呼ばれなかったりします。

解決方法は簡単で、

onload を定義した後で src を設定する。

と、実行順序を変えれば良いです。

var img = new Image;
img.onload = function() {
    alert('画像の読み込み完了!');
}
img.src = 'hoge.jpg';

言われてみればコールバックを設定してからコールバックを呼び出すトリガとなる処理を実行するのは自然と言えば自然ですね。
でも結構うっかり逆の順序にしがちです^^;