How can I trigger an event after lazy load has loaded an image?

Question

I have images that need to be absolutely positioned so that the center of the image is in the center of its parent div. I already have code that does this.

I recently added the Lazy Load plugin and it works as expected. But I need a way of triggering my image centering code after lazy load has loaded and faded-in the image.

My current code is basically this:

jQuery(document).ready( function($) {

// Make all lazy images ready to load themselves and listen for a custom event
$("img.lazy").lazyload({ event:"delayed-lazy-load-event", effect : "fadeIn"});

});


// Wait for the iframes and other important junk to finish loading
jQuery( window ).load( function($){

// trigger lazy loading of thumbnails.
$("img.lazy").trigger("delayed-lazy-load-event")
}

I can't find any info about any feature of Lazy Load that lets me set a callback function to run after it runs the fadeIn effect.

Answer 1

found this to work:

$('img.lazy').on('appear',function(){
  console.log(this)//fires this function when it appears
});

Answer 2

Entrabiter's answer is actually for triggering a function when the image appears on screen, not after it has loaded. To run some code after an image has loaded (i.e. faded in), you need the 'load' argument:

$('img.lazy').on('load',function(){
  console.log(this)//fires this function when it appears
});