当使用JQuery附加图像时阻止重新加载图像append（）

我有一个AJAX调用，返回一些JSON，包括一些图像URL。我想为它们添加图像到DOM，但是我将一次又一次地获得相同的图像，而且我不想提高带宽成本。浏览器在默认情况下不会为我缓存这些图像 - 如果我使用JQuery创建img元素并添加它，则浏览器会在每次执行此操作时请求该图像。当使用JQuery附加图像时阻止重新加载图像append（）

于是我在一个隐藏的DIV像这样的形式加入缓存：

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

，然后遍历JSON当从上可能有一个imageKey服务器返回的对象这样做在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）就会为图像发出新的请求。

任何想法？谢谢。

来源

2012-01-06 Eliot

由于您在SRC中使用查询字符串，因此浏览器可能没有缓存图像。你可以使用这些图片的静态网址吗？ – Blazemonger 2012-01-06 14:14:03

@ mblase75只有在查询字符串发生变化的情况下才会这样。这就像在网址末尾添加一个随机数来强制每次重新加载的旧技巧。它只起作用，因为数字不同。 – Archer 2012-01-06 14:20:47

@Archer谢谢，我记得 - 我只是没有足够的信息来确定OP的'post.imageKey'每次都没有变化。以为我会把它扔到那里让他考虑。 – Blazemonger 2012-01-06 14:24:51

使用宽度和高度设置为图片宽度和高度的div，并使用背景属性加载图片url（'myImage.jpg'）。使用无重复功能，以便在div大于图片的情况下不会重复图片

来源

2012-01-06 14:18:35

+ 1，一个不错的诀窍是也使用：'background-position：center center;'保持'背景'始终居中在它的容器中。 – 2012-01-06 14:20:17

谢谢。这看起来好像会起作用，但它确实需要我在加载之前了解图像的暗淡程度，这有点棘手。看看为此添加一些服务器端并将其传递给AJAX响应。 – Eliot 2012-01-06 15:30:54

想不到任何简单的解决方案，但是您可以在每次更改图像时动态设置div的大小。使用ajax调用来获取图像的尺寸（php GD库有getimagesize（）在这里看到http://www.php.net/manual/en/function.getimagesize.php） – 2012-01-06 15:35:53

当使用JQuery附加图像时阻止重新加载图像append（）

回答

相关问题