Приятная загрузка ресурсов для canvas
 

В объекте "resource" перечисляются ресурсы для загрузки в формате: ДИРЕКТОРИЯ: [список файлов]. И сразу же можно вызывать ресурсы через точку - ДИРЕКТОРИЯ.имя_файла.

var resource = {
  IMG: ['man', 'woman'],
  BG: ['main', 'level']
};

И можно сразу пользоваться:

IMG.man

Скрипт:

function loadImg(resource) {
  for (key in resource) {
    window[key] = {};
    var dir = resource[key];
    for(var i = 0; i < dir.length; i++){
      window[key][dir[i]] = document.createElement('img');
      window[key][dir[i]].src = "images/" + key + '/' + dir[i] + ".png";
    }
  }
}

Еще из плюсов - возможность легко определить, когда загрузятся все ресурсы.
:)

На прошлой неделе писал класс, который работал с canvas.
Изображения так подгружал:

/**
 * @param {string} path
 * @return {Promise}
 */
AddressConstructor.prototype.loadImage=function(path){
	const That=this;

	return new Promise(function(resolve,reject){
		const ImageID='Constructor-image';
		let elem=document.getElementById(ImageID);
		if(!!elem)
			elem.parentNode.removeChild(elem);

		elem=document.createElement('img');
		elem.style.cssText='position:absolute;top:-9999px;left:-999999px;';
		elem.src=path;
		elem.addEventListener('load',function(){
			elem.parentNode.removeChild(elem);
			setTimeout(resolve,10,this);
		});
		elem.addEventListener('error',function(){
			elem.parentNode.removeChild(elem);
			reject(this);
		});

		document.body.appendChild(elem);
	}).then(function(image){
		That.__image=image;

		return image;
	});
};

Прикольные варианты, спасибо.
Не знал про document.createDocumentFragment().
Rise, да, что-то торможу... Этот скрипт не дает никаких преимуществ в плане узнать, когда закончится загрузка. Надо делать как в вашем примере через onload или как у Nexus. Буду пробовать!

Преимущества только в простоте использования:

var resource = { IMG: ['man', 'woman'], BG: ['main', 'level'] };

Попробую допилить, сохранив эту простоту и будет огонь)

Rise, и правда.
Спасибо, не знал об этом.

Весьма неплохо