我想用prototype扩展Image()类,专门为预加载图片服务。
最初是这么实现的:
$scope.sh = 0;//最初为0,每加载一个图片加一,如果全部图片加载成功则sh=图片数量
preImage = function(/*str*/){
// this.src = pwd+str;
};
preImage.prototype = new Image();
preImage.prototype.onload = function(){
$scope.sh++;//每张图片load事件都会让sh加一
$scope.$apply();
alert($scope.sh,this.src);//调试用
};
preImage.prototype.corssOrigin = 'Anonymous';
coin = new preImage();
capture = new preImage();
coin.src = pwd+"images/coin.png";
capture.src = pwd+"images/capture.png";
gbg = new preImage();
gbg.src = pwd+"images/gbg.jpg";
camera = new preImage();
camera.src = pwd+"images/camera.png";
n1 = new preImage();
n1.src = pwd+"images/11.png";
n2 = new preImage();
n2.src = pwd+"images/12.png";
n3 = new preImage();
n3.src = pwd+"images/13.png";
bai = [new preImage(),new preImage()];
bai[0].src = pwd+"images/bai1.png";
bai[1].src = pwd+"images/bai2.png";
again = new preImage();
again.src = pwd + "images/again.png";
again.id = 'again';
info = new preImage();
info.src = pwd + "images/info-forward.jpg";
info.id = 'info';
arrow = new preImage();
arrow.src = pwd + "images/arrow-forward.png";
arrow.id = 'arrow';
score = new preImage();
score.src = pwd + "images/score.png";
score.id = 'score';
后来发现用preImage.prototype = new Image()
会造成所有preImage
的实例共用一个prototype,于是就改成了preImage.prototype = Image.prototype
。
但是这样一来我赋值的onload函数在预加载图片后都不执行了。
请问有没有可能实现这样的扩展呢?我是哪里做得有问题?
难道不应该是所有的
preImage
实例共用一个prototype
嘛?至于你提到 “改成
preImage.prototype = Image.prototype
” 后,就无法监听到图片的onload
事件了,是因为preImage.prototype.onload
重写了Image.prototype.onload
的方法。