предотвращение перезагрузки изображений при добавлении их с помощью JQuery append ()

Question

У меня есть вызов AJAX, который возвращает JSON, включая некоторые URL-адреса изображений.Я хочу добавить изображения в DOM для них, но я буду получать одни и те же изображения снова и снова, и я не хочу увеличивать свои расходы на пропускную способность.Браузер не кэширует эти изображения для меня по умолчанию - если я создаю элемент img с помощью JQuery и добавляю его, браузер запрашивает это изображение каждый раз, когда я это делаю.

Поэтому я добавил кеш в видескрытый 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) делает новый запрос на изображение.

Есть идеи?Спасибо.

Answer 1

Используйте div с шириной и высотой, установленными на ширину и высоту изображения, и используйте свойство background для загрузки URL-адреса изображения ('myImage.jpg').Используйте no-repeat, чтобы изображение не повторялось, если div больше, чем изображение