Question

javascript的onload回调问题

正在学习javascript，看到一段代码
var img=new Image();
img.onload=function(){
ctx.drawImage(img,100,100);}
img.src='images/sprites.png';
书上有一段解释“在试图把图像绘制到上下文中之前，代码会先等待onload回调，然后在设置回调之后设置src。这一顺序非常重要，因为若掉转了这两行代码的顺序，图像就会被缓存”
1、没明白为什么要这么做？既然用了 new Image（）不就是为了缓存图像的吗？
2、src放在后面了，为什么执行drawImage（）的时候没有报错，而图像能正常显示出来？
3、img.onload回调到底是什么意思？和一些JS书中提到的回调函数是什么关系？
请高手不吝赐教！

Answer 1

1、 new Image()只是建立一个Image对象，在给src属性赋值之前，图像并没有加载到内存，所以是不会缓存图像的。
2、drawImage()是放在img的onload事件中执行的，也就是说它不是立即执行的，而是等待img的onload事件发生后（也就是img中的图像被加载到内存后）才执行的。这就好比埋地雷，埋完地雷后地雷是不会立刻爆炸的，埋地雷的人可以紧接着去做其他事（比如去其他地方继续埋雷），只有达到触发条件（比如敌人踩上去了）地雷才会爆炸。表面上埋地雷的动作是发生在前面的，但实际的运行结果（爆炸）却是发生在后面的。程序里也一样，表面上drawImage()是放在给src赋值之前，但它实际上是在src赋值之后才运行的。
3、img.onload严格来讲并不叫回调，而是一个事件过程，就是说当这个事件（onload）发生了，它里面的代码才会执行，而如果事件没发生，那么代码是不会主动运行的。事件过程是面向对象编程的一个主要的逻辑结构，比如说鼠标点击（onclick）就是一个很常用的事件，点了鼠标就执行某个操作，而不点鼠标的时候，代码即使放在那里它也不敢擅自运行的。

Answer 2

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest，如：
//省略其他代码
request.onreadystatechange=function() // 状态改变回调函数
{
  // 判断 request.readyState==4 的效果等同于 onload 
  if(request.readyState==4 && request.status==200)
  {
    // 加载且响应正常完成后执行的代码.... 
  }
}
request.open("GET",url,true); // 打开对象，也可以说是设置参数
request.send(); // 发送请求
还有一些误解需要澄清一下，window.onload 回调函数其实是在页面加载完成后（包括图片内容的显示）才会执行，并不是页面加载的等待过程中就执行。request.open() 并没有发送请求，只是设置一些参数，在 send() 时才会发送（注意不要漏写这条语句），发送后就会进入 readyState 监听状态，当 readyState 的值有改变就会执行 onreadystatechange 回调函数，当异请求的步数据接收完成（即 readyState 变为 4）后就会执行 onload 回调函数（注意仅在 XHR2 中有效）。希望可以帮到你！

Answer 3

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest

Answer 4

下次vvvv

Answer 5

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest，如：

//省略其他代码

request.onreadystatechange=function() // 状态改变回调函数