在Chrome瀏覽器中沒有緩存動態加載的圖片

加載了jQuery的圖像沒有保存在Google Chrome的緩存中？它每次都從服務器下載。在Chrome瀏覽器中沒有緩存動態加載的圖片

當前狀態：我使用jQuery slimbox2在「lightbox」中加載圖片。這一點沒什麼特別的。我添加了一些jQuery代碼，用於檢測鼠標光標何時越過lightbox圖像：發生這種情況時，我通過更改div的css背景動態加載lightbox圖片的一個版本，但更大（如縮放）。

問題：當光標第一次進入燈箱時，應該加載'大'圖像，並且所有瀏覽器都將圖像保存在緩存中，所以當光標熄滅時，時間，它已經下載的'大'圖像，所以它不需要一秒或一秒的下載。

隨着Chrome一次又一次地下載。（還有更多的問題，因爲lightbox分頁圖層的mousein mouseout事件使得這個額外的下載=圖像隨時都在閃爍[圖像下載]）。

例子：我的英語很殘酷，很晚。只是檢查瞭解的例子:) http://motocross.es/f/oneal/casco-oneal-7-series-mayhem-roots/996

在此先感謝，並原諒我的英語水平。

來源

2013-03-16 Becario Senior

看過帖子的方式比你寫的這個更「殘酷」。 :-) – techfoobar 2013-03-16 07:05:29

嘗試將它們存儲到本地存儲ibm.com localstorage example

<script> 
    var hero; 
    if (localStorage.getItem('heroImg')) { 
     hero = localStorage.getItem('heroImg'); 
    }else { 
     hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7 /.../ 6p+3dIR//9k='; 
     localStorage.setItem('heroImg',hero); 
    } 

    document.getElementById("hero-graphic").src='data:image/png;base64,' + hero; 
</script> 

<img id="hero-graphic" alt="Blog Hero Image" src="" />

來源

2013-03-16 09:58:12 aichingm

我相信這是因爲你的圖像發送的頭不說關於它的緩存任何東西。我的意思是，你的圖片網址：

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...提供這些頭的圖像：

HTTP/1.1 200 OK 
    Date: Sat, 16 Mar 2013 10:00:13 GMT 
    Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6 
    Content-Length: 79741 
    Keep-Alive: timeout=3, max=1000 
    Connection: Keep-Alive 
    Content-Type:

這沒什麼好說有關圖像應如何緩存。相比之下，與，例如，在主頁上的基本，更小的圖像：

http://motocross.es/upload/shop/vendedores/44/productos/standard/cropped_ref_44_1szyh6a9s5mh3ixc.jpg

...這裏頭是這樣的：

HTTP/1.1 200 OK 
    Date: Sat, 16 Mar 2013 10:00:42 GMT 
    Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6 
    Last-Modified: Fri, 08 Mar 2013 03:04:33 GMT 
    ETag: "2726d07-d1c9-4d761151f1240" 
    Accept-Ranges: bytes 
    Content-Length: 53705 
    Cache-Control: max-age=1296000, public, must-revalidate 
    Keep-Alive: timeout=3, max=1000 
    Connection: Keep-Alive 
    Content-Type: image/jpeg

見額外的高速緩存指令？這裏有一個Cache-Control頭文件，這可能是很重要的一點，以及像ETag這樣的其他緩存信息。還有一個Content-Type，這可能是相關的，因爲在沒有其他線索的情況下，瀏覽器的緩存策略可能與內容類型相關。

你自己從服務器發回的圖像時，網址：

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...被撞了？即服務器是否也結束了您的代碼？如果是這樣，請嘗試添加適當的Cache-Control標題和Content-Type。如果您控制服務器，則瀏覽器緩存圖像的方式非常重要。

來源

2013-03-16 10:06:41

沒有標題的圖像是通過名爲'PHP Wide image'的擴展名即時生成的。第二張圖片（帶頭文件）也是用PHP寬圖片生成的，但是之前（添加產品時）以jpg格式存儲，我猜想在第二張圖片中，服務器配置Etags會影響它，但不會影響第一張圖片。無論如何，非常感謝您的信息。我即將解決它，我會讓你知道。 – 2013-05-21 06:01:46

[已解決]這非常快：使用類 - > WideImage的writeHeader並添加一些頭文件可以正常工作。剛剛必須從WideImage PHP擴展編輯Image.php，因爲這個類受到如下保護： protected function writeHeader（$ name，$ data）我剛剛刪除'protected'，不確定爲什麼聲明這種方式..問題修復。再次感謝。 – 2013-05-21 06:16:43

在Chrome瀏覽器中沒有緩存動態加載的圖片

回答

相關問題