У меня есть вызов AJAX, который возвращает некоторый JSON, включая некоторые URL-адреса изображений. Я хочу добавить изображения в DOM для них, но я собираюсь получать одни и те же изображения снова и снова, и я не хочу запускать свои расходы на пропускную способность. Браузер не кэширует эти изображения для меня по умолчанию - если я создаю элемент img с JQuery и добавлю его, браузер запрашивает это изображение каждый раз, когда я это делаю.предотвращение перезагрузки изображений при добавлении их с помощью JQuery append()
Поэтому я добавил кэш в виде скрытой DIV как так:
<div id="imageCache" style="display: none;"></div>
, а затем сделал это в JQuery, когда цикл над JSON объектов возвращается с сервера, который может иметь imageKey на них:
if (post.imageKey) {
var cachedImage = $("#imageCache ." + post.imageKey);
if (cachedImage.length) {
var newImage = $(cachedImage).clone();
$("#" + post.key).append(newImage);
}
else {
var newImage = $("<img src='/image?key=" + post.imageKey + "' alt='" + post.title + "' class='offeredPost " + post.imageKey + "'/>");
$("#" + post.key).append(newImage);
cachedImage = $(newImage).clone();
$("#imageCache").append(cachedImage);
}
}
Но без радости. Клонированное изображение добавляется в DOM, но затем, как только JS завершается для страницы, браузер (Chrome) создает новый запрос для изображения.
Любые идеи? Благодарю.
Возможно, браузер не кэширует изображение, потому что вы используете строку запроса в SRC. Вместо этого вы можете использовать статические URL-адреса для этих изображений? – Blazemonger
@ mblase75 Это только в случае изменения строки запроса. Это похоже на старый трюк добавления случайного числа в конце URL-адреса, чтобы заставить перезагружать каждый раз. Он работает только потому, что число отличается. – Archer
@Archer Спасибо, я это помню - у меня просто не было достаточно информации, чтобы быть уверенным, что OP 'post.imageKey' не меняется каждый раз. Думал, что брошу его туда, чтобы он подумал. – Blazemonger