0

I have a simple "loading" scenario with 2 images:

$('.img-loading').show();
// main image loaded ?
$('.the-big-img').hide().load(function () {
    // hide/remove the loading image
    $('.img-loading').hide();
    $('.the-big-img').fadeIn();
});

However... this seems to work only most of the times. A few times I am left with the Loading image without the Big img displaying. I'm not sure in which cases the image doesn't show (they are all stored on my localhost and meet the same criteria).

If I hit F5/refresh on the pages where the Big img didn't load, they will load the second time.

Any thoughts?

UPDATE: Found some info here regarding Cache: jQuery .load() not firing on images (probably caching?)

Community
  • 1
  • 1
James
  • 391
  • 1
  • 5
  • 17
  • Can you provide a link to this on the live page? If not, try using inline CSS on the images for how you want them to start out, then set the `img-loading` to hide() + `the-big-img` to fadeIn() inside of the `load()`. Also, give them both the same class and use `id="img-loading"` etc for specificity. Then you can call `$('.both-images-to-load').load()` and it will load when they are both complete – Deryck Nov 30 '13 at 14:04
  • Oh and loading images and running actions like this isn't very accurate because browsers can cache the image and then the `.load()` function doesn't run because the browser never requests it. That's why you're not seeing the other image until after you refresh (refresh flushes the cache to get a new image) – Deryck Nov 30 '13 at 14:09
  • Yes, I figure that the Cache must be the issue. So... what's the solution? :( – James Nov 30 '13 at 14:13
  • Ok, I found a relevant topic here: http://stackoverflow.com/questions/5624733/jquery-load-not-firing-on-images-probably-caching – James Nov 30 '13 at 14:17

1 Answers1

1

I'm gonna give you a couple other solutions as well in case what you found doesn't work out.

Disable ETag in Apache:

This tells the browser to load a new version of the file every single time, eliminating the cache issue.

Header unset ETag
FileETag None

Place an image holder animation in place of the pending image until it loads:

Deryck
  • 7,328
  • 1
  • 21
  • 43
  • Yeah, I got the Loading-img part. On the other hand, I don't know how comfortable I feel about eliminating cache by loading a different version of the same image every time just to have a "loading effect". – James Dec 04 '13 at 11:24