图像在加载到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后无法从缓存中加载

回答

相关问题