Загрузчик картинок
Может кому пригодится) и сэкономит 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')//имя интерфейса
|
действительно не понимаю, "зачем так сложно". обьясни, пожалуйста.
я бы сделал загрузчик картинок таким :
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, время: 14:51. |