Image reload prototype if-modified

Question

I use prototype on the client side.

I need to change picture on the page without reloading. So in my .js file I change the src of a picture and it works ok. But I also need that if the same image requested, it would alse request the server to know if this image has changed, and reload if needed. Server sends last-modified header, and if gets if-modified-Since, then checks, and either sends new image or 304 Not Modified response.

When the image is requested the first time, server replies with an image. Second time gives 304 Not Modified. But when I try to reload 3-d time, it won't trigger any request at all. And the same cached image is shown.

Is it some feature of prototype, that it won't request, if before NOT MODIFIED repsonse was sent. Or any other reasons?

Is there any way to force it to make a request?

Tested in Firefox and Chrome

Answer 1

This is a common problem you need to add extra id that randomly changes to the image - this way it updates the contents.

I been working on a captcha image verification which needs to update the image to what it has actually done on backend. Before it would cache an image and session value would be different.

So in HTML I add a variable which I then randomly generate a number and change value so there is no cache in theory.

Image?a=5291

if static image image.jpg?id=[blah]

You should be able to find JavaScript random number generators and add this to any image and id= can be anything you like since it just to fool the server and browser caching.

Anyways have also been writing image content replacement

<img id=reli src yourimg.jpg?a=5829>

  //--------------------------------------------------------------------------|
  // Javascript to update image content without reloading page 
  // http://www.pro.org.uk
  // Feel free to re-use leaving this intact 
  // contact me: http://www.pro.org.uk/classified/Directory?act=contact
  //--------------------------------------------------------------------------|
   function ChangeLanguage(lang) {
     langu="1&lang="+lang; 
      if (document.getElementById('reli').src.indexOf("country")>0) {
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("country")-1);
     } else if (document.getElementById('reli').src.indexOf("lang")>0) {
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("lang")-1);
     }
     document.getElementById('reli').src=document.getElementById('reli').src+langu;
  }
  function ChangeCountry(country){
    cc="1&country="+country;
    if (document.getElementById('reli').src.indexOf("lang")>0) {
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("lang")-1);
    }
    document.getElementById('reli').src=document.getElementById('reli').src+cc;
  }
 

Answer 2

/**
 * Refresh the Image
 * id: id of the Image element to refresh
 * src:URL of the Image Source 
 */
function refreshImage(id,src){

    /* Generating a Random Integer */
    var rnd_int = getRandomInt(1,100000);

    /* Set the Source of the Image plus extra Variable,
    so the Browser will not use the Cache */
    $(id).src= src+'&pictureID='+rnd_int;

    /* Done */
    return;
}
/**
 * Returns a random integer between min and max
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}