Asset Manager Javascript

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);

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí