img要素のonloadを動的に設定する際の挙動について
全ての<img>
のロードが完了した時点で処理をしたい、といった質問の回答において、$.Deferred
を使った例が挙げられています。
(以下 https://ja.stackoverflow.com/questions/6086#comment5088_6127 よりコードを引用)
$.fn.all_loaded = function () {
var all_done = new Array();
this.each(function () {
if ( this.complete || this.readyState === 4)
return;
var promise = new $.Deferred();
all_done.push(promise);
this.onload = function () {
promise.resolve();
}
});
return $.when.apply($, all_done);
};
$('.images').each( function(i, holder) {
$(holder).find('img').all_loaded().done(function() {
if( holder.onload) holder.onload.call( holder);
});
});
このコードではcomplete
やreadyState
を用いたロード済みチェックを行った後にonloadイベントの設定を行っていますが、この間にロードが完了することでonloadが呼ばれない可能性はないのでしょうか。
試しにonloadイベントを設定する直前にダミーループを仕込んで時間をかけさせてみたところ、きちんとイベントは発火しているようなのですが、規格上の根拠がないものかと探しています。
// IE8では画像がキャッシュされている際に後から設定したonloadが呼ばれないという話が
// あるようなので、逆にそれ以外では後から設定しても呼ばれるのが通例のような気はしますが。。