Swiper JS：如何在事件中传参？仅触发首张图片加载完成事件

你可以通过以下两种方式实现仅在首张懒加载图片就绪时执行目标逻辑：

方法一：判断幻灯片索引 #

利用事件回调提供的slideEl参数，校验当前加载完成图片所在的幻灯片是否为第一张（索引为0），满足条件才执行代码：

swiper.on("lazyImageReady", function (swiper, slideEl) {
  // 获取当前slide在全部slides中的索引
  const slideIndex = swiper.slides.indexOf(slideEl);
  if (slideIndex === 0) {
    console.log("首张图片loaded");
    swiper.params.autoplay.delay = 1500;
    console.log(swiper.params.autoplay.delay);
  }
});

方法二：执行一次后解绑事件 #

如果只需要触发一次逻辑，在首次触发完成后直接解绑该事件，避免后续图片加载时重复执行：

function handleFirstLazyLoad(swiper, slideEl) {
  const slideIndex = swiper.slides.indexOf(slideEl);
  if (slideIndex === 0) {
    console.log("首张图片loaded");
    swiper.params.autoplay.delay = 1500;
    console.log(swiper.params.autoplay.delay);
    // 解绑事件，后续不再监听该事件
    swiper.off("lazyImageReady", handleFirstLazyLoad);
  }
}

swiper.on("lazyImageReady", handleFirstLazyLoad);

补充说明 #

• swiper.slides是Swiper所有幻灯片的DOM元素集合，通过indexOf(slideEl)可获取当前slide的索引（从0开始计数）
• 方法二更高效，因为首次触发后事件会被移除，不会再消耗资源监听后续的懒加载完成事件

内容的提问来源于stack exchange，提问作者Aurore