Failsafe Remote Images

Having all of the images your site uses actually stored on your own site has the advantage that if the site is available then the images are too. When you remotely load images from a different site there is always the possibility that the site you are loading it from will be down and your page will be unable to display that image.

There are reasons for loading images from other sites though so simply copying all the images to your own site is not always a possible solution. One such possibility is where you are displaying an ad banner where the site providing the banner periodically changes its content so that while you link to the same image all the time what actually displays is determined by the ad provider. If we do nothing then when a remote image fails to load any alt text we have for that image will be displayed instead. A better alternative though is to simply replace the image with another local image.

When I first wrote this script Internet Explorer was the only browser to support onerror event handlers on images that would trigger processing if the image failed to load. Some browsers also implemented a "complete" property on images that is set true when the image finishes loading . That also proved to be unusable for our purpose since while some browsers leave the property false if the image fails to load, others set it true simply to indicate that they have stopped trying to load the image. I therefore looked for an alternative solution to determining whether images have loaded successfully or not that doesn't rely on anything beyond the image itself.

The solution is to test the width of the image. If the image has actually loaded then the image will have a width greater than zero whereas if the image fails to load then it will not have a width yet. Since the image may have a width for it set in the HTML we take a copy of the image prior to checking the width so as to ensure we are checking the intrinsic width of the image itself and not just a value set in the HTML. Where the image itself doesn't have a width we substitute a locally hosted image for the broken one. Here's where actually specifying the width and height in the HTML is an advantage as it means that our replacement image can be displayed to fill the same space as the broken image was intended to fill.

To implement this automatic replacement of remote images that fail to load simply insert the following script at the bottom of your web page. This code will check all of the images in the web page and for any that are attached remotely it will test the intrinsic width of that image to determine whether it loaded or not and if it hasn't it will substitute the image you specify in the code.

If you correctly attach all of your JavaScript (other than framebreakers and similar) at the bottom of your page then this will probably be the only script that you use that actually needs to wait until the entire page has loaded before it tries to run. Attaching the code directly to the onload event handler should not therefore cause any problems. If you do have other scripts that need all the images to load before they run rather than just the HTML then you should call this code from an event listener instead so that each of the scripts can be attached independently.



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow