I have a custom event switchSlideEvent
firing each time a switchSlide() method is called from a jQuery Carousel plugin with no documentation.
I am using Lazy Load XT (https://github.com/ressio/lazy-load-xt) to lazy load images, however, the plugin only loads images on the following events load
orientationchange
resize
scroll
.
Lazy Load XT is initialized like so:
$.extend($.lazyLoadXT, {
selector: 'img[data-original]',
srcAttr: 'data-original',
edgeY: 200,
updateEvent: 'load orientationchange resize scroll switchSlideEvent'
});
I've tried the following solutions, but haven't had any success:
switchSlideEvent
to the Lazy Load XT updateEvent
option (seen above).on('switchSlideEvent')
like so:I'm getting console.log events, but the carousel images "slid" into view are not loading until I scroll the page.
$(document).ready(function(){
$(document).on('switchSlideEvent', function(){
console.log("custom event fired");
$(window).lazyLoadXT();
});
});
QUESTION
How can I force Lazy Load XT to load the new images when switchSlideEvent
fires?
Any help is greatly appreciated.
Thanks!
Within the switchSlide()
method of the carousel plugin, there was an animate
method with a complete
callback function. I added another event $.event.trigger("switchSlideAnimateEvent")
within the complete
callback function and adjusted my initialization code as follows:
$.extend($.lazyLoadXT, {
selector: 'img[data-original]',
srcAttr: 'data-original',
edgeY: 200,
updateEvent: 'load orientationchange resize scroll switchSlideEvent switchSlideAnimateEvent'
});
I removed the $(document).on(switchSlideEvent)
handler completely as it was not necessary and the images are now loading properly.
Cheers.