4

I need to add a .load function to an image, however, I do not want this function added if the image is already cached, mainly because in that .load function I fade in the image and hide a loading indicator.

If the image is already cached, I need none of that. Is there a way to check if it's in the cache?

Thanks, Wesley

  • 1
    You needn't worry about this. Depending on browser, if the image is cached, either your load handler will not fire, or it'll be quick to render any visible effect. – Mrchief Aug 17 '11 at 17:33
  • possible duplicate of [Post-loading : check if an image is in the browser cache](http://stackoverflow.com/questions/2446740/post-loading-check-if-an-image-is-in-the-browser-cache) – Mrchief Aug 17 '11 at 17:34
  • See this: http://stackoverflow.com/questions/3930952/javascript-preloading-images-check-whether-an-image-is-cached-loaded-to-prevent – Mrchief Aug 17 '11 at 17:35
  • I use an 800 ms fadeIn effect, I do not want this happening to cached images @Mrchief –  Aug 17 '11 at 17:35
  • Most browser will not fire the handler, so its not that big a of a concern. Also, check the related questions. You'll find your answer. – Mrchief Aug 17 '11 at 17:37

2 Answers2

3

I appreciate the question was asked a little while ago but I've been looking to solve the same issue, and in case someone else comes across this, here is how I solved it.

I used a window.setTimeout() with 200ms delay which called my preloader effect, and in the .load() event for the image being loaded, the first thing it does is clear the timeout, so if the load was quick - no effect is shown, but if the image load takes longer than 200ms the preloader is displayed:

var imgTmr;

imgTmr = window.setTimeout(function() {showLoading('zoomImage');}, 200);

$("#zoomImage").load(function() {
    window.clearTimeout(imgTmr);
    hideLoading();
}

$("#zoomImage").attr("src", "myLargeImage.jpg");

// The showLoading() and hideLoading() functions just display a wait graphic 
// the image being loaded in this instance has the id of zoomImage
Simon Collingridge
  • 46
  • 2
1

Typically I just leave the load event in place. Even when the image is cached, it takes a few milliseconds (depending on size and computer processing speed) to load it from your computer. Loading still takes place just not from the same source. Therefore you should have the loading event tied to it if it's cached or not.

Joseph Marikle
  • 68,672
  • 14
  • 103
  • 120
  • Actually, I use an 800 millisecond fadeIn effect for displaying loaded images (in a gallery). Though I do not want this for cached images for obvious reasons. –  Aug 17 '11 at 17:35