Jquery img on.load only works when hard refreshing the page

Question

I have some loading text which I want to replace with a button only if the image has loaded onto the page.

I'm using on.load like so:

$('img.house').on('load', function() {
        $('.loading').hide();
        $('#startgame').show(); 
});

This works great when I go to the site first time but when I then refresh the page It doesn't hide the .loading div.

If I then do a hard refresh on the page, it works...

Can anyone help me please?

Possible duplicate of [jQuery callback on image load (even when the image is cached)](https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) — UncaughtTypeError, Dec 12 '17 at 17:12

score 3 · Accepted Answer · answered Dec 12 '17 at 17:09

3

Jquery's .load has some caveats you can see here: https://api.jquery.com/load-event/

The important one is here:

Can cease to fire for images that already live in the browser's cache

Check out this thread for another possible solution of someone trying to fix the exact problem you're having: jQuery callback on image load (even when the image is cached)

EDIT: Neat, there's a plugin to work around the little inconsistencies: https://github.com/desandro/imagesloaded

answered Dec 12 '17 at 17:09

wholevinski

Nice - I'm going to use the question you've inlinked to as a possible duplicate and vote to close. – UncaughtTypeError Dec 12 '17 at 17:12
Thanks mate, will mark as correct answer in 8 mins :) – Shaun Dec 12 '17 at 17:12

1 Answers1