無法使用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加載瀏覽器緩存中的圖像

回答

相關問題