9

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.

thinsoldier
  • 299
  • 1
  • 3
  • 7

2 Answers2

11

found this to work:

$('img.lazy').on('appear',function(){
  console.log(this)//fires this function when it appears
});
Entrabiter
  • 752
  • 7
  • 13
  • nice!, how can I capture 404s? – Sajjan Sarkar Nov 09 '16 at 16:33
  • Is 'appear' the correct argument here? I have a feeling that it means 'appear in the viewport', not 'image has appeared'. For me it's triggering pretty much as soon as the script loads, not when the image has loaded. – Nathan Hornby Apr 06 '17 at 14:09
4

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
});
Nathan Hornby
  • 1,423
  • 16
  • 32