javascript - jQuery Lazy Load XT - 在自定义事件上强制加载图像

Question

每次从没有文档的 jQuery Carousel 插件调用 switchSlide() 方法时，我都会触发一个自定义事件 switchSlideEvent 。

我正在使用 Lazy Load XT ( https://github.com/ressio/lazy-load-xt ) 来延迟加载图像，但是，该插件仅在以下事件时加载图像 load orientationchange resize 滚动。

Lazy Load XT 的初始化如下:

$.extend($.lazyLoadXT, {
   selector: 'img[data-original]',
   srcAttr: 'data-original',
   edgeY: 200,
   updateEvent: 'load orientationchange resize scroll switchSlideEvent'
});

我尝试了以下解决方案，但没有取得任何成功:

1. 将 switchSlideEvent 传递给 Lazy Load XT updateEvent 选项(如上所示)
2. 手动重新初始化 Lazy Load XT .on('switchSlideEvent')，如下所示:

我收到了 console.log 事件，但“滑”入 View 的轮播图像在滚动页面之前不会加载。

$(document).ready(function(){
  $(document).on('switchSlideEvent', function(){
    console.log("custom event fired");
    $(window).lazyLoadXT();
  }); 
});

问题

当 switchSlideEvent 触发时，如何强制 Lazy Load XT 加载新图像？

非常感谢任何帮助。

谢谢!

Answer 1

在轮播插件的 switchSlide() 方法中，有一个带有 complete 回调函数的 animate 方法。我在 complete 回调函数中添加了另一个事件 $.event.trigger("switchSlideAnimateEvent") 并调整了我的初始化代码，如下所示:

$.extend($.lazyLoadXT, {
selector: 'img[data-original]',
srcAttr: 'data-original',
edgeY: 200,
updateEvent: 'load orientationchange resize scroll switchSlideEvent switchSlideAnimateEvent'
});

我完全删除了 $(document).on(switchSlideEvent) 处理程序，因为它没有必要，并且图像现在可以正确加载。

干杯。