Добавить индикатор выполнения в лайтбокс2

Я искал способ добавить индикатор выполнения в скрипт 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];

person JackHammer    schedule 07.04.2016    source источник