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

Я использую JavaScript для динамической загрузки любой из серии изображений в один IMG тег, на основе взаимодействия с пользователем:Кэширование динамически загруженные изображения

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

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

Это похоже на худшее из обоих миров. Я бы хотел (-а):

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

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

Спасибо! Yarin

источник

2010-09-14 Yarin

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

var myImg = new Image(25, 25); 
myImg.src = "/foobar.png";

Другими словами, это должно теперь, надеюсь только загрузить два изображения

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>

источник

2010-09-14 19:44:47

@ Dave- не конечно, я следую. Вы говорите, что, создавая фактический тег изображения динамически, он влияет на то, как изображения кэшируются? А вторая часть вашего примера непонятна - почему вы назначаете newSource двум компонентам diff img? – Yarin

@Yarin 'new Image' не создает изображение _tag_ создает образ _object_. Это одобренный стороной способ предварительной загрузки изображений. Я предполагаю, что использование этих объектов изображения повлияет на то, как файлы изображений кэшируются, да. 'myImg.src = newSource' присваивает' src' изображения _object_, а 'img.src = newSource' присваивает' src' вашего изображения _tag_. –

@ Dave- OK Интересно, я не осознал концепцию объектов Image. Однако, все еще смущенный примером - что мы делаем с созданным вами объектом Image - не следует ли назначить его img.src? – Yarin

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

источник

2010-09-14 19:52:47 Nik

Хорошая точка здесь, поэтому вопрос о том, как вы управляете заголовками кеш-памяти с чем-то вроде Amazon Cloudfront или других CDN? – Yarin

Не уверен в облачном режиме, но Amazon S3 позволяет вам устанавливать любой заголовок, который вам нравится, когда вы загружаете - я бы даже подумал, что CDN тоже. – Nik

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

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

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

'?'+ new Date().getTime()

источник

2014-04-18 11:49:05

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

ответ

Смежные вопросы