【JavaScript】IE6だと画像が表示されたり、されなかったり

またもやIE6でちょっと嵌ったのでメモ。

IE6 SP2(Windows XP SP2のIE)だとgif画像がなぜか表示されない。タグは生成されているけど、右クリック→画像の表示とやると見える。しかもブラウザによって見えたり見えなかったりするので、読み込みとかキャッシュが関連するのではないかと調べてみた。

ちなみに現象が起きたのはWordpressのcustom-smilies-seを使って顔文字(絵文字)をポップアップで表示するとき。

参考になったのはここのサイト。

要はJavascriptでimgタグのsrcにセットしていると、画像が読み込まれる前に処理が終わってしまった場合、画像が画面に表示されない。

一度ブラウザにキャッシュされている画像は表示される。

なので、画面を表示するときにimageオブジェクトを使って先行読み込みをしてあげれば良い。

簡単なJavaScriptのコードは以下

objImage = new Image();
objImage.src="test.gif";

genlist_post.js.phpに追加したコードは以下

preLoadImage();
function preLoadImage() {
  <?php
    $i = 1;
    foreach ($clcs_smilies as $k => $v) {
        echo 'objImage_' . $i . ' = new Image();';
        echo 'objImage_' . $i . '.src = "' . $imagesdirurl . $v . '";';
        $i++;
    }
    ?>
}

さらに画面が表示するまで時間がかかるようになったので、ベタで表示する方法に変更するかも。