远程图像无效加载怎么办？
kevin.Zhu 发布于：2013-1-16 1:23 分类：JS 有 19 人浏览，获得评论 0 条
通常给我们用来显示广告栏的代码都是从广告商的页面远程加载的图像。这是为数不多的我们会想实际加载远程图像的情况，因为这允许广告商将他们的广告图像进行适当更改而不需要我们进行任何操作。
当他们的页面出现任何问题时，会出现一个问题，因为我们的页面原本应该显示某个图像的地方会出现空白。这样就有损美观。那么在远程图像无法有效加载时我们要怎样才能知道，又该怎么办呢?
IE支持载入错误事件处理器，该事件可以在图像无效加载的时候被触发。遗憾的是这是唯一能支持这一事件的浏览器。在图像完成加载时，image.complete属性设定为真值。如果图像无效加载，大多数浏览器会认为这是个错误，但是基于Mozilla的浏览器如，Netscape和Firefox仍然会设定其为真。我看过许多能提供一小部分解决方案的网站，但是却没有一个能为此提供一个适用于所有浏览器的完整解决方案。
将下面的这段代码加入你页面的标头中就可以解决这个问题，它会在加载后为每个图像制作一个副本，然后测试图像副本的宽度。如果宽度是零则图像属于无效加载，而它会从你的页面中找到可以替代的其他图片。
|
function failsafeImg(){
var badImg = new Image(); badImg.src = 'graphics\/myimg.gif'; for(var i=0;i var cpyImg = new Image(); cpyImg.src = document.images[i].src; if(!cpyImg.width){ document.images[i].src = badImg.src; } } } onload = failsafeImg; |
注意每个图像副本的制作，因为你页面中的原始版本需要指定宽度的属性，这样既符合HTML标准，而且，如果你使用的透明1*1gif图像作为替代，它就会合适地进行宽度的变化。如果我们测试过原声图像就会知道其宽度是多少。如果我们只复制image.src，那么副本的宽度就是图像本身的宽度，而不是页面定义的宽度。
你也可以改变代码以展示不同的图像