Question

这让我疯了 - 我已经四处转圈，这没什么好笑的。我正在加载多个动态图像，并有一个简单的Javascript对象，我为每个图像实例化，并且一旦异步加载，它就有一个回调来渲染图像。

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

我对JS比较陌生，我怀疑我遗漏了一些关于对象内部函数定义方式的基本信息，但是尽管有很多Google搜索，却无法解决问题。

请有人告诉我我的错误吗？

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;

Javascript Image.onload回调到对象函数

1 个答案: