JavaScript: как заставить Image () не использовать кеш браузера? - PullRequest
Новая
       13

JavaScript: как заставить Image () не использовать кеш браузера?

10 голосов
/ 03 октября 2008

Если я вручную загружаю URL-адрес nextimg в браузере, он выдает новую картинку при каждой перезагрузке. Но этот фрагмент кода показывает одно и то же изображение на каждой итерации draw().

Как я могу заставить myimg не кэшироваться? 

<html>
  <head>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext('2d');
        var rx;
        var ry;
        var i;

        myimg = new Image();
        myimg.src = 'http://ohm:8080/cgi-bin/nextimg'

        rx=Math.floor(Math.random()*100)*10
        ry=Math.floor(Math.random()*100)*10
        ctx.drawImage(myimg,rx,ry);
        window.setTimeout('draw()',0);
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canv" width="1024" height="1024"></canvas>
  </body>
</html>

Ответы [ 4 ]

24 голосов
/ 03 октября 2008

Самый простой способ - переместить постоянно меняющуюся строку запроса в конец: 

var url = 'http://.../?' + escape(new Date())

Некоторые люди предпочитают использовать для этого Math.random() вместо escape(new Date()). Но правильный способ, вероятно, состоит в том, чтобы изменить заголовки, отправляемые веб-сервером, чтобы запретить кэширование.

7 голосов
/ 03 октября 2008

Вы не можете помешать ему полностью кэшировать изображение в Javascript. Но вы можете поиграть с src / адресом изображения, чтобы заставить его кешировать заново: 

[Image].src = 'image.png?' + (new Date()).getTime();

Вероятно, вы можете взять любое из решений для кэширования Ajax и применить его здесь.

5 голосов
/ 03 октября 2008

Это на самом деле звучит как ошибка в браузере - вы можете подать в http://bugs.webkit.org, если это в Safari или https://bugzilla.mozilla.org/ для Firefox. Почему я говорю потенциальную ошибку браузера? Поскольку браузер понимает, что он не должен кэшировать при перезагрузке, он все же дает вам кэшированную копию изображения при программном запросе.

Тем не менее вы уверены, что на самом деле что-то рисуете? API Canvas.drawImage не будет ждать загрузки изображения и не будет рисовать, если изображение не загружено полностью, когда вы пытаетесь его использовать.

Лучшая практика - это что-то вроде: 

    var myimg = new Image();
    myimg.onload = function() {
        var rx=Math.floor(Math.random()*100)*10
        var ry=Math.floor(Math.random()*100)*10
        ctx.drawImage(myimg,rx,ry);
        window.setTimeout(draw,0);
    }
    myimg.src = 'http://ohm:8080/cgi-bin/nextimg'

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

0 голосов
/ 16 марта 2014

На самом деле здесь есть два кэша, которые необходимо обойти: один - это обычный HTTP-кэш, которого можно избежать, используя правильные заголовки HTTP на изображении. Но вы также должны остановить браузер от повторного использования копии изображения в памяти; если он решит, что может это сделать, он никогда не доберется до точки запроса своего кэша, поэтому заголовки HTTP не помогут.

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

См. Мой пост здесь для более подробной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...