在使用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大于图片的情况下，图片就不会重复