Загрузчик картинок
Может кому пригодится) и сэкономит 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, время: 07:03. |