图像在 iframe 中加载后未从缓存中加载

Posted 2023-05-09

【中文标题】图像在 iframe 中加载后未从缓存中加载

【英文标题】：Image not loading from cache after it's loaded in an iframe

【发布时间】：2011-06-26 06:11:16

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

是的，你可以使用(new Image()).src = "http://www.example.com/myimage.jpg"，它会预加载你的图片。

@Adam 这不是我想做的。如果您阅读了另一个问题，您就会明白我为什么要将它加载到 iframe ***.com/questions/4926215/…

缓存是共享的...这就是为什么 CDN 网络（如 google 和 microsoft）在一个地方托管 jQuery 之类的东西：code.google.com/apis/libraries/devguide.html

【参考方案2】：

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

【讨论】：

不...设置use_unique_name = false，如果您观察流量，您会发现它确实被缓存了。

【参考方案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>

【讨论】：

如上所述，这里的问题不是缓存。文件被缓存。

【参考方案4】：

我已经用这个新版本进行了测试，它可以工作，缓存用于第二个图像，在 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/

【讨论】：

不幸的是，它只适用于 IE 9.0.8080 下的我。它在我测试的其他浏览器上加载图像两次：Chrome 9.0.597.98、Firefox 3.6.13 和 Safari 5.0.3。

奇怪，在FF 3.6.11上运行良好，当你说它加载图像两次时，你的意思是图像需要几秒钟才能加载两次？

@Amir：在 FF 3.6.11、Chrome 9.0.597.98、IE 7.0.5730.13、IE 8.0.7600.16385 上测试成功。您完全确定图像请求第二次需要几秒钟吗？据我所见，只有 Safari 在没有缓存的情况下强制重新加载时会出现此错误。

不一致...当我查看网络流量时，我发现它有时会被加载两次。它大部分时间都在 FF 中工作，但 chrome (windows) 加载它两次......几乎总是：rookery9.aviary.com.s3.amazonaws.com/6737000/6737250_053b.png Linux 上的 Chrome 大部分时间都工作。 IE 工作。 Safari 不一致。我有一种预感，也许它与mime类型有关？即它可能会对它进行不同的解释，具体取决于它是 还是