jQuery .load() not firing on images (probably caching?)

Question

I have some pretty basic jQuery code:

...
$(this).find('img').load(function(){
   loadedImages++;
   if(loadedImages == $this.find('img').length){
...

However, thats not firing consistently. It fires if i do a hard refresh or close my browser, but a normal refresh, or just hitting the same URL twice at any time without erasing the cache makes the .load() never fire.

Any ideas on how to fix this?

See relevant answers [here](http://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images) — Ron Harlev, Apr 11 '11 at 16:56
That did it thanks! See my more specific answer after reading those answers! — Oscar Godson, Apr 11 '11 at 17:01

score 42 · Answer 1 · edited May 23 '17 at 10:29

42

I think this has been discussed before. It’s not the caching per se that is the problem but the timing: the images may already have been loaded by the time the event handler is attached (so it never gets fired). This may also occur if no caching happens, for example in a multithreaded browser on a very fast connection. Fortunately, there is a property .complete that you can use:

var load_handler = function() {
    loadedImages++;
    …
}
$(this).find('img').filter(function() {
    return this.complete;
}).each(load_handler).end().load(load_handler);

You can also create your own event attach function:

jQuery.fn.extend({
    ensureLoad: function(handler) {
        return this.each(function() {
            if(this.complete) {
                handler.call(this);
            } else {
                $(this).load(handler);
            }
        });
    }
});

And then call it as follows:

$(this).find('img').ensureLoad(function(){
    loadedImages++;
    if(loadedImages == $this.find('img').length){
    …
});

edited May 23 '17 at 10:29

Community

1
1

answered Apr 11 '11 at 17:09

Raphael Schweikert

17,126
5
51
67

In case you are dynamically changing `src` of image and rely on "load" event to do something with it when it loads, you can trigger load manually if the image is in cache already by like so: `image.attr('src', ); if(image[0].complete) { image.trigger('load') }` – hakunin Oct 11 '12 at 12:13
2

This is a very elegant solution, a better answer than the one accepted. The one that was accepted is a crude solution but it also prevents caching. In my app, there are 30+ high res photos showing up, so I had an issue where the first load would take a while until all images were loaded and sizes calculated (diff size each time), and when re-visiting, the cache caused the load() to not fire up at all. If I disable caching it will take long to load each time visitor comes in. – jeffkee Jul 30 '13 at 21:38
This definitly must be the accepted solution. Preventing the whole cache is a terrible idea! – Blackbam Mar 27 '18 at 16:05

score 4 · Accepted Answer · edited Mar 27 '18 at 16:13

4

A way would be to add a "dummy variable" at the end of the URL that you use to grab the image... such as the time in milliseconds appended as a query string param.

Edit: Preventing the Browser to Cache images is a very bad idea in 99% of the cases as it will slow down your application. Instead you should check if an image is already loaded, and if not wait for the load event to complete.

edited Mar 27 '18 at 16:13

Blackbam

12,200
19
71
117

answered Apr 11 '11 at 16:56

El Guapo

5,253
7
51
78

That's not crude, that's common practice. :) – Diodeus - James MacFarlane Apr 11 '11 at 17:11
@Diodeus -- Very true... I'll edit the post so it doesn't look so ill-conceived... thanks. – El Guapo Apr 11 '11 at 17:50
@Diodeus It's not common practice if your are creating HttpHandlers to rewrite Urls. – AndroidDev Jun 06 '13 at 13:34
14

@Diodeus: It is crude. You then are actually losing the magical wonders of cacheing -- something you definitely want on your website. – ChaseMoskal Oct 02 '13 at 08:43
I've often heard this referred to as [cache busting](http://stackoverflow.com/questions/9692665/cache-busting-via-params). – doug65536 Oct 21 '15 at 05:48
The delay caused by the cache miss just hides the problem though, in this case. – doug65536 Oct 21 '15 at 05:55
I'm not sure if this is a good fix, but I had the same problem and I just needed to fire up some js when I was sure all images were loaded, so I solved by putting the listener on window `$( window ).load(...)` – Kuzeko Nov 24 '16 at 16:01

score 3 · Answer 3 · answered Apr 11 '11 at 17:01

3

As Ron and El Guapo said, the answer is to add a query at the end of the URL. I did this like this:

$(this).find('img').each(function(){
   $(this).attr('src',$(this).attr('src')+'?'+new Date().getTime())  
}).load(function(){
   //This will always run now!

answered Apr 11 '11 at 17:01

Oscar Godson

28,084
40
103
191

4

Whilst this does answer the original question, it prevents your images being cached by the browser, not ideal as it will slow down the page loading. – James Goodwin Jul 20 '13 at 10:02

jQuery .load() not firing on images (probably caching?)

3 Answers3

Linked