jQueryを使ったイメージのロードについて

画像を沢山読み込んでいると、表示までに時間がかかったり、読み込みながらページが形成されて、ガタガタと忙しなく動いて表示されることがよくあります。
そんな時は、「イメージをロードしてから処理」をjQueryで実現する。

// 画像のプリロード
var $img = $('<img>');
$img.attr('src', '画像のURL');
$img.on('load', function() {
	//完了後の処理
});

これが基本の書き方のようです。
外部JSONファイルなどに写真のリストがあって、そこから写真のデータを表示させるには、

$.getJSON('JSONのURL', function(data) {
	var outputHTML = '',
		len = data.length,
		loadedImgs = 0;
	
	/* Json Data ========== */
	for (var i in data) {
		var $img = $('<img>');
		$img.attr('src', data[i].image);
		$img.on('load', function() {
			loadedImgs++;
			checkImageLoaded();
		});
		
		// HTML生成
		outputHTML += '<li>' + $img + '</li>\n';
	}
	
	/* ロードした画像の数をチェック ========== */
	function checkImageLoaded() {
		if (loadedImgs >= len) {
			// 生成したHTMLを指定の場所に追加
			$('ul#imageList').html(outputHTML);
		}
	}
});

という感じ。かなりアナログ的ですが・・・。
underscore.jsやlodash.jsなんかを使うともっとシンプルに書けるのかな？