jQuery image swap from cache?

Question

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:

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.
implemented various jQuery caching code, posted in stakoverflow and different sites, and that doesn't seem to matter either.
Firefox cache is turned on in the config file.

Thanks for any ideas!

score 1 · Answer 1 · edited May 23 '17 at 12:04

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

I've tried various forms of that preload function. How then do you use the image cached, in the swap code? — Gordon, Aug 19 '11 at 22:07

score 0 · Answer 2 · answered Aug 19 '11 at 16:58

0

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

answered Aug 19 '11 at 16:58

Diodeus - James MacFarlane

112,730
33
157
176

this was the most useful. I was just being lazy. I deal with so many systems, it's hard to keep them all straight. I should have done it this way in the first place, but I got caught in jQuery mode. Thanks for jogging my memory. – Gordon Aug 19 '11 at 23:20

score 0 · Answer 3 · answered Aug 19 '11 at 16:58

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.

jQuery image swap from cache?

3 Answers3