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

-1

我有一个小型jQuery程序，它实现了具有淡化效果的图像幻灯片。当图像被渲染并且下一个图像被显示时，它首先被加载到背景中，然后被渲染。加载图像的代码如下：无法使用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。

来源

2012-11-04 Fabrizio Giudici

当缓存中的图像加载没有被触发时，检查.complete属性如果图像 –

您还可以添加类似''？rand ='。Math.random（）'到'imageUrl' –

啊哈哈，重读问题，图像不正确，大声笑 –

其实，我发现我的jQuery代码确实正常工作。问题在于服务器没有正确支持缓存（即使在应该使用304“Not Modified”的情况下，它始终会发送200 HTTP状态和有效负载）。修复服务器中的问题修复了一切。

来源

2014-05-15 21:00:42

看到example使用jQuery，你怎么可以预加载图像，而不显示它，而你加载：

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); 
        }); 
    } 
});

来源

2012-11-04 14:13:24

有趣的，因为我不知道过渡 - 也因为它是CSS3，我保持与纯CSS。但我打赌在2012年我可以升级。它会简化我的代码。我会尽力让你知道。谢谢。 –

你可以很容易地把它翻译成jquery动画 –

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

回答

相关问题