Question

我正在寻找一种向lightbox2脚本添加进度指示器的方法。我的JS非常糟糕，我需要提示从哪里开始。

我假设我需要重写Image类原型，添加像onprogress这样的方法。这是很好的描述here

但是当我在脚本开头添加这些方法时，它们根本不会运行。我尝试将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];

将进度条添加到lightbox2

0 个答案: