我想在图片无法成功加载时显示自己的错误图片。
我想到了一个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中。
答案 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();