例えば、画像を予めロードし、その画像のロード完了後に何か処理を行いたい時、img 要素の onload イベントを利用することになると思います。jQuery を使った例だと、次のようになります。
|
1 2 3 4 5 6 |
var img; img = $('<img>'); img.attr('src', 'http://...image_url...'); img.on('load', function() { // ...any processing on loaded... }); |
ところが、IE8において、画像がブラウザにキャッシュされていると img 要素の onload イベントが呼ばれないという現象があります。うむむ。これはちょっとやっかい。。。
問題解決の為にぐぐってみると次のエントリが見つかりました。
ここでは次の２つの方法が提案されています。
- キャッシュを利用しないようにする
- onload が上手く動作するように、特定のタイミングで src 属性を設定する
前者は簡単に実装できますが、そもそもキャッシュを利用しないというアプローチには抵抗があります。後者は、実装に大きな制約をもたらします。実際、ここで僕がやろうとしてたことは、画像の読み込みの抽象化（どこでも、どのタイミングでロードされても良いし、ロード完了後には適切な処理が行われて画面に画像が表示される感じ）なので、後者は検討の対象外でした。そこで「IE8 だけだし、まあいいか〜」と、やや抵抗はありつつも、前者の方法で実装を進めました。
ところが数日後、夢の中で別の解決策を思いつきました。
やってみたら上手く行きました（夢の中のPGにしてはめずらしい）。
とても単純な発想なのですが、次の方法です。同じく jQuery を使った例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function onLoad() { // ...any processing on loaded... } var img; img = $('<img>'); img.attr('src', 'http://...image_url...'); if (0 < img.get(0).width) { onLoad(); } else { img.on('load', onLoad); } |
ポイントは８行目です。
ここで、画像要素の大きさを調べています。
「キャッシュされている画像で onload イベントが発生しないなら、即座にその画像の大きさが取得できるだろう」という期待ですが、上手く行きました。キャッシュ画像がある時には、即時読み込み完了処理を行い、キャッシュ画像が無い時には11行目で onload イベントにハンドラをバインドしています。この実装だと、（たぶん）多少挙動の違うブラウザでも上手く動きそうに思っています。
以上、簡単ですが、メモ程度に。誰かの参考になれば。