Javascript Image.onload обратный вызов для функции объекта

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;