Кеширование динамически загружаемых изображений - PullRequest
Новая
       5

Кеширование динамически загружаемых изображений

1 голос
/ 14 сентября 2010

Я использую javascript для динамической загрузки любой серии изображений в один тег img на основе взаимодействия с пользователем: 

function reassignImage(newSource)
{
   img.src = newSource;
}

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

Это кажется худшим из обоих миров.Я хотел бы либо:

  1. Для загрузки из кэша, если изображение было одинаковым.
  2. Чтобы каждый раз перезагружать каждое изображение, но не увеличивать размер кэша.

Как бы я достиг любого из этих сценариев?

Спасибо!Ярина

Ответы [ 3 ]

5 голосов
/ 14 сентября 2010

Какой заголовок элемента управления кэшем установлен в HTTP-ответе для изображения? (Инструменты разработчика Chrome покажут вам). Если он не настроен для кэширования, он будет обновлен.

1 голос
/ 14 сентября 2010

Это предварительно загрузит изображение, так что браузер сможет отобразить его сразу, когда вы фактически установите src тега img.Я предполагаю, что предварительная загрузка изображения, подобного этому, гарантирует, что оно будет в кеше, поэтому оно не будет перезагружаться, хотя я не проверял его.два изображения 

function reassignImage(newSource) {
    var myImg = new Image(25, 25);
    myImg.src = newSource;
    img.src = newSource;
}

reassignImage("first.png");
reassignImage("second.png");
reassignImage("first.png");

Редактировать

Я делал это неправильно.Попробуйте создать new Image() для каждого нового файла, загружаемого пользователем.Поменяйте местами эти элементы изображения из дома. 

<html>
  <head>
    <script>
    var imageElements = {};
    function reassignImage(newSource) {
      if (typeof imageElements[newSource] == "undefined") {
        imageElements[newSource] = new Image();
        imageElements[newSource].src = newSource;
      }
      var container = document.getElementById("imageContainer");
      container.innerHTML = '';
      container.appendChild(imageElements[newSource]);
    }
    </script>
  </head>
  <body>
    <div id="imageContainer"></div>
  </body>
</html>
0 голосов
/ 18 апреля 2014

Технически вы можете установить его таким образом в .htaccess файле: 

# Set up caching on images for 1 month
<FilesMatch "\.(jpg|jpeg|png|ico|gif)$">
ExpiresDefault A2419200
</FilesMatch>

Если вы хотите с этими настройками принудительно обновить изображение, добавьте его к его URL: 

'?'+ new Date().getTime()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...