Javascript Image.onload回调到对象函数

Question

这让我疯了 - 我已经四处转圈,这并不令人高兴.我正在加载多个动态图像,并有一个简单的Javascript对象,我为每个图像实例化,并且一旦异步加载,它就有一个回调来渲染图像.

我已经验证回调代码在独立的基础上工作得很好(即,我可以在图像加载后手动调用回调,并且图像被正确渲染),并且我已经验证了图像本身是成功加载(通过切换对象的回调以获得简单的一行记录功能),但是当我尝试将它们全部绑定在一起时,回调显然永远不会被调用.

我对JS比较陌生,我怀疑我遗漏了一些关于对象中函数定义方式的基本信息,但是尽管有很多谷歌搜索,但是无法解决问题.

请有人能告诉我我的方式错误吗？

function ImageHolder(aX,aY,aW,aH, anImageURL) {
    this.posx=aX;
    this.posy=aY;
    this.posw=aW;
    this.posh=aH;
    this.url=anImageURL;

    this.myImage = new Image();
    this.myImage.onload=this.onload;
    this.myImage.src=anImageURL;
    this.onload=function() {

        try {
            var d=document.getElementById("d");
            var mycanvas=d.getContext('2d');
            mycanvas.drawImage(this.myImage, this.posx, this.posy, this.posw, this.posh);
            } catch(err) {
                console.log('Onload: could not draw image '+this.url);
                console.log(err);
            }
    };
}

Answer 1

您有两个问题:第一,this.onload未在您将其指定给图像的位置定义.您可以通过错过将onload处理函数存储为属性的阶段来解决此问题this.第二个问题是当onload调用处理函数时,this没有设置为你认为它是什么(实际上,它是对Image刚刚加载的对象的引用).您需要存储对当前ImageHolder对象的引用并使用它而不是this在事件处理函数中.

新代码:

var that = this;

this.myImage = new Image();
this.myImage.onload=function() {
    try {
        var d=document.getElementById("d");
        var mycanvas=d.getContext('2d');
        mycanvas.drawImage(that.myImage, that.posx, that.posy, that.posw, that.posh);
    } catch(err) {
        console.log('Onload: could not draw image '+that.url);
        console.log(err);
    }
};
this.myImage.src = anImageURL;