这个地方的代码，老师写的有些问题。我来给你解释一下。

第一，img.src="xxx.jpg"这行是给Img赋值，而img.onload=function(){...}只是给Img加上了一个事件，这两行代码的前后顺序没有关系的。因为事件只是给这个元素订阅了一个事件方法，但是你并没有触发这个事件，只有当img.src被赋予了值并加载了这张图片的时候才会触发Onload事件。这个应该很好理解。比如你订阅了某一期的报纸，当这一期报纸被印刷出来后就给你发消息。但是这个时候并没有完成印刷，难道你叫印刷厂给你发消息有问题吗。

第二，老师赋值高度和宽度的变量是canvas.getContext("2d")这个地方是错误的，应该是给画布定义宽度高度，也就是canvas。同时宽高值也不应该使用this.height, this.width，因为我们知道这里的this代表的是图片Img对象，而图片的宽高并不是我们计算出来的图片应该显示的宽度和高度，应该使用前面计算的picWidth. 所以onload函数应该是

var canvas=$("#canvas"+this.index); 
var context=canvas.getContext("2d");
canvas.width=picWidth;
canvas.height=picHeight;
context.drawImage(img, 0 , 0);

感觉实际上是他讲解的逻辑先后的问题，imageObj.src 应该在前面赋值，就好理解了。onload方法是加载的时候的回调函数

我针对这块也不是很理解，希望老师能够出来指点一下