Hiding images that failed to load

Question

I have an Android application that generates some HTML which is rendered locally, in a Webkit view.

The details of the HTML generation aren\'t really that important exce

Answer 1

how to determine the loaded-ness of the images or the state of the network.

One approach may be to maintain references all of the images in the DOM and bind an onload event which is fired when the image has finished loading. After a specified amount of time, any image which hasn't fired can be assumed to be problematic.

how to hide/mask the failed to load images, such that it is not detectable by the user that the image is missing.

You've already mentioned some options. Have you thought about removing the element from the DOM altogether? Client will no longer attampt to load the image.

when to perform these tasks (e.g. when the document/window has finished loading?)

You cannot use the document or window onload events because that won't fire until everything on the DOM has loaded. Checking the readiness of the DOM varies between browsers (Lucky you're only dealing with one!). This might get you started.

Answer 2

If your images are not content to be consumed instead of text or to supplement text then they should be CSS background images. Background images are completely passive and do not show at all if they cannot be retrieved or processed.

Answer 3

Interesting question.

Looking in Firefox, if an image doesn't load, its naturalHeight (and width too) is 0. You could probably use some javascript in android to read a similar property. My test script in Firebug was simply:

document.getElementsByTagName('img')[0].naturalHeight

Answer 4

• how to determine the loaded-ness of the images or the state of the network.
• how to hide/mask the failed to load images, such that it is not detectable by the user that the image is missing

You may look at the onerror event which is triggered when an image fails to load:

<img src="image.png" alt="image" onerror="this.parentNode.removeChild(this)" />

• when to perform these tasks (e.g. when the document/window has finished loading?)
• how to apply them.

This worked for me in Firefox and Chrome when I added it ad the very end of my document (before </body>):

var imgs = document.getElementsByTagName('img')
    for(var i=0,j=imgs.length;i<j;i++){
        imgs[i].onerror = function(e){
        this.parentNode.removeChild(this);
    }
}

It is quite posiible that if an image at the begining of your document didn't load, and you attach yor event handlers when the document is ready some browsers may not fire that handler - you should test it on your target platform.