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

Question

我有一个 AJAX 调用，它返回一些 JSON，包括一些图像 URL。我想为他们添加图像到 DOM，但我会一遍又一遍地获取相同的图像，我不想增加我的带宽成本。默认情况下，浏览器不会为我缓存这些图像 - 如果我使用 JQuery 创建一个 img 元素并附加它，浏览器会在我每次执行此操作时请求该图像。

所以我以隐藏 div 的形式添加了一个缓存，如下所示：

<div id="imageCache" style="display: none;"></div>

然后在循环遍历从服务器返回的可能有 imageKey 的 JSON 对象时在 JQuery 中执行此操作：

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，并使用背景属性加载图片url('myImage.jpg')。使用 no-repeat 这样图片就不会重复，以防 div 比图片大