Question

我有一个小的jQuery程序，它实现了一个具有淡化效果的图像幻灯片。渲染图像并且必须显示下一个图像时，首先将其加载到背景中然后再渲染。加载图片的代码如下：

    var img = $('<img/>'); 
    img.attr('src', imageUrl);

    img.load(function()
      {
        $(photo).attr('loaded' + mediaSize, true)
                .attr('width',              this.width)
                .attr('height',             this.height);
        renderPhoto(photo, mediaSize);
      });

在renderPhoto（）中渲染照片的相关部分是：

    $("#image" + activeContainer).css({ "background-image" : "url(" + imageUrl + ")" });

还有一个控件可以跟踪已加载的图像，并且不会重新读取它们两次，假设之前已加载它们，它们位于浏览器缓存中。

一切正常，但缓存。每当渲染一个图像时（使用上面的最新代码行），它总是从服务器重新加载，破坏了淡入效果。

服务器返回的标题似乎可以用于缓存：

% curl -o /tmp/x -v http://stoppingdown.net/media/stillimages/20100102-0072/1280/image.jpg
* About to connect() to stoppingdown.net port 80 (#0)
*   Trying 78.46.194.117...   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0connected
* Connected to stoppingdown.net (78.46.194.117) port 80 (#0)
> GET /media/stillimages/20100102-0072/1280/image.jpg HTTP/1.1
> User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5
> Host: stoppingdown.net
> Accept: */*
> 
< HTTP/1.1 200 OK
< Date: Sun, 04 Nov 2012 11:52:08 GMT
< X-NorthernWind-Version: 1.1-ALPHA-19
< Content-Type: image/jpeg
< Content-Length: 2207579
< Last-Modified: Thu, 01 Nov 2012 00:08:11 CET
< ETag: "1351724891000"
< Expires: Sun, 11 Nov 2012 12:52:08 CET
< Server: Jetty(6.1.24)
< 
{ [data not shown]

使用Chrome进行调试并查看资源窗格，我可以看到同一图像的多个条目，每轮重新加载（例如，在第一轮我看到20031227-0085.jpg，以及幻灯片开始第二个周期时我看到两个20031227-0085.jpg，然后三个，依此类推）。肯定资源没有加载到浏览器缓存中......我不明白为什么。

感谢。

PS完整代码可用here。

Answer 1

实际上，我发现我的jQuery代码确实正常工作。问题在于服务器，它没有正确支持缓存（即使应该使用304“未修改”，它总是发回带有效负载的200 HTTP状态）。修复服务器中的问题修复了所有问题。

Answer 2

使用jquery查看example，如何预加载图片，而不是在加载时显示：

HTML：

<div>Here will be image</div>
<button>Click to load</button>

CSS：

.images {
 width: 100px;
 height: 100px;
 border: 1px solid black; 
 transition: background 1s,width 1s,height 1s;
 -webkit-transition: background 1s,width 1s,height 1s;
 -mozilla-transition: background 1s,width 1s,height 1s;
 -o-transition: background 1s,width 1s,height 1s;
}

JS：

var showimage = function(image) {
    var div = $('.images');
    div.empty();
    div.width(image.get(0).width);
    div.height(image.get(0).height);
    div.css({
        'background-image': "url(" + image.attr('src') + ")"
    });

}

var images = ['http://www.dragongoserver.net/images/dragonlogo_bl.jpg', 'http://www.dragongoserver.net/images/dragon_logo.jpg', 'http://cdn.last.fm/flatness/listen/radio_icon_medium.png']
$('button').click(function() {
    var image = $(new Image());
    image.attr('src', images[0]);
    images.push(images.shift());
    if (image.get(0).complete === true) {
        showimage(image);
    } else {
        image.load(function() {
            console.log('loading...');
            showimage(image);
        });
    }
});

无法使用jQuery在浏览器缓存中加载图像

2 个答案: