要素内にimg要素がある時、全ての画像が読み込まれないと要素の正確な高さを計れなかったりする。そういう時のためのスクリプト。

var imagesLoadListener = (function() {

	var imageCollector = function(expectedCount, completeFn) {
		var receivedCount = 0;
		return function() {
			receivedCount++;
			if(receivedCount === expectedCount) {
				completeFn();
			}
		};
	};

	var imagesLoadListener = function(element, callback) {
		var images = element.querySelectorAll('img');
		if(images === null) {
			callback();
			return;
		}

		//画像の数だけloadListenerが呼ばれたらcallbackが呼ばれる;
		var loadListener = imageCollector(images.length, callback);
		Array.prototype.forEach.call(images, function(img) {
			if(img.complete) {
				loadListener();
			}else {
				img.onload = loadListener;
			}
		});
	};

	return imagesLoadListener;
})();

imagesLoadListenerの第一引数はimg要素を含んでいる要素を指定する。第二引数は画像が全て読み込めた時に実行する処理を指定する。例えば第一引数にdocument.bodyを指定したら、body内にあるimg要素全て読み込むのを待ってから第二引数の処理が実行される。

imagesLoadListener(document.body, function() {alert('Done!!')});

See the Pen imagesLoadListener by shigure (@webkatu) on CodePen.

すでに読み込んでいる画像はimg要素のcomplete属性で判断している。まだ画像が読み込めていないimg要素はloadイベント発火まで待つ。

第一引数の要素内に画像がない場合、第二引数の処理はすぐ実行される。

モダンブラウザのみ対応。

参考: javascript – Can I sync up multiple image onload calls? – Stack Overflow