javascript - How to implement clean method that tell all images of my object have been loaded? -

here code "myobject"

function createcontext(width, height,img) {     var canvas = document.createelement('canvas');     canvas.width = width;     canvas.height = height;     if (img1!=null)         canvas.getcontext("2d").drawimage(img,0,0);     return canvas.getcontext("2d"); }  var myobject = function (){     var self = this;     this.width = squarewidth*5;     this.height = squareheight*5;     this. x = 0;     this. y = 0;     this.draw = draw;     function draw(ctx,x,y){         imgdata = self.ctx.getimagedata(0,0,self.width,self.height);         ctx.putimagedata(imgdata,x,y);     }     this.compute = compute;     function compute(){         self.ctx.drawimage(self.img2,(self.width-self.img2.width)/2+self.x,(self.height-self.img2.length)/2+self.y);     }      img1 = new image();     img1.src = "img1.png";     img2 = new image();     img2.src = "img2.png";     img1.onload = function (){         img2.onload = function (){             self.ctx = createcontext(self.width, self.height,self.img1);             self.compute();         }     } } 

maybe use handler tell images have been loaded ?

if using jquery try when supports behaviour or done.