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

Question

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

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

Lazy Load XT 初始化如下：

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

我尝试了以下解决方案，但没有成功：

将 switchSlideEvent 传递给 Lazy Load XT updateEvent 选项（见上文）
像这样手动重新初始化 Lazy Load XT .on('switchSlideEvent')：

我收到了 console.log 事件，但是轮播图片 "slid" 在我滚动页面之前不会加载到视图中。

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

问题

如何在 switchSlideEvent 触发时强制延迟加载 XT 加载新图像？

非常感谢任何帮助。

谢谢！

Answer 1

在 carousel 插件的 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) 处理程序，因为它不是必需的，而且图像现在正在正确加载。

干杯。

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

jQuery Lazy Load XT - Force Image Load On Custom Event

javascript

jquery

lazy-loading

jquery-lazyload