Image onload for static images

Question

I know that for the image onload to work you have to set the src after the onload handler was attached. However I want to attach onload handlers to images that are static in

Answer 1

You can trigger the event (or it's handler) directly by calling .trigger() or .load().

If you know that you want the event, because you know that the images are already loaded, then you can do it like this:

$('#img1').load(function() {
    alert('foo');
  })
  .trigger('load');  // fires the load event on the image

If you are running your script on document ready or some moment where it isn't yet clear if the images are there or not, then I would use something like this:

$('img.static')
  .load(function(){
    alert('foo');
    return false; // cancel event bubble
  })
  .each(function(){
    // trigger events for images that have loaded,
    // other images will trigger the event once they load
    if ( this.complete && this.naturalWidth !== 0 ) {
      $( this ).trigger('load');
    }
  });

Be warned that the load event bubbles (jQuery 1.3) and you might possibly be triggering a load handler on the document prematurely if you don't cancel the bubble in the img handler.

For the record: The img.src=img.src triggering solution will unfortunately not work correctly on Safari. You will need to set the src to something else (like # or about:blank) and then back for reload to happen.