Comments on: Using jQuery to Load Alternate Images

By: Peter

Peter — Tue, 12 Jan 2010 20:03:13 +0000

@Denis:

It will actually load an extra image for EVERY image in the document, not only for the broken ones.

However, images are cached quite efficiently (with default settings), so the offline.jpg will only be downloaded once for your whole site, even if the user revisits a few days later.

I would guess the resource usage in the browser would also be minimal, since the browser knows it’s the same image being reused everywhere.

I would definitely guess the resource usage is (far) less using one CSS command (which is handled internally by the browser) than looping through all the images in the document using JavaScript.

By: Denis

Denis — Tue, 12 Jan 2010 15:37:59 +0000

@Peter: That would seem to work but would it not then load that extra image for every image broken or not? This might seem like a small issue as it’s just one error image but if you have different error images and or a complex page redraw time etc would be effected heavily?

By: Anuj Gakhar

Anuj Gakhar — Tue, 10 Nov 2009 11:24:09 +0000

Peter, that is a good trick specially if you dont use any transparent images. thanks for the tip.

By: Peter

Peter — Tue, 10 Nov 2009 09:30:16 +0000

You could also forget all the JavaScript and go the CSS way:

IMG { background-image: url(‘offline.jpg’); }

Though this might give weird results if you use GIF or PNG images with transparent parts.

By: Anuj Gakhar

Anuj Gakhar — Mon, 22 Jun 2009 08:03:36 +0000

@Rolf, this script would be placed after you have loaded the jQuery library and its ok to place it in the head section or an external .js file. It will only run when the document is loaded.

By: Rolf

Rolf — Mon, 22 Jun 2009 04:35:33 +0000

Forgive my ignorance when it comes to javascript, but what is the optimal code now?
And where should I place it, in the head section I suppose? Or can I put it in my external .js doc and if so, can I call the doc in the usual way or is a special command needed for this code?
Thanks in advance for your time.

By: Anuj Gakhar

Anuj Gakhar — Tue, 17 Mar 2009 09:19:38 +0000

@Dan, Thanks for the explanation. I will keep that in mind and if I notice anything different, I will post here. Cheers.

By: Dan G. Switzer, II

Dan G. Switzer, II — Mon, 16 Mar 2009 21:57:16 +0000

@Anuj:

The problem isn’t with wanting to use the onerror–which is the correct event to monitor if an image loaded or not.

The problem is that $(document).ready() is not guaranteed to fire before all images have tried to load.

Where I can see there being issues is if you’re running some other jQuery plug-ins during onready that are running before the fixBroken() plugin.

I just seem to recall someone trying to implement a similar fix to yours, but was having some issues because his code was run after the browser had attempted to load the images.

By: Anuj Gakhar

Anuj Gakhar — Mon, 16 Mar 2009 21:18:19 +0000

@Dan, that sounds like a decent solution to the problem. I like the idea of using complete and naturalWidth to determine if the image is loaded or not. However, I am not sure if this is any better than onerror event as that is an internal event and I had no problems with onerror in any browser.

By: Dan G. Switzer, II

Dan G. Switzer, II — Mon, 16 Mar 2009 20:13:13 +0000

Sorry, I should have paid more attention to the code. I glanced at it quickly.

However, there’s still a potential problem with this code.

The timing of when $(document).ready() fires isn’t an exact science. There’s no way to guarantee it fires *before* images load. This leaves it open to weird bugs.

A quick search turned up this solution:

$(window).load(function() {
$(‘img’).each(function() {
if (!this.complete || typeof this.naturalWidth == “undefined” || this.naturalWidth == 0) {
// image was broken, replace with your new image
this.src = ‘http://www.tranism.com/weblog/images/broken_ipod.gif’;
}
});
});

The idea they’re using is to check the “complete” property which should be set to true/false if the image loaded. However, since Gecko doesn’t support that it falls back to check naturalWidth (a Gecko property) to see if it’s not defined or set to an invalid size (0).