画像をリサイズしてロードした時のサイズ取得の確認

imgタグのsrc属性を書き換えることにより画像を差し替えることができるが、このとき画像のサイズ(width, height属性)を変更すると、画像を差し替えたとき正しいサイズで表示されないという問題が発生した。

一つ目の問題は、画像のリロードはJavascriptの実行と並行して行われるためJavascriptの実行上は画像の差し替えが終わっていても実際には画像は未だロードされていないためサイズが正しく取得できないという問題であるが、これは画像のonloadイベントにサイズ取得後の処理を記述することによって回避できる。(従って、ユーザのアクションによって起動される画像差し替えの処理と、サイズ取得後の処理を別個のイベントハンドラとして記述することになる。)

二つ目の問題は、IE5で発生した問題でNN6では発生しない問題だが、imgタグのwidth, height属性を変更した場合は画像を差し替えても、これらの属性は保存され、差し替え後の画像のサイズが元の画像のサイズになってしまう問題で、これはおそらくwidth, height属性はsrc属性と独立した属性という扱いでありsrc属性の変更がwidth, height属性には影響を与えないという仕様になっているためと思われる。これらの属性をリセットすることができればよいのだが、どうも簡単にはできないようである。
そこで少々乱暴だがimgタグそのものを一旦削除して再作成するという方法をとった。
この方法以外には、width, height属性を書き換えない別のimgタグをhiddenで非表示にしておいてそのimgタグの属性を元に表示用のwidth, height属性を書き換えるという方法もある。ただし、hiddenにしても画面上の領域は確保されるのでページの末尾など他の表示に影響を与えないところに配置する必要がある。(display属性をnoneにした場合はwidth, heightも0になっているのか正しい値がとれませんでした。)

三つ目の別の問題は、今回は影響はないのですが、width, height属性を変更してサイズを変更する際、どちらか一方の属性を書き換えると他方も書き換わってしまうという問題です。ある固定のサイズにリサイズするために幅、高さを別々に指定したいような場合は困ります。別個に指定をすると不思議な動きをします。例えば、幅を半分にしてから、高さを3分の1にすると、幅は半分、高さは半分のさらに3分の1になります。実行する順番を逆にして高さを3分の1にしてから、幅を半分にすると、高さは3分の1、幅は3分の1のさらに半分になります。これはIE5, NN6両方ともそのような動きをするので仕様だと思うのですが...