CODEWITHSUNDEEP
javascriptjquerylazy-loadingjquery-lazyload
Aaron C.
Aaron C.

Reputation: 51

jQuery Lazy Load XT - Force Image Load On Custom Event

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:

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

Upvotes: 0

Views: 2020

Answers (1)

Aaron C.
Aaron C.

Reputation: 51

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.

Upvotes: 1

Related Questions