Add progress bar to lightbox2

Question

I was searching a way to add a progress indicator to lightbox2 script. My JS is pretty poor and I need a hint on where to start.

I assume I need to rewrite Image class prototype, to add methods like onprogress. This is well described here

But when I add those methods at the start of the script, they don't operate at all. I tried inserting console.log() to one of them, nothing logged, they just don't execute.

See comments in code below. What exactly am I doing wrong, please?

//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];