javascriptで生成されたIMG要素のブラウザに依る挙動の違い

難しくないと思っていたのだけど、結構面倒くさい問題に取り組んでいることにようやく気づいた。

IMG element loading timing

Gallery みたいなサイトを作ろうとしている。画像は javascript に file path を配列で渡して、window.onload イヴェントで要素を追加していく。画像ファイルの大きさによって、挙動をかえるつもりだったのだが、Safari だけ画像の大きさをちゃんと読んでくれない。

正確には例えば <img src="***" id="testimg" /> みたいな要素を生成し document.body （かそれ以降）に挿入する。Firefox, Opera だと、その要素に width / height 属性を振っていなくても、$('testimg').width みたいなアクセスができるけど、Safari だと 0 が帰ってくる。

悩んだ後、document.images 配列だと Safari でも、width / height の属性値が自動的に補完されるようなので、そっちを使おう、と。で、一番上の問題というか、実装に気がついたというわけです。

• Firefox は、img が生成された瞬間に、src 属性を参照しにいって、メモリに溜め込んでいます。
• Opera, Safari, IE は img に view がついた時に src 属性を参照するようです。

って常識なんでしょうか。ちなみに Opera は自動補完される width / height 属性の値が間違っている時がありました。が、再現性が低いので、とりあえず保留にしておきます。