Question

我正在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

Answer 1

拥有iframe就像拥有一个单独的选项卡一样，它使用另一个浏览器实例，因此我认为它不使用缓存。

如果你想要的是预先加载的图片，你可以在javascript中使用new Image()

Answer 2

也许您发送HTTP标头，这会阻止缓存？如果您使用PHP将图像发送给用户并启动会话，PHP将设置标题以强制重新加载图像。

Answer 3

.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>

Answer 4

我已经使用这个新版本测试了它的工作原理，缓存用于第二个图像，在IE7＆amp; 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/

图像在加载到iframe后不从缓存加载

4 个答案: