Я искал способ добавить индикатор выполнения в скрипт lightbox2. Мой JS довольно плохой, и мне нужна подсказка, с чего начать.
Я предполагаю, что мне нужно переписать прототип класса Image, чтобы добавить такие методы, как onprogress. Это хорошо описано здесь
Но когда я добавляю эти методы в начале скрипта, они вообще не работают. Я попытался вставить console.log() в один из них, ничего не зарегистрировано, они просто не выполняются.
См. комментарии в коде ниже. Что именно я делаю неправильно, пожалуйста?
//start of the original lightbox.js
//this is the code I've inserted, you can see I've added
//multiple console.log()s here just to check if methods called
Image.prototype.load = function(url){
console.log('1');
var thisImg = this;
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open('GET', url,true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
var blob = new Blob([this.response]);
thisImg.src = window.URL.createObjectURL(blob);
console.log('2');
};
xmlHTTP.onprogress = function(e) {
thisImg.completedPercentage = parseInt((e.loaded / e.total) * 100);
console.log('3');
};
xmlHTTP.onloadstart = function() {
thisImg.completedPercentage = 0;
console.log('4');
};
xmlHTTP.send();
console.log('5');
};
Image.prototype.completedPercentage = 0;
//original script continues from here
....
//here imgPreloader declared, I assume it inherits methods from
//rewritten Image's prototype above
var imgPreloader = new Image();
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
//preloader's src changes and his methods should execute here
//but they don't
imgPreloader.src = this.imageArray[this.activeImage][0];