HTML5 Canvas загрузка изображений из кеша браузера

Question

Я сталкивался с этой проблемой каждый раз, когда использовал HTML5 Canvas: Я загружаю изображение, нарисовал его на холсте с этим кодом:

canv = document.getElementById("gc");
canv.width = window.innerWidth;
canv.height = window.innerHeight;
centerX = canv.width / 2;
centerY = canv.height / 2;
ctx = canv.getContext("2d");

image= new Image;
image.src = "images/test.png";
image.onload = function() {
    setInterval(game, 1000 / 500);
};

Все работает нормально, интервал вызова функции, которая перемещает изображение по холсту, без ошибок в журнале консоли или чем-либо еще.

Проблема в том, что когда я изменяю (udpate) файл «test.png» на сервере, холст показывает предыдущую версию файла, пока я не использую инструмент очистки кэша для chrome. Я думал, что изображения будут загружаться во время выполнения и каждый раз будет загружать изображение, но, похоже, это не так.

Как я могу это исправить, чтобы он загружал реальный файл изображения?

Answer 1

Вы можете попробовать добавить одноразовый номер, такой как image.src = "test.png?cache=" + Date.now(), хотя лучшим подходом было бы отправить запрос с заголовком Cache-Control: no-cache, используя XMLHttpRequest или fetch.

Причина, по которой «очистка кэша» с использованием псевдослучайной строки запроса является плохой, заключается в том, что она на самом деле не выполняет то, что предлагает имя. Вместо этого он загромождает кэш вашего браузера несколькими избыточными ресурсами, каждый со своей уникальной строкой запроса. Это тратит ваше дисковое пространство ( и время жизни для твердотельных накопителей ), поскольку вы никогда не собираетесь снова использовать кэшированные ресурсы.

Answer 2

Грязный старый трюк для «предотвращения» кэширования - добавление в запрос случайного числа. Таким образом, запрос - хотя каждый раз одна и та же картинка - отличается.

image= new Image();
image.src = "images/test.png?rnd="+Math.random();