Why would an image that has already been loaded on the page load again?

Question

I'm removing and replacing the src of an image in the dom using

$('.myImg').attr('src',imgURL);

I'm trying to use this with an on load event. I expected that the load event would only be triggered if imgURL hadn't already been loaded on the page.

Instead, sometimes, the load event is triggered. I can see when it is that in the chrome network tab that the image is returning with a 304 Not Modified status.

I know how to work around this issue, but I'm just curious as to if this is normal.

I guess the best way to phrase this question is what would cause the browser to try to load an image again that has already been loaded onto the page once? There is a cache killer in place, however it's not being updated before I display the image again.

Answer 1

304 is not some kind of commandment to "NEVER LOAD THIS AGAIN EVER!". It is simply a suggestion to client's caching system that no reload is necessary. Based on it's internal algorithm that, naturally, will differ in different implementations, it may choose to load resource anyway.

Answer 2

Try using

$(window).load(function () {
  // run code
});

The function will be triggered only when the dom tree and graphics are loaded.

Answer 3

The problem ended up being that I had "diable cache" checked in my developer tools :-)