ansaurus

Question

Graceful handling of the display of remote images that might no longer be there

Answer 1

+2 A:

The error event is fired when the image can't be loaded for any reason (connection error, HTTP 404, not image data, et cetera). A really simple inline example would be

<img src="http://example.com/image.jpg" onerror="this.src = 'generic-image.png';" />

Of course if you want to do this properly, do it in jQuery or another library:

$("img.external").bind("error", function() { // assuming your external images have this CSS class
    this.src = "generic-image.png";
});

Matti Virkkunen 2010-09-02 18:00:21

This looks like a good solution! I am testing it out using jQuery("img").bind("error", function() { alert(); });But the event does not seem to trigger. What might i be doing wrong?

ming yeow 2010-09-02 18:26:41

@ming yeow: The images might be loading before your event is attached. Perhaps using the inline method (or also setting the src attributes with JS) is better afterall.

Matti Virkkunen 2010-09-02 19:02:28

that works! but it is really painful (and messy!) to write that everywhere it is needed. i wonder if there is a way to attach before load, something like live?

ming yeow 2010-09-02 20:10:35

Answer 2

+1 A:

If you write PHP you could use:

<?= (file_exists('http://remote-site.com/imageX'))?'&lt;img src="http://remote-site.com/imageX"&gt;':'&lt;img src="http://remote-site.com/genericImage.png"&gt;' ?>

This would check to see if the image is there, and display a generic image that you create and host somewhere if it does not.

I use this for User images in applications. If they have not uploaded an image, the generic is displayed.

Are these images coming from a Database?

d2burke 2010-09-02 18:00:34

that is a great idea too. But would that be trying to retrieve the image twice -> one to check, one to load?

ming yeow 2010-09-02 19:31:41

Good question, but no, it does not actually try to load or retrieve the image, but merely checks for its existence. Similar to the Command Line 'dir' command which merely lists the files and folders but doesn't actually do anything with them.The performance hit will be negligible, if that is your concern :)

d2burke 2010-09-02 19:37:10

hmmm, i am not storing the image in the db - it is remoteso wun it will hit the remote server twice? one to check , one to load

ming yeow 2010-09-02 20:09:15

yes, it will indeed hit the remote server twice, but it won't actually try to load anything. I assume these images are hosted by someone else.Additionally, since PHP is rendered server side, if the file is not there, there is not even an ATTEMPT to load, as opposed to the jQuery method listed, which makes the load attempt and then goes about the business of reporting an error...which in turn must be caught and processed. Plus, this is a bit more succinct. In the end, Matti's response works and the difference is probably minimal :)

d2burke 2010-09-02 20:50:31

ansaurus

tags:

views:

answers:

Graceful handling of the display of remote images that might no longer be there

related questions