IE6设置Image.src的bug

这个问题我现在也没彻底搞懂。网站有一块需要建立一个Image对象,设置好src属性,onerror和onload属性,然后把Image添加为div的子元素,交给浏览器去请求图片并渲染(请看p.s.)。用其他浏览器都很正常,但用IE6浏览器访问,虽然能得到图片,但服务器的日志里会报错,第一个Exception是Connection reset by peer,第二个是多次调用response.getOutputStream()或getJspWriter()。
上了调试器,发现一次图片的调用,服务器会在入口函数的断点停留两次,说明浏览器发出了两次请求。用Fiddler看各次请求的内容,居然再也无法重现错误了。换用HttpWatch,终于重现了错误。每次图片的调用都会有两个请求,第一个请求发出后马上被掐掉(Aborted),然后接着发出第二个请求。这解释了为什么会抛Connection reset by peer的异常。第二个异常的原因,估计是当浏览器的reset请求到达服务器时,服务器的代码已经完成了生成图片的工作,并把图片塞进了response,这个时候抛来一个异常,被forward到error.jsp,于是乎二次调用了getJspWriter,报错。
网上搜了搜这个问题,有少许提到这个bug。我的解决方法很简单,就是在image append到div之后,再设置src属性。经测试解决了IE6的Aborted问题,其他浏览器,如IE7,FF3和Chrome都没什么影响。
p.s. 后来看到玉伯的博客,发现Image对象在设置了src对象以后就马上请求图片,并不等到被添加到DOM上再请求,因为Image本来就是用来做图像预加载的。所以原本的代码就有一些错误,应该先设置onerror和onload属性后,再设置src才有意义。
p.s.2 这里是一篇描述了IE中Aborted的文章,推翻了不少本文的无妄猜测。
p.s.3 经我第三次的测试,发现IE6中如果先设置image.src在appendChild,会出现Aborted问题,相反顺序则没有问题。

One thought on “IE6设置Image.src的bug”

  1. 要是上午看到这篇文章,我就不用花费一天的时间来找问题了~~谢了

Leave a Reply

Your email address will not be published.