javascript - Detect image load by jQuery

<img src=".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.

<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.

Share Improve this question edited Mar 13, 2011 at 22:20 asked Mar 13, 2011 at 22:12 James 43.6k54 gold badges137 silver badges163 bronze badges

Also see this question: stackoverflow.com/questions/1948672/… – J. Taylor Commented Mar 13, 2011 at 22:16
Possible duplicate of Browser-independent way to detect when image has been loaded – Liam Commented Jun 26, 2017 at 9:25

Add a comment |

1 Answer 1

Sorted by: Reset to default 22

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);
};