Geek asks and answers

If-modified image reload prototype

I use a client side prototype.

I need to change the image on the page without reloading. Therefore, in my .js file, I change the src of the image, and it works fine. But I also need that if the same image were requested, it would also require the server to know if this image has changed, and restart if necessary. The server sends the last modified header, and if it receives if-modified-Since, it checks and sends a new image or 304 Not Notified response.

When an image is requested for the first time, the server responds with the image. The second time gives 304 Not Modified. But when I try to restart the 3-day time, it does not raise any request at all. And the same cached image is shown.

Is this some kind of prototype feature that it would not request if the NOT MODIFIED signal was sent. Or any other reasons?

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

Tested in Firefox and Chrome

0
source share
2 answers

This is a common problem with which you need to add an additional identifier that accidentally changes to an image - this way it updates the content.

I worked on checking the captcha image, which should update the image to what it really did on the backend. Before it caches the image, the session value will be different.

So, in HTML, I add a variable that then randomly generates a number and changes the value, so theoretically there is no cache.

Image?a=5291

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

JavaScript , id = , , .


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

More articles:


All Articles