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.
Using browser-level lazy-loading # This attribute can be added to <img> elements, and also to <iframe> elements. A value of lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them.
If you want to test the execution of lazy loading, I can recommend that you clear your browser's cache and try reloading. In Chrome's Developer Console (F12), you can tweak the speeds and simulate modem speeds. Hit F12 -> Network tab -> Change the "No throttling" dropdown . Choose a slower speed to experiment.
IMG tags can leverage native browser lazy loading, which doesn't require any JavaScript. You can still lazy load background images if they're in HTML as an inline style. Plugins like FlyingPress automatically detect and lazy load them.
If you're not sure if lazy loading is working correctly, you can open the Chrome DevTools and check that the images are not loaded until the scroll.
found this to work:
$('img.lazy').on('appear',function(){
console.log(this)//fires this function when it appears
});
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With