在iframe中加载后，图像不会从缓存中加载 [英] Image not loading from cache after it's loaded in an iframe

问题描述

我正在iframe中加载图片，然后（加载iframe后）在页面上加载图片。但是大多数浏览器似乎都在加载图像两次。 为什么从缓存中加载 img 标记？

I'm loading an image in an iframe and then (once the iframe is loaded) loading the image on the page. But most browsers seem to be loading the image twice. Why isn't the img tag being loading from the cache?

类似于这个：

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

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

我正在使用 fiddler2 查看网络流量。

I'm using fiddler2 to see the network traffic.

如果您想知道我为什么要这样做执行此操作，请查看此问题

In case you want to know why I want to do this, check out this question

推荐答案

我已经测试了这个新版本并且它可以工作，缓存用于第二个图像，在IE7& FF3.6。区别在于我在load（）jQuery回调中设置img src属性的方式（但为什么对我来说仍然是一个谜）。

I have tested with this new version and it works, caching is used for the second image, tested on IE7 & FF3.6. the difference is in the way i set the img src attribute in the load() jQuery callback (but why remains a mystery for me).

在这个例子中要小心我使用巨大的图片来真正看到差异。

Be careful in this example I used a huge image to really see the difference.

$(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中加载后，图像不会从缓存中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！