jQuery メモ - 画像のプレロード

画像 URL が入った配列があるとする

var images = ['url1', 'url2', ...];

これを表示するとき、1枚ずつではなく、全ての画像のロードが終わってから表示したい。
たとえば div#gallery 内にリストで表示する場合、

var $ul = $('<ul/>').appendTo('div#gallery');

var count = 0,
    limit = images.length;

$.each(images, function (i) {
  var $li = $('<li/>').hide().appendTo($ul);
  $('<img/>').load(function () {
    ++count;
    if(count === limit) {
      $ul.children().show();
    }
  }).attr('src', images[i]).appendTo($li);
});

こんな感じでできた。