La imagen no se carga desde la memoria caché después de cargarla en un iframe

Question

Estoy cargando una imagen en un iframe y luego (una vez cargado el iframe) cargando la imagen en la página. Pero la mayoría de los navegadores parecen estar cargando la imagen dos veces. ¿Por qué la etiqueta img no se está cargando desde la memoria caché?

Algo como esto:

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

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

estoy usando fiddler2 para ver el tráfico de la red.

En caso de que quiera saber por qué quiero hacer esto, echa un vistazo a this question

Answer 1

Tener un iframe es como tener una ficha independiente, que usa otra instancia del navegador, por esta razón creo que no está utilizando el cache.

embargo, si lo que quiere es tener la imagen pre cargado, puede utilizar new Image() en javascript

Answer 2

Tal vez de enviar las cabeceras HTTP, que impiden el almacenamiento en caché? Si usa PHP para enviar la imagen al usuario e iniciar una sesión, PHP establecerá encabezados obligando a recargar la imagen todo el tiempo.

Answer 3

.htaccess se puede utilizar para mejorar el almacenamiento en caché y también se pueden establecer encabezados en PHP. Uso .htaccess: si la imagen se ha cargado una vez y no ha realizado ningún cambio, se cargará desde la memoria caché. Este comportamiento puede ser configurado para otros tipos de archivos (ver más abajo):

.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

He probado con esta nueva versión y funciona, el almacenamiento en caché se utiliza para la segunda imagen, probada en IE7 & FF3.6. la diferencia está en la forma en que configuro el atributo img src en load() jQuery callback (pero por qué sigue siendo un misterio para mí).

Tenga cuidado en este ejemplo utilicé una gran imagen de para realmente ver la diferencia.

$(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); 
}); 

enlace editar violín:. http://jsfiddle.net/regilero/g8Hfw/