javascript - 如何实现干净的方法来告诉我的对象的所有图像都已加载？

Question

这是“myObject”的代码

function createContext(width, height,img) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    if (img1!=null)
        canvas.getContext("2d").drawImage(img,0,0);
    return canvas.getContext("2d");
}

var myObject = function (){
    var self = this;
    this.width = squareWidth*5;
    this.height = squareHeight*5;
    this. x = 0;
    this. y = 0;
    this.draw = draw;
    function draw(ctx,x,y){
        imgData = self.ctx.getImageData(0,0,self.width,self.height);
        ctx.putImageData(imgData,x,y);
    }
    this.compute = compute;
    function compute(){
        self.ctx.drawImage(self.img2,(self.width-self.img2.width)/2+self.x,(self.height-self.img2.length)/2+self.y);
    }

    img1 = new Image();
    img1.src = "img1.png";
    img2 = new Image();
    img2.src = "img2.png";
    img1.onload = function (){
        img2.onload = function (){
            self.ctx = createContext(self.width, self.height,self.img1);
            self.compute();
        }
    }
}

也许使用一个处理程序来告诉所有图像已加载？

Answer 1

如果您使用 jQuery，您可以尝试 when它通过 then 或 did 支持这种行为。