опрос изображений через JavaScript

Question

Мне нужно опросить изображение с помощью javascript и выполнить какое-либо действие, как только изображение будет найдено на его месте. Это код, который я написал для этой задачи.

/*----Image handling script starts here----*/
var beacon = new Image(); 
beacon.onload = function() {
    console.log('Image found'); 
    console.log(this.width,this.height);
    window.clearInterval(timer);
};
beacon.onerror = function(){    
   console.log('Image not found');
}
var timer = window.setInterval(function(){
    console.log('sending the request again');
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif";
},2000);
/*----Image handling script ends here----*/

Проблема в том, что после одного запроса GET ответ кэшируется, и запрос не отправляется каждый раз, когда я устанавливаю src. Если вы изучите вкладку NET, она отправляет запрос только при первом наборе src и кэширует ответ.

Мне нужно отправлять новый запрос на изображение каждый раз, когда мой код устанавливает src. Есть ли обходные пути?

Answer 1

Измените ваш SRC, чтобы включить текущее время EPOCH в качестве переменной.

beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" +
    date.getTime();

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

Answer 2

Запросить изображение с другой строкой запроса каждый раз.Браузер будет обрабатывать его как уникальный URL-адрес и не будет иметь его в кэше.Возможно, вам это сойдет с рук, потому что, скорее всего, веб-сервер будет игнорировать что-либо в строке запроса при запросе изображения.Следующее должно сделать 100 запросов:

for (var i=0; i<100; i++)
{
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" + i;
}