圖像在加載到iframe後無法從緩存中加載

我在iframe中加載圖像，然後（一旦加載iframe）將圖像加載到頁面上。但大多數瀏覽器似乎都會加載圖像兩次。 爲什麼img標籤不是從緩存中加載的？圖像在加載到iframe後無法從緩存中加載

事情是這樣的：

var loader = $('<iframe />').appendTo('body')[0]; 
loader.onload = function() { 
    $('body').append('<img src="' + imgsrc + '" />'); 
}; 
loader.src = imgsrc;

http://jsfiddle.net/amirshim/na3UA/

我使用fiddler2看到網絡流量。

如果你想知道爲什麼我想這樣做

，檢查出this question

來源

2011-02-12 Amir

有一個iframe就好像有一個單獨的標籤，它使用另一個瀏覽器實例，因爲這個原因，我相信它不使用緩存。

不過，如果你要的是具有畫面預裝什麼，你可以在JavaScript中使用

來源

2011-02-12 23:23:19

是的，你可以只用`（新畫面（））SRC = 「http://www.example.com/myimage.jpg」和`它會預載您的圖像。 – 2011-02-12 23:38:17

@Adam這不是我想要做的。如果你讀了另一個問題，你就會明白爲什麼我要加載到一個iframe中了。http://stackoverflow.com/questions/4926215/cancel-single-image-request-in-html5-browsers/4979270 – Amir 2011-02-13 00:20:09

緩存共享...這就是爲什麼CDN網絡（如谷歌和微軟）在一個地方託管像jQuery這樣的東西的原因：http://code.google.com/apis/libraries/devguide.html – Amir 2011-02-13 00:21:54

new Image()也許你發送的HTTP標頭，其中防止緩存？如果您使用PHP將圖像發送給用戶並開始會話，PHP將設置標題強制重新加載圖像。

來源

2011-02-12 23:42:33 iGEL

沒有...設置`use_unique_name = false `如果你看流量，你會看到它被緩存。 – Amir 2011-02-13 00:18:09

.htaccess可用於改善緩存，您也可以在PHP中設置標題。我使用.htaccess：如果圖像已加載一次，但沒有更改，它將從緩存中加載。這種行爲可以對其他類型的文件進行設置（見下文）：

的.htaccess

# BEGIN Expire headers 
<IfModule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault "access plus 1 seconds" 
    ExpiresByType image/x-icon "access plus 2 months" 
    ExpiresByType image/jpeg "access plus 2 months" 
    ExpiresByType image/png "access plus 2 months" 
    ExpiresByType image/gif "access plus 2 months" 
    ExpiresByType application/x-shockwave-flash "access plus 2 months" 
    ExpiresByType text/css A15552000 
    ExpiresByType text/javascript "access plus 2 months" 
    ExpiresByType application/x-javascript "access plus 2 months" 
    ExpiresByType text/html "access plus 600 seconds" 
    ExpiresByType application/xhtml+xml "access plus 600 seconds" 
</IfModule> 
# END Expire headers 
# BEGIN Cache-Control Headers 
<IfModule mod_headers.c> 
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$"> 
    Header set Cache-Control "max-age=15552000, public" 
</FilesMatch> 
<FilesMatch "\\.(css)$"> 
    Header set Cache-Control "max-age=2678400, public" 
</FilesMatch> 
<FilesMatch "\\.(js)$"> 
    Header set Cache-Control "max-age=2678400, private" 
</FilesMatch> 
<FilesMatch "\\.(x?html?|php)$"> 
    Header set Cache-Control "max-age=600, private, must-revalidate" 
</FilesMatch>

來源

2011-02-13 04:35:38 tenshimsm

我已經和這個新版本測試，它的工作原理，緩存用於第二張圖像，在IE7 & FF3.6上測試。不同之處在於我在load（）jQuery回調中設置了img src屬性（但爲何仍然是我的謎團）。

在這個例子中要小心，我用巨大的圖像來真正看到差異。

$(function() { 
    var use_unique_name = true; 

    var imgsrc = 'http://www.challey.com/WTC/wtc_huge.jpg'; 
    if (use_unique_name) { 
     var ts = +(new Date()); 
     // try replacing _= if it is there 
     var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); 
     // if nothing was replaced, add timestamp to the end 
     imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : ""); 
    } 

    var loader = $('<iframe />').appendTo('body'); 

    loader.load(function() { 
     var img = jQuery('<img src="#"/>'); 
     $('body').append(img); 
     img.attr('src',imgsrc); 
    }); 

    loader.attr('src', imgsrc); 
});

編輯撥弄鏈接： http://jsfiddle.net/regilero/g8Hfw/

來源

2011-02-14 11:56:44 regilero

圖像在加載到iframe後無法從緩存中加載

回答

相關問題