我在 iframe 中加载图像，然后（加载 iframe 后）将图像加载到页面上。但大多数浏览器似乎两次加载图像。 为什么没有从缓存中加载img 标记？
类似这样的：
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
【问题讨论】：
标签： javascript jquery image caching iframe
拥有 iframe 就像拥有一个单独的选项卡，它使用另一个浏览器实例，因此我认为它没有使用缓存。
如果你想要预加载图片，你可以在 javascript 中使用new Image()
【讨论】：
(new Image()).src = "http://www.example.com/myimage.jpg"，它会预加载你的图片。
也许您发送的 HTTP 标头会阻止缓存？如果您使用 PHP 将图像发送给用户并启动会话，PHP 将设置标题强制重新加载图像。
【讨论】：
use_unique_name = false，如果您观察流量，您会发现它确实被缓存了。
.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>
【讨论】：
我已经用这个新版本进行了测试，它可以工作，缓存用于第二个图像，在 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);
});
edit 小提琴链接： http://jsfiddle.net/regilero/g8Hfw/
【讨论】：