如何检测SplideJS是否已完全加载并执行后续操作？

要判断SplideJS是否完全加载并初始化完成，你需要使用Splide官方提供的**mounted事件**，这是专门用于监听Splide挂载完成、所有初始化流程结束的事件。

为什么你之前的方法无效？ #

• 页面的load事件仅针对整个页面或iframe资源加载，和Splide的初始化流程无关。
• 直接同步判断splide.state.is(...)时，mount()方法的异步初始化还未完成，状态还未更新到目标值。
• move事件是滑块发生位移时触发，autoplay:play仅在自动播放启动时触发，都无法作为Splide加载完成的标志。

正确实现代码 #

document.addEventListener('DOMContentLoaded', function() {
  var splide = new Splide('.splide');

  // 监听mounted事件，在Splide完全加载后执行操作
  splide.on('mounted', function() {
    console.log('Splide已完全加载完成');
    // 在这里编写你的后续逻辑
  });

  splide.mount(window.splide.Extensions);
});

完整示例代码 #

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">

<section class="splide" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
      <li class="splide__slide">Slide 04</li>
      <li class="splide__slide">Slide 05</li>
      <li class="splide__slide">Slide 06</li>
    </ul>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.4.2/dist/js/splide-extension-auto-scroll.min.js"></script>

CSS

.splide {
  height: 300px;
}

.splide__slide {
  background-color: gray;
  color: white;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var splide = new Splide('.splide');

  splide.on('mounted', function() {
    console.log('Splide已完全加载');
    // 执行你的后续操作，比如修改滑块样式、绑定额外事件等
  });

  splide.mount(window.splide.Extensions);
});

补充说明 #

如果你的场景需要在Splide的DOM结构初始化完成但还未完成所有动画/计算时执行操作，可以改用**ready事件**，但mounted事件更贴合“完全加载”的需求。

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