jQuery to check image exists if head 404 than hide it

Question

Using php to get 100 photos url from a db and show them on a page, but some photos may no longer exist. If the photo url is fail (404) I want to use jquery to hide the image and don't want to show any error picture. This is my code but it doesn't work.

html

<div id=test>
    <img src="http://test.com/test1.jpg" />
    <img src=" http://test.com/test2.jpg" />
    <img src="http://test.com/test3.jpg" />
</div>

jquery

var pic_list = jQuery("#test img");

pic_list.load(function () {
    var http = new XMLHttpRequest();
    http.open('HEAD', pic_list, false);
    http.send();
    if (http.status == 404) {
        pic_list.hide();
    } else {
        pic_list.show();
    }
});

score 34 · Answer 1 · edited May 23 '17 at 12:18

34

Sending multiples ajax requests is unnecessary when you can use the onerror event.

Check out the related jQuery/Javascript to replace broken images post.

Adapting that to your needs:

HTML:

<img src="someimage.png" onerror="imgError(this);" />

JS:

function imgError(image){
    image.style.display = 'none';
}

Fiddle

Or with jQuery:

function imgError(image){
    $(image).hide();
}

I normally wouldn't use inline JS in the HTML, and even considered using an .error handler:

$('#test img').error(function() {
    $(this).hide();
});

But the above will not work if the handler attaching is executed after the error event has fired, hence I suggest the first solution.

edited May 23 '17 at 12:18

Community

1
1

answered Oct 21 '12 at 02:42

Fabrício Matté

69,329
26
129
166

Much better solution. I had completely forgotten about onerror, it's perfect for this. +1 – sachleen Oct 21 '12 at 02:57
Thanks. `=]` I'm trying to find a fully unobtrusive `.error` handler solution by adding a `.each` iteration and checking if the images had fired the error event already, but I couldn't find any `hasError` flag or such yet, mhm. – Fabrício Matté Oct 21 '12 at 03:00
Hello~ Thanks for your help! I use your unobtrusive .error handler solution that can hide the nonexistent but it is no effect on some free image upload websites such as Photobucket or Imageshack because those websites will show a special error image when the photo is removed or deleted. jQuery will misunderstand the photo is still existent and show the error image. Moreover the photos include different size so I can not use jQuery to judge them if the photo exists by specific size like ----> if width != 200 then hide it – user1761824 Oct 21 '12 at 03:55
@user1761824 I see. Your question itself was asking for 404's though. Now if you specify which hosting service specifically you want to test it for, there may be a way to detect the error. Now without an specific site, it will be nearly impossible to answer this properly. – Fabrício Matté Oct 21 '12 at 03:58
this one worked for me, and to think I already had the perfect jQuery function for checking image if it exists or not. Thanks – AceMark May 07 '13 at 15:00
Save my days. Thank @FabrícioMatté – Nere Nov 29 '15 at 14:16

score 1 · Answer 2 · edited May 23 '17 at 12:26

The second parameter of the open method is a url, not an array of HTML elements.

So you can use each to iterate over the elements, get their src attribute using .attr() and pass that into the method.

Since you have the images loaded already, instead of doing another request for each one, you might be able to use a method I discussed in another question: Check if user is blocking 3rd party domain

If your images aren't of fixed height/width, a non-existent image will produce a small icon indicating the image doesn't exist. You can use the size of the image to see if the image was loaded or not.

jQuery to check image exists if head 404 than hide it

2 Answers2

Linked