jQuery image swap from cache?

I'm using jQuery and running on Firefox, Swapping images for an collapsible list (triangle symbols to indicate if the list is expanded or collapsed), and the images never seem to load from the cache, but are always loaded from the net. This greatly slows the swap. What could be causing this situation?

here's a sample of my swap code:

jQuery('img.clickIt').attr('src','http://www.mysite.com/images/expandon.gif');

what I have tried开发者_运维技巧:

1. loading the images to be swapped in a hidden div on the same page, I thought that would allow jQuery to load the images from the cache, but it doesn't seem to work.

2. implemented various jQuery caching code, posted in stakoverflow and different sites, and that doesn't seem to matter either.

3. Firefox cache is turned on in the config file.

Thanks for any ideas!

Also you can check how content caching is setup on www.mysite.com server.

In Apache you can control content caching with mod_expires:

ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# css may change a bit sometimes
ExpiresByType text/css "access plus 1 days"

# special MIME type for icons - see http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
AddType image/vnd.microsoft.icon .ico
# now we have icon MIME type, we can use it
# my favicon doesn't change much
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"

Taken from here: Website image caching with Apache

2) Good function for image pre-loading:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

taken from here: Preloading images with jQuery

Use a pre-defined CSS background instead (and class names), that way you'll be sure that the images are cached. Then just swap class names instead of re-writing HTML (which is way slower).

An image loaded during runtime of the page, be it by an html img element or javascript, should then be cached for subsequent loads on the same page. If that's not occurring, the following will not work any better than the stuff you already tried, but in the interest of trial-and-error...

you could do old school Javascript image pre-loading, i.e.:

img = new Image();
img.src = "whatever.jpg";

when the time comes:

jQuery('img.clickIt').attr('src', img.src);

I'm wondering if some of your browser settings or even server settings wherever the image is hosted are changing standard cache functionality, though.