jQuery .on('load') doesn’t always fire

Question

I’m displaying a spinner until an image is loaded, then, once the image is loaded, I’m fading it in over the spinner. This works really well — but not always.

Here’s my code:

$(document).ready(function() {

    var $img = $('img', 'div.image>figure');

    $img.on('load', function() {
        $(this).fadeIn();
    });
});

This works perfectly the first time, then, after reloading the page, or coming back to it from another page, the image does not fade in.

I'm assuming this might have something to do with the image being cached and therefore either

1. not actually loading through something that jQuery is listening for, or
2. loading before the document is ready?

How can I get jQuery to listen to the right thing? What I want to say to jQuery is: when the image is loaded, or if it's already there, fade it in.

Edit: my image is being hidden in the CSS with display: none.