Приятная загрузка ресурсов для 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";
    }
  }
}

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

А как определить? То что мы инициализировали источник, еще не значит что он загрузился.

Откопал старую тему, там я preload простенький реализовал, можно посмотреть.

На прошлой неделе писал класс, который работал с 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;
	});
};

Плюс MDN нам еще предлагает такую вещь делать:

// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

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

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

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

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

Nexus,
К чему эти кульбиты с appendChild/removeChild, вроде только <iframe> и <script> нуждаются в окружении, чтобы src начал работать, или нет?

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

Nexus,
Потестил ради интереса

audio   = document.createElement('audio'),  audio.src   = 'audioSrc';
embed   = document.createElement('embed'),  embed.src   = 'embedSrc';
iframe  = document.createElement('iframe'), iframe.src  = 'iframeSrc';
img     = document.createElement('img'),    img.src     = 'imgSrc';
input   = document.createElement('input'),  input.type  = 'image', input.src = 'inputSrc';
script  = document.createElement('script'), script.src  = 'scriptSrc';
source  = document.createElement('source'), source.src  = 'sourceSrc';
track   = document.createElement('track'),  track.src   = 'trackSrc';
video   = document.createElement('video'),  video.src   = 'videoSrc';

source1 = document.createElement('source'), source1.src = 'sourceSrc1';
track1  = document.createElement('track'),  track1.src  = 'trackSrc1';
video1  = document.createElement('video'), video1.appendChild(source1), video1.appendChild(track1);

// Network:
// - audioSrc, imgSrc, videoSrc, sourceSrc1 (Chrome, Opera, Yandex)
// - audioSrc, imgSrc, videoSrc, sourceSrc1, inputSrc, trackSrc1 (Firefox)
// - audioSrc, imgSrc, videoSrc, sourceSrc1, inputSrc, scriptSrc (IE)

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