Question

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

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

Answer 1

应该是我猜：

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

Answer 2

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

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

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

2 个答案: