jquery - JavaScript: Know when an image is fully loaded

Question

If I have a beacon:

<img src="http://example.com/beacon" />

I want a method to be called once the beacon request finishes. Something like:

<script>
    $("img.beacon").load(function() {
        // do stuff knowing the beacon is done
    });
</script>

Is it possible? Is it in jQuery?

Answer 1

Sure. Remember the load needs to be added before the src attribute.

$('<img />').load( function(){
  console.log('loaded');
}).attr('src', imgUrl);

If you have defined the image tag in the markup then your stuck with when the window load event fires to be sure the image has come down the wire.