jQuery Lazy Load XT - Force Image Load On Custom Event

Question

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:

Pass switchSlideEvent to the Lazy Load XT updateEvent option (seen above)
Manually re-initialize Lazy Load XT .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!

Aaron C. · Accepted Answer · 2015-07-21 22:11:34Z

1

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.

answered Jul 21, 2015 at 22:11

Aaron C.

511 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Lazy Load XT - Force Image Load On Custom Event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related