Изображение перезагрузить прототип, если модифицирован - PullRequest
Новая
       29

Изображение перезагрузить прототип, если модифицирован

0 голосов
/ 02 апреля 2011

Я использую прототип на стороне клиента.

Мне нужно изменить картинку на странице без перезагрузки. Так что в моем файле .js я меняю src картинки, и она работает нормально. Но мне также нужно, чтобы, если запрашивалось то же изображение, оно также запрашивало у сервера, изменилось ли это изображение, и перезагружалось бы при необходимости. Сервер отправляет последний измененный заголовок, и если получает if-updated-Since, то проверяет и отправляет новое изображение или ответ 304 Not Modified.

Когда изображение запрашивается в первый раз, сервер отвечает изображением. Второй раз дает 304 Not Modified. Но когда я пытаюсь перезагрузить 3-ий раз, он вообще не вызовет никаких запросов. И то же кэшированное изображение показано.

Это какая-то особенность прототипа, которую он не будет запрашивать, если до этого не было отправлено ответное сообщение NOT MODIFIED. Или какие-то другие причины?

Есть ли способ заставить его сделать запрос?

Протестировано в Firefox и Chrome

Ответы [ 2 ]

0 голосов
/ 24 апреля 2013 
/**
 * 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;
}
0 голосов
/ 09 апреля 2011

Это распространенная проблема, вам нужно добавить дополнительный идентификатор, который случайным образом меняется на изображение - таким образом, он обновляет содержимое.

Я работал над проверкой изображения с помощью капчи, которое должно обновить изображение до того, что оно фактически сделало на бэкенде. Прежде чем он будет кэшировать изображение и значение сеанса будет отличаться.

Итак, в HTML я добавляю переменную, которую затем случайным образом генерирую число и изменяю значение, чтобы в теории не было кеша. 

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