How to set error image for all images on page?

Question

I would like to show my own error image when an image cant load successfully.

I thought of a JavaScript function:

<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>

But this doesn't work. This turns every image on the page into my own error image.

Is there another simple way to show my own error image on error?

Or is there another way to bind a function to an event like i did on line 4? Because I'm pretty sure the script fails on that line.

Solution may be in jQuery.

possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) — Jay Blanchard, Apr 30 '14 at 13:05
@JayBlanchard, That question has on every img in the html an onerror. I would like to avoid that. — Liontack Lightning, Apr 30 '14 at 13:11
@BrokenHeart, I retrieve only images, why should i check again? — Liontack Lightning, Apr 30 '14 at 13:11

score 3 · Accepted Answer · answered Apr 30 '14 at 13:05

3

It should be i guess:

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

answered Apr 30 '14 at 13:05

A. Wolff

74,033
9
94
155

score 0 · Answer 2 · edited Apr 30 '14 at 13:38

There are a lot of ways to do this, I will show you one of them :

You can make all of your images with "fake-src" and load them when the document is ready. Of course you can make a loader till they are downloading. Here is a function I write for you:

    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();

How to set error image for all images on page?

2 Answers2