06.06.2018, 07:53
|
|
Профессор
|
|
Регистрация: 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";
}
}
}
Еще из плюсов - возможность легко определить, когда загрузятся все ресурсы.
|
|
06.06.2018, 10:10
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от void()
|
возможность легко определить, когда загрузятся все ресурсы.
|
А как определить? То что мы инициализировали источник, еще не значит что он загрузился.
|
|
06.06.2018, 10:32
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Откопал старую тему, там я preload простенький реализовал, можно посмотреть.
Последний раз редактировалось Rise, 06.06.2018 в 10:34.
|
|
06.06.2018, 10:38
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
На прошлой неделе писал класс, который работал с 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;
});
};
|
|
06.06.2018, 10:40
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Плюс MDN нам еще предлагает такую вещь делать:
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
Последний раз редактировалось Rise, 06.06.2018 в 10:43.
|
|
06.06.2018, 17:50
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Прикольные варианты, спасибо.
Не знал про document.createDocumentFragment().
Rise, да, что-то торможу... Этот скрипт не дает никаких преимуществ в плане узнать, когда закончится загрузка. Надо делать как в вашем примере через onload или как у Nexus. Буду пробовать!
Преимущества только в простоте использования:
var resource = { IMG: ['man', 'woman'], BG: ['main', 'level'] };
Попробую допилить, сохранив эту простоту и будет огонь)
|
|
06.06.2018, 18:28
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Nexus,
К чему эти кульбиты с appendChild/removeChild, вроде только <iframe> и <script> нуждаются в окружении, чтобы src начал работать, или нет?
|
|
06.06.2018, 19:16
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
Rise, и правда.
Спасибо, не знал об этом.
|
|
06.06.2018, 20:06
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Nexus,
Потестил ради интереса
audio = document.createElement('audio'), audio.src = 'audioSrc';
embed = document.createElement('embed'), embed.src = 'embedSrc';
iframe = document.createElement('iframe'), iframe.src = 'iframeSrc';
img = document.createElement('img'), img.src = 'imgSrc';
input = document.createElement('input'), input.type = 'image', input.src = 'inputSrc';
script = document.createElement('script'), script.src = 'scriptSrc';
source = document.createElement('source'), source.src = 'sourceSrc';
track = document.createElement('track'), track.src = 'trackSrc';
video = document.createElement('video'), video.src = 'videoSrc';
source1 = document.createElement('source'), source1.src = 'sourceSrc1';
track1 = document.createElement('track'), track1.src = 'trackSrc1';
video1 = document.createElement('video'), video1.appendChild(source1), video1.appendChild(track1);
// Network:
// - audioSrc, imgSrc, videoSrc, sourceSrc1 (Chrome, Opera, Yandex)
// - audioSrc, imgSrc, videoSrc, sourceSrc1, inputSrc, trackSrc1 (Firefox)
// - audioSrc, imgSrc, videoSrc, sourceSrc1, inputSrc, scriptSrc (IE)
|
|
14.06.2018, 10:28
|
Аспирант
|
|
Регистрация: 05.06.2018
Сообщений: 36
|
|
Весьма неплохо
|
|
|
|