Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Загрузчик картинок (https://javascript.ru/forum/misc/24828-zagruzchik-kartinok.html)

Livanderiaamarum 15.01.2012 16:03

Загрузчик картинок
 
Может кому пригодится) и сэкономит 15 минут)
Контейнер для картинок, в чем суть:
Принимает хэш с именами картинок и адресами, вторым аргументом принимает калбак по истечении загрузки всех картинок.
Получить картинку можно так image('имяКартинки')
Хранилище для всех картинок общее, и каблак общий.
Если добавить картинку с уже имеющимся именем, то она перезаписывается.

работает так:
image('текстура дерева', '/img/wood.jpg', function(){ alert('загрузилось!') })
var wood = image('текстура дерева')

или так:
image({'дерево' : '/img/wood.jpg',
'трава' : '/img/trava.jpg'},
function(){ alert('обе текстуры загрузились!') }
)


/**
 * Xранилище картинок
 * 
 * @memberOf images
 */
(function(functionName) {
	// контейнер с картинками
	var imagesContainer = {},
	// счетчик загружающихся картинок
	counter = 0,
	// требуется загрузить картинок
	length = 0,
	// калбак
	callback;

	/**
	 * Обработчик события загрузки картинок
	 */
	function onload() {
		// прибавить счетчик
		counter++
		log(imagesContainer)
		log('counter ' + counter)
		log('length ' + length)
		// если загружены все картинки вызвать калбак
		if (counter === length) {
			// обнулить счетчики
			counter = 0
			length = 0
			return callback && callback()
		}
	}

	/**
	 * Добавить картинку в хранилище
	 * 
	 * @param {String}
	 *            name имя картинки
	 * @param {String}
	 *            url адрес
	 */
	function add(name, url) {
		var img = new Image()
		img.src = url
		// при загрузке картинки
		img.onload = onload
		// засунуть в контейнер
		imagesContainer[name] = img
		// прибавить общую длину картинок
		length++
		return true
	}
	/**
	 * Интерфейс модуля
	 * 
	 * @module images
	 */
	window[functionName] = function(imagesHash, call) {

		// если передана одна строка
		if (arguments.length == 1 && typeof arguments[0] == 'string')
			return imagesContainer[imagesHash];

		// если передан обьект
		if (typeof arguments[0] == 'object') {
			// если вторым аргументом передан калбак
			if (typeof arguments[1] == 'function') {
				// то зафиксировать его
				callback = call
			}
			// добавить картинки
			for (i in imagesHash) {
				add(i, imagesHash[i])
			}
		}

		// если переданы 2 строки
		if (typeof arguments[0] == 'string', typeof arguments[1] == 'string') {
			// добавить картинку
			add(imagesHash, call)
			// если третьим аргументом передан калбак
			if (typeof arguments[2] == 'function') {
				// то зафиксировать его
				callback = arguments[2]
			}
		}
	}
})('image')//имя интерфейса

melky 15.01.2012 17:21

действительно не понимаю, "зачем так сложно". обьясни, пожалуйста.

я бы сделал загрузчик картинок таким :
load( ['/img/wood.jpg', '/img/trava.jpg'], function(){ alert('обе текстуры загрузились!') });

function load(imgs, clb){
    var a = new Image(), // чтобы каждый раз не создавать объект.
         i = 0;                 
    while(i in imgs) a.src = imgs[ i++ ]; // загружаем в кеш картинки
    clb && clb(); // ну  это ты знаешь :)
};


Часовой пояс GMT +3, время: 10:22.