While messing around with JavaScript to build a small frontend for my book collection I came to the point where I wanted a fallback solution if a book doesn’t have an image associated with it. Sure, I could simply set a flag in the XML-file including my book collection, but I wanted to solve this with JavaScript. So I found the attribute complete of document.images[i].
for(i = 0 ; i < document.images.length ; i++){ if(!document.images[i].complete){ document.images[i].src="noimage.png"; } }
With this code you normally should be able (according to JS 1.1) to find broken images and replace them with a default image. This also works without a problem in Firefox as can be seen in here:
Opera8 on the other has a quite strange behavior: It works without a problem in static HTML pages where the code can be executed for example on the “onLoad” event but it fails when the DOM-tree is manipulated and images are added on-the-fly with executing the image-fallback after the last image is added to the tree. I couldn’t find any real solution for this yet. The only thing that seems to work in both browsers is defining a background-color via CSS for the images that should be completely covered by the images. If the image doesn’t appear, at least the background would be rendered. Background-images seem to fail in Opera8 too.
Do you want to give me feedback about this article in private? Please send it to comments@zerokspot.com.
Alternatively, this website also supports Webmentions. If you write a post on a blog that supports this technique, I should get notified about your link π