Image not loading from cache after it's loaded

Question

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?

Something like this:

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

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

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

Answer 1

Having an iframe is like having a separate tab, it uses another browser instance, for this reason I believe it is not using the cache.

Still if what you want is having the picture pre loaded, you can use new Image() in javascript

Answer 2

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

edit fiddle link: http://jsfiddle.net/regilero/g8Hfw/

Answer 3

Maybe you sending HTTP headers, which prevent the caching? If you use PHP to send the image to the user and start a session, PHP will set headers forcing reloading the image all the time.

Answer 4

.htaccess can be used to improve caching and you can set headers in PHP too. I use .htaccess: if the image has been loaded once and you've made no change, it will be loaded from cache. This behavior can be set for other types of files (see below):

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