Изображение не загружается из кеша после загрузки в iframe

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/

IЯ использую fiddler2 для просмотра сетевого трафика.

Если вы хотите узнать, почему я хочу это сделать, проверьте этот вопрос

Answer 1

Я протестировал с этой новой версией, и она работает, кэширование используется для второго изображения, протестированного на IE7 и FF3.6. разница в том, как я устанавливаю атрибут img src в обратном вызове load () jQuery (но почему для меня остается загадкой).

Будьте осторожны, в этом примере я использовал огромное изображение, чтобы действительно увидеть разницу.

$(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 fiddle link: http://jsfiddle.net/regilero/g8Hfw/

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

Наличие iframe похоже на отдельную вкладку, он использует другой экземпляр браузера, поэтому я считаю, что он не использует кеш.

Тем не менее, если вам нужно предварительно загрузить изображение, вы можете использовать new Image() в javascript