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

Wolfgang Blessen · Answer 1 · 2013-04-29T07:06:57.170

0

/**
 * 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+'&amp;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;
}

edited Apr 29 '13 at 07:06

answered Apr 24 '13 at 08:52

Wolfgang Blessen

900
10
29

Please add comments while writing code where ever necessary from next time it will be helpful for future viewers for better understanding. – Nikhil Agrawal Apr 24 '13 at 09:12

score 0 · Answer 2 · edited Sep 05 '15 at 04:05

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;
  }

Image reload prototype if-modified

2 Answers2

Linked