Detect image load

Pablo picture Pablo · Aug 21, 2010 · Viewed 76.9k times · Source

Is it possible to detect once an image has been loaded with jQuery?

Answer

Nick Craver picture Nick Craver · Aug 21, 2010

You can use the .load() event handler, like this:

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

Be sure to attach it before setting the source, or the event may have fired before you attached a handler to listen for it (e.g. loading from cache).

If that's not doable (setting the src after binding), be sure to check if it's loaded and fire it yourself, like this:

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});