CODEWITHSUNDEEP
jqueryhtmlcss
Shaun
Shaun

Reputation: 811

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

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?

Upvotes: 1

Views: 84

Answers (1)

wholevinski
wholevinski

Reputation: 3828

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

Upvotes: 3

Related Questions