如何为页面上的所有图像设置错误图像？

我想显示自己的错误图像，当图像不能成功加载。如何为页面上的所有图像设置错误图像？

我想到了一个JavaScript函数：

<script type="text/javascript"> 
var images = document.getElementsByTagName("img"); 
for (var i = 0; i < images.length; i++) { 
    images[i].onerror = onErrorImage(images[i]); 
}  
function onErrorImage(element){ 
    element.onerror = null; 
    element.src = 'errorImage.png'; 
} 
</script>

但是，这是行不通的。这会将页面上的每个图像转换为我自己的错误图像。

有没有另一个简单的方法来显示我自己的错误图像的错误？

或者有另一种方法来绑定一个函数，像我在第4行那样的事件吗？因为我非常确定该脚本在该行上失败。

解决方案可能在jQuery中。

来源

2014-04-30 Liontack Lightning

你不应该等待DOM准备好吗？ – mehulmpt

[jQuery/Javascript替换破碎的图像]的可能重复（http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images） –

@JayBlanchard，这个问题已经在每个img中html一个错误。我想避免这种情况。 –

它应该是我猜：

images[i].onerror = function(){onErrorImage(this);}

来源

2014-04-30 13:05:16

这解决了它，令人惊讶的是，感谢A.沃尔夫。 –

有很多方法可以做到这一点，我会告诉你是其中之一：

你可以让你的所有图片与"fake-src"和负载他们在文件准备好时。当然你可以制作一个装载机，直到他们下载。这里是我为你写的一个函数：

imagesReady = function() { 
    var myImgs = document.getElementsByTagName("img"); 
    for (var i = 0; i < myImgs.length; i++) { 
     getImageReady(myImgs[i]); 
    }; 
    function getImageReady(el) { 
     var url = el.getAttribute("src-fake"); 
     var image = document.createElement("img"); 
     image.onload = function() { 
      el.src = url; 
      el.style.opacity = 1; 
      //this image is ok, that why we put his src to be the fake src 
     }; 
     image.onerror = function (err) { 
      console.log("err on load :"+image.src); 
      el.src = url; 
      //this image fail! 
     } 
     image.src = url; 
    } 
} 
imagesReady();

来源

2014-04-30 13:22:11 Tsoko

如何为页面上的所有图像设置错误图像？

回答

相关问题