-1

我有一个小的 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 完整代码可在此处获得。

4

2 回答 2

1

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

于 2014-05-15T21:00:42.803 回答
0

查看带有 jquery 的示例，如何预加载图像，而不在加载时显示它：

HTML：

​&lt;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);
        });
    }
});​
于 2012-11-04T14:13:24.173 回答