I preloaded images having urls containing a GetMap request (like below) into an IMG tag having width/height of 0px and set display to 'none'. The difference between the url of each image is only the "TIME" part (e.g. 'TIME=2019-04-05T05:40:00.000Z'). In FireFox inspect I can see each image being downloaded.
Example of an url: https://maps.dwd.de/geoserver/wms?version=1.3.0&request=GetCapabilities&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png; mode=8bit&TRANSPARENT=true&LAYERS=dwd:RX-Produkt&TIME=2019-04-05T05:40:00.000Z&CRS=EPSG:3857&STYLES=&WIDTH=407&HEIGHT=406&BBOX=697105.6892639723,6166327.945821739,1692621.5456501078,7159397.8173027495
Preloading (in case of loading only one timestep):
$('<img />')
.attr('id', 'img1')
.attr('src', URL)
.appendTo('div#map-1')
.css({
'position': 'relative',
'display': 'none',
'height': 0,
'width': 0
})
;
If I load a WMS-layer and now change the source of it by hovering over a timeline (each hover changes only the time-part of the url of the WMS-layer) the resulting png from the WMS server is being downloaded from the WMS-server once again (although the url is exactly the same as when preloaded).
Screendump of my website: https://www.kambeel.nl/data/wms.png
Each mouseover of a time/date results in triggering this (where TIME is a ISO8601 timestamp and LYR is the name of the layer):
window['WMS-1'].getSource().updateParams({'LAYERS': LYR, 'TIME': Time});
When looking into Firefox inspect I can see the pngs, with exactly the same URL as when preloading, being downloaded again.
How can I prevent the re-downloading from these png's??