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

时间:2014-04-30 13:00:33

标签: javascript jquery

我想在图片无法成功加载时显示自己的错误图片。

我想到了一个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中。

2 个答案:

答案 0 :(得分:3)

应该是我猜:

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

答案 1 :(得分:0)

有很多方法可以做到这一点,我会告诉你其中一个:

您可以使用"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();