How to detect 404 error in a url then set the url image to display:none using Jquery

Question

Hello,

I have a table which repeats an image link to a file download for every row of data. I want to use Jquery or Javascript to detect if a image link returns a 404 error, meaning the file its trying to find doesn’t exist, then set the image link to display:none so its hidden.

Any help is much appreciated!

Jamie.

---Edit---

This is my url which needs to be set to hidden if it cant find the .igs file

<a href="/path/to/file.igs"><img src="pic.jpg" alt="My Image Link"></a>

Unfortunately I cannot utilize server-side processing.

Answer 1

You can use the error() event handler:

$("img").error(function () {
    $(this).css("display", "none");
});

---

I see that a few of us misunderstood your origin question, your edit clears it up a little. You can achieve what you want only by using AJAX. Just requesting the headers for the file should be enough:

// Find all <a> tags where href ends with .igs, hide and loop over them 
$("a[href$=.igs]").hide().each(function (i, el) {
    $.ajax({
        type: "HEAD",
        url: el.href,
        success: function () {
            // Success, we can unhide the element.
            el.show();
        }
    });        
});

Of course, this won't work if the files are on other domains. Also, this can be quite a costly procedure for both the client and the server if there's a lot of them.

Answer 2

you can also use this trick,

$('img').hide().load(function(){
    $(this).show();
});

this will hide all the images then show it when it loads completely.

Answer 3

Or you could use a combination of the two answers provided by Reigel & Andy E, by having an extra image that gets displayed when an error occurs...

.downloadedImage, .downloadFailed { display:none; }

<table>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl1.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl2.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
    <tr>
        <td>
            <img class="downloadedImage" src="imageUrl3.jpg"/>
            <img class="downloadFailed" src="downloadFailed.jpg"/>
        </td>
    </tr>
</table>

$("img.downloadedImage").load(function(){
    $(this).show();
}).error(function(){
    $(this).next().show();
});

The important thing to note here (If my thinking is correct) is the timing of the jQuery execution. If it's run too soon, the DOM elements won't be available to assigne the event handlers to them - if it's run too late, the event handlers will be attached after the events have occurred. You may have to experiment between placing the jQuery snippet at the end of the page and placing it in a $(document).ready handler.

UPDATE A quick experiment shows that the script snippet performs best at the end of the page (Or just after the table definition), rathe that in the $(document).ready handler.