防止在使用JQuery append()追加图像时重新加载图像

Question

我有一个AJAX调用，它返回一些JSON，包括一些图像URL。我想为它们将图像添加到DOM中，但我将一次又一次地获得相同的图像，并且我不想增加带宽成本。默认情况下，浏览器不会为我缓存这些图像--如果我用JQuery创建一个img元素并追加它，每次我这样做时浏览器都会请求该图像。

所以我以隐藏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')。如果div大于图片，请使用no-repeat，这样图片就不会重复