关于image的一些细节

今天看到Funny的一篇日志《另类Ajax--基于Cookie的Ajax》，是关于使用cookie来实现客户端和服务器端交换数据的。即使实用价值不大，但我觉得确实是一个创意爆点的想法，其中我注意到他是通过轮询到实现确认接收到数据并且调用回调函数的。个人觉得，这部分有优化的地方，我第一感觉是可以通过onload来实现，但是还是不太确认onload事件调用的时候，图片是在什么状态，于是今晚试验了一下。

var img = new Image();

img.onload=function(){alert(document.cookie)}

img.src="Handle.ashx";

Handle.ashx文件主要是输出一幅空图片，并且加上cookie的设置来向客户端传递数据。

上面的测试正如我想象那样，image的onload事件触发的时候，cookie已经被操作了。方法可行。

 

另外，我还要补充一些细节。

只要图片正确加载，onload事件才会触发，如果浏览器无法解析这张图片，onload事件也不会触发，但是，cookie的操作还是可以执行的。其实浏览器每次接收到服务器端的回应之后，应该首先还是解析Header再去处理其他内容，所以我认为浏览器只要能收到Response，Cookie操作应该就可以执行了。

但是要触发onload的条件就苛刻一点，如果原来例子需要改用onload事件，例子中php代码也必须修改成输出图片。

 

下面的细节跟上文无关。

img.src的设定必须要在onload事件设定之后，因为如果要下载的图片在缓存中，浏览器还没有执行下一句语句就已经把图片下载下来的话，onload事件可能就被无视了。详细...

如果设定了img.src下载图片B，在图片B下载完成之前，如果我们又修改了img.src，在IE浏览器中，图片B会被放弃下载。

IE中的img.onload事件调用的时候，img.complete总是为false，所以IE这个事件的可能是在图片结束下载之前触发的。对于这个问题，我网络上找到一个解决方案：onreadystatechange，这个方法主要通过使用IE特有的onreadystatechange事件来弥补上面的问题。

 

参考资料

http://hi.baidu.com/%B4%F3%D1%EE%D1%A7%C9%FA%CD%F8%CD%BC%C6%AC%BF%E2/blog/item/9d8239cb8764ae88c817683d.html