Way to tell if a map tile image has loaded successfully using OpenLayers

Question

Using OpenLayers, is there an easy way to tell if a map image has loaded correctly, perhaps using the “loadend” event?

We are reading map tiles from GeoServer, and using OpenLayers to display them. Most of the time, the image displays in a reasonable time. Occasionally (especially when scrolling back and forth using the mouse wheel), the “loadend” event is fired as if the image was loaded, but nothing is displayed.

When I investigate the HTML, it seems that the image has the correct URL, but has a background colour of pink (usually it is transparent), and I can't see anything useful in the event object.

Any ideas?

Answer 1

It is likely that GeoServer is simply failing to generate the tiles from time to time. There may be some tweaking you can do to improve the performance, so I might invest some time looking into that.

From an OpenLayers perspective, there are a few simple things you can do that may help. First, there is a property called OpenLayers.IMAGE_RELOAD_ATTEMPTS that tells the layer how many times to retry if it fails to get the image. This value defaults to 0 (zero). I would try setting it to 3 at the top of your code and see if that helps.

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

Also, if you get a broken tile and want it to show up as something other than pink, you can update the OpenLayers.Util.onImageLoadErrorColor value at the top of your code.

OpenLayers.Util.onImageLoadErrorColor = 'transparent';

You can browse the source for all of this here: http://trac.openlayers.org/browser/trunk/openlayers/lib/OpenLayers/Util.js

Answer 2

with OpenLayers 2.12 the css needed is

    .olImageLoadError
    {
        display: none !important;
    }

Answer 3

If there was an error it should have the following CSS class in the HTML: olImageLoadError

if you want to hide it add the following to your stylesheet:

.olImageLoadError { 
    display: none;
}