Asset Manager Javascript

A veces necesitamos esperar a que se carguen imágenes para poder realizar alguna acción, como animaciones en canvas. Como es una tarea que se repite muchas veces y no siempre es fácil de controlar aquí dejo una función que os ayudará.

	function ImageManager() {
		this._queue = [];
		this._count = 0;
	}
	ImageManager.prototype.add = function (url) {
		if (url instanceof Image) {
			var url = url.src;
		}
		this._queue.push(url);
	}
	ImageManager.prototype.waitForAll = function (callback) {
		var self = this;
		for (var i=0; i<this._queue.length; i++) {
			var url = this._queue[i];
			var img = new Image();
			img.onload = function () {
				self._count++;
				if (self._count == self._queue.length) {
					callback();
				}
			}
			img.src = url;
		}
	}

Lo que hace esta función es crear una cola de imágenes y un contador inicializado a 0. A medida que una imagen se carga el contador aumenta y cuando alcanza el valor del número de imágenes en cola se llama a la función "callback".

El uso es muy sencillo. Iremos añadiendo las imágenes que necesitemos que estén precargadas y cuando ya las tengamos todas llamaremos al método waitForAll pasándole como parámetro una función que será la que comenzará con nuestro código. Al método add le podemos pasar tanto las rutas de las imágenes como un objecto Image.

	var init = function () {
		// Aquí irá nuestro código principal
	}
	
	var im = new ImageManager();
	im.add('image1.png');
	im.add('image2.png');
	var img = new Image();
	img.src = "image3.png";
	im.add(img);

	im.waitForAll(init);