3

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!

3 Answers 3

1

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

1
  • I've tried various forms of that preload function. How then do you use the image cached, in the swap code?
    – Gordon
    Aug 19, 2011 at 22:07
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).

1
  • 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, 2011 at 23:20
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.