[GIS] Openlayers 3 how to get if an image loaded ol.source.Image

imageopenlayersopenlayers-2

I'm trying to detect if an image exists or not when I try to load it.

layerPrec = new ol.layer.Image({ 
                         name: "imgprec",
                         style: 'imgprec',
                         visible: true,
                         opacity: 0.7,
                         source: new ol.source.ImageStatic({
                                               url: 'myimageurl', 
                                               imageExtent: vExtent 
                                                          }) 
                              });

I have images that exist but some of them not yet. And when I put an unexisting image, how can I detect if it exist or it has loaded or not without using jQuery '.error'?

Best Answer

Get the source of your image and asign the listeners:

var lyrSource = layerPrec.getSource();

      lyrSource.on('imageloadstart', function(event) {
      console.log('imageloadstart event fired');
      });

      lyrSource.on('imageloadend', function(event) {
      console.log('imageloadend event fired');
      });
      lyrSource.on('imageloaderror', function(event) {
      console.log('imageloaderror event fired');
      });