Prevent caching on an img/map

Question

This is an image with an area map on it, I used an jquery plugin "image-map-resizer-master" to help me making the area. When i clear my cache everything works fine, but then after you refresh it it looks like this:

How do I prevent this image from repeating? Or how do I prevent this div from caching? Because of this image "resize" the areas are off too.

<div id="foto">
  <div><img src="img/hiveplattegrond.png" width="726" height="714" alt="Plattegrond Hive" id="afbeeldingachtergrond" usemap="#hivemap" class="map">
    <map name="hivemap">
      <area shape="rect" coords="116,7,190,137" alt="Multimediaruimte" value="Multimediaruimte A108" class="mapping" id="Lokaal_Multimedia_01" href="">
      <area shape="rect" coords="189,7,267,73" alt="A105F" value="Studieruimte A105F" class="mapping" id="Lokaal_Studeren_01" href="">
      <area shape="rect" coords="189,74,267,137" alt="A105E" value="Studieruimte A105E" class="mapping" id="Lokaal_Studeren_03" href="">
      <area shape="rect" coords="268,7,347,73" alt="lokaalzondernaam" value="Studieruimte A105H" class="mapping" id="Lokaal_Studeren_02" href="">
      <area shape="rect" coords="268,74,347,137" alt="A105G" id="Lokaal_Studeren_04" class="mapping" value="Studieruimte A105G" href="">
      <area shape="rect" coords="572,445,650,523" alt="brainstormruimte" id="Lokaal_Brainstorm_01" class="mapping" value="Brainstormruimte" href="">
      <area shape="rect" coords="311,610,403,705" alt="groepsruimte1" id="Lokaal_Studeren_05" class="mapping" value="Groepswerkruimte 1 A105C" href="">
      <area shape="rect" coords="404,610,495,705" alt="groepsruimte2" id="Lokaal_Studeren_06" class="mapping" value="Groepswerkruimte 2 A105B" href="">
    </map>
  </div>

You can test this problem yourself if you go to "lokalen", just ignore the sign in: http://yellowhive.xyz/

Related: http://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images — roberrrt-s, Feb 14 '17 at 08:59

score 0 · Answer 1 · answered Feb 14 '17 at 09:04

Something like:

$(document).ready(function() {

    $('img').each(function(i, el) {
      var src = $(el).attr('src')
      $(el).attr("src", src + '?' + Date.now());
    })

});

Forces all images on the site to reload without caching, the Date.now() forces a new unique string that makes sure the browser interprets the image as a new sourcefile.

Prevent caching on an img/map

1 Answers1