Openlayers 3 - load start / load end events on layers

With the latest versions of OL3 we have the ability to listen for the 'loadstart' and 'loadend' events on layers exist on our map. In openlayers 2 that was quite clear.

With the latest versions of  openlayers 3, things start to be a bit more clear, though not as clear as it used to be on OL2.

So for TILE (ol.layer.Tile) layers our code snip should look like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//declare the layer var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); //asign the listeners on the source of tile layer osmLayer.getSource().on('tileloadstart', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif'; }); osmLayer.getSource().on('tileloadend', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png'; }); osmLayer.getSource().on('tileloaderror', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png'; });

For WMS layers the approach is a bit different:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

//declare the layer var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ attributions: [new ol.Attribution({ html: '&copy; ' + '<a href="http://www.geo.admin.ch/internet/geoportal/' + 'en/home.html">' + 'National parks / geo.admin.ch</a>' })], crossOrigin: 'anonymous', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, serverType: 'mapserver', url: 'http://wms.geo.admin.ch/' }) }); //and now asign the listeners on the source of it var lyrSource = wmsLayer.getSource(); lyrSource.on('imageloadstart', function(event) { console.log('imageloadstart event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/tree_loading.gif'; }); lyrSource.on('imageloadend', function(event) { console.log('imageloadend event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/ok.png'; }); lyrSource.on('imageloaderror', function(event) { console.log('imageloaderror event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/no.png'; });

For WFS Vecotr layers things are even more complicated:

so I made a fiddle you may see here -->fiddle

fiddle preview -->