Javascript Image.onload callback to object function

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;