Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.06.2018, 07:53
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Приятная загрузка ресурсов для canvas
В объекте "resource" перечисляются ресурсы для загрузки в формате: ДИРЕКТОРИЯ: [список файлов]. И сразу же можно вызывать ресурсы через точку - ДИРЕКТОРИЯ.имя_файла.
var resource = {
  IMG: ['man', 'woman'],
  BG: ['main', 'level']
};

И можно сразу пользоваться:
IMG.man

Скрипт:
function loadImg(resource) {
  for (key in resource) {
    window[key] = {};
    var dir = resource[key];
    for(var i = 0; i < dir.length; i++){
      window[key][dir[i]] = document.createElement('img');
      window[key][dir[i]].src = "images/" + key + '/' + dir[i] + ".png";
    }
  }
}

Еще из плюсов - возможность легко определить, когда загрузятся все ресурсы.
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2018, 10:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

На прошлой неделе писал класс, который работал с canvas.
Изображения так подгружал:
/**
 * @param {string} path
 * @return {Promise}
 */
AddressConstructor.prototype.loadImage=function(path){
	const That=this;

	return new Promise(function(resolve,reject){
		const ImageID='Constructor-image';
		let elem=document.getElementById(ImageID);
		if(!!elem)
			elem.parentNode.removeChild(elem);

		elem=document.createElement('img');
		elem.style.cssText='position:absolute;top:-9999px;left:-999999px;';
		elem.src=path;
		elem.addEventListener('load',function(){
			elem.parentNode.removeChild(elem);
			setTimeout(resolve,10,this);
		});
		elem.addEventListener('error',function(){
			elem.parentNode.removeChild(elem);
			reject(this);
		});

		document.body.appendChild(elem);
	}).then(function(image){
		That.__image=image;

		return image;
	});
};
Ответить с цитированием
  #3 (permalink)  
Старый 06.06.2018, 17:50
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Прикольные варианты, спасибо.
Не знал про document.createDocumentFragment().
Rise, да, что-то торможу... Этот скрипт не дает никаких преимуществ в плане узнать, когда закончится загрузка. Надо делать как в вашем примере через onload или как у Nexus. Буду пробовать!

Преимущества только в простоте использования:
var resource = { IMG: ['man', 'woman'], BG: ['main', 'level'] };

Попробую допилить, сохранив эту простоту и будет огонь)
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2018, 19:16
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

Rise, и правда.
Спасибо, не знал об этом.
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2018, 10:28
Аспирант
Отправить личное сообщение для Shadow Посмотреть профиль Найти все сообщения от Shadow
 
Регистрация: 05.06.2018
Сообщений: 36

Весьма неплохо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
загрузка джаваскрипта file by file с номером ревизии(последней) в урле для файла sergdev Ваши сайты и скрипты 7 13.04.2010 10:52
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05