Detect image load by jQuery

Question

<img src="http://site.com/image.png" />

I change src of this image on .click event.

There can be loaded more than 20 different images, after changing src.

1) How do I know, was image already loaded (should be cached) or it has to be loaded?

2) How to run two different functions, for loaded and not?

Thanks.

Answer 1

You need to attach an event handler for the load event:

Update 2017:

$('img').on('load', function() {
    alert('new image loaded: ' + this.src);
});

Plain JS/DOM:

imgNode.onload = () => {
    alert('new image loaded: ' + this.src);
};