Javascript Image.onload callback à la fonction de l'objet

Question

Cela me rend fou - j'ai été rond en rond, et ce n'est pas une joie. Je charge plusieurs images dynamiques, et j'ai un objet Javascript simple que j'instancie pour chaque image, et qui a un rappel pour rendre l'image une fois qu'elle a été chargée de manière asynchrone. J'ai vérifié que le code de rappel fonctionnait bien de manière autonome (je peux appeler le rappel manuellement après le chargement de l'image et l'image est correctement rendue), et j'ai vérifié que l'image elle-même est chargée avec succès (en basculant le rappel de l'objet pour une simple fonction de journalisation sur une ligne), mais lorsque j'essaie de lier le tout, le rappel n'est apparemment jamais invoqué. Je suis relativement nouveau à JS et je soupçonne qu'il me manque quelque chose de fondamental sur la façon dont les fonctions dans les objets sont définis, mais malgré beaucoup de Google, je ne sais pas quoi.

S'il vous plaît quelqu'un peut-il me montrer l'erreur de mes façons?

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

Vous avez deux problèmes: d'abord, this.onload n'est pas défini au point où vous attribuez à l'image. Vous pouvez résoudre ce problème en ignorant l'étape de stockage de la fonction de gestionnaire onload en tant que propriété de this. Le deuxième problème est que lorsque la fonction de gestionnaire onload est appelée, this n'est pas définie à ce que vous pensez qu'il est (en fait, il s'agit d'une référence à l'objet Image qui vient de charger). Vous devez stocker une référence à l'objet ImageHolder actuel et l'utiliser au lieu de this dans la fonction de gestionnaire d'événements.

Nouveau code:

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;