IE下img标签error事件的兼容性问题

1、简介

现需在一个html页面中显示一张图片，这张图片的地址是通过GET方式从地址栏中传入的。但是如果图片损坏或传参错误，在部分浏览器下会出现破裂图，所以当遇到这种情况则将图片隐藏掉。

地址示例：http://example.com/test.html?s=1.jpg

据此要求编写的初始代码如下（代码中的两个console用于后续的测试）：

HTML

var imgSrc=GetUrlParams().s||""; // GetUrlParams是用来获取url中的参数的，参数名为s

var img=document.getElementById("image");

if (imgSrc) {

    img.src=imgSrc+"?t="+Math.random();

    console.log('block');

    img.style.display='block';

}

2、问题

当用上述代码在各浏览器中进行测试时，发现在IE下图片无法显示，但从开发者工具中可以看到图片是正确请求了。其它浏览器（Chrome、Opera、FireFox、Safari）表现符合预期。

之后我对IE做了一些测试，测试内容如下：

1）当不传参数时，img的error事件会被触发，控制台输出none，这一点跟其它浏览器一致；

图2-1 IE·不传参

2）当传参时，其它浏览器均不触发error事件，只有IE会触发；

图2-2 IE·传参

按照浏览器的加载原则，图片会在其它所有代码之后加载，所以页面先获取到了图片地址参数并更新到了img标签上，然后才去加载图片。也就是说，当加载图片时，图片的地址已经是最终的那个传参了，理论上是不应该触发error事件的。

IE这个行为比较奇怪。经过一番琢磨后，我猜想IE是不是在自上而下读到img标签处时，虽然没立即加载图片，但是却把图片的地址添加到了后续的计划任务中，就好像打印机那样，然后在其它代码加载完之后陆续请求了这些地址（就像是请求了一个地址数组[“”,”1.jpg”]）。为了验证这一猜想，我做了如下的一番测试：

① 编写了一个新的页面，功能是在初始化时，通过循环多次修改img的src属性，然后观察IE是否会对所有赋值都发起请求。

HTML

var img=document.getElementById("image");

var imgArr=["1.jpg","favicon.png","loading.gif"];

for (var i = 0; i < imgArr.length; i++) {img.src=imgArr[i]+"?t="+Math.random();}

测试后发现，IE的确请求了数组中所有的地址，但在变更img的src的过程中，被废弃的那些图片地址都显示挂起，应该是被中断掉了。