splideを使用して、ローディングが終わってからスライダーをスタートしたいです。

Question

実現したいこと

splideを使用して、ローディングが終わってからスライダーをスタートしたい。

前提

splideを使用して、３枚の画像をスライドできるようになりました。
ページローディング後に１の初めからではなく、２くらいから始まってしまいます。

スライダーのソースコード

<div id="splide" class="splide" role="group" aria-label="Splideの基本的なHTML">
      <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev button prev"></button>
        <button class="splide__arrow splide__arrow--next button next"></button>
      </div>
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide sl1"><img class="op" src="splide/1.png" alt=""/><img src="img/imdex/sp1.png" alt=""/></li>
          <li class="splide__slide sl2"><img class="op" src="splide/2.jpg" alt=""/><img src="img/imdex/sp2.png" alt=""/></li>
          <li class="splide__slide sl3"><img class="op" src="splide/3.jpg" alt=""/><img src="img/imdex/sp3.png" alt=""/></li>
        </ul>
      </div>
    </div>

document.addEventListener('DOMContentLoaded', function() {
var slider = new Splide( '.splide', {
	type : 'loop',
    autoplay: true,
  interval: 6000,
  speed: 1000,
  pauseOnFocus: false,
}).mount();
    })

ローディングのソースコード

<div id="js-loader" class="loader"></div>

.loader {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}
.loader::after {
  animation: loader 0.5s linear infinite;
  border: 1px solid orange;
  border-radius: 50%;
  border-right: 1px solid rgba(255, 165, 0, 0.2);
  border-top: 1px solid rgba(255, 165, 0, 0.2);
  content: "";
  height: 70px;
  width: 70px;
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

const loader = document.getElementById('js-loader');
window.addEventListener('load', () => {
  const ms = 400;
  loader.style.transition = 'opacity ' + ms + 'ms';
  
  const loaderOpacity = function(){
    loader.style.opacity = 0;
  }
  const loaderDisplay = function(){
    loader.style.display = "none";
  }
  // setTimeout(loaderOpacity, 1);
  // setTimeout(loaderDisplay, ms);
  // デモ用
  setTimeout(loaderOpacity, 1000);
  setTimeout(loaderDisplay, 1000 + ms);
});

試したこと

上記のようなソースコードでかいております。
わざと重めの画像を貼り、サーバーに上げてブラウザで閲覧すると、１の初めからではなく２くらいから始まってしまいます。
document.addEventListener('DOMContentLoaded', function() {
でページが読み込まれてから発火できるとのさいとをみつけ
jQueryで動く「きっかけ」を指定しよう
設置してみたのですが、スライダーは動きますが途中からで・・・。

ご意見いただけましたら幸いです。

補足情報（FW/ツールのバージョンなど）

win11
仕様ソフト：dreamweaver
閲覧ブラウザ：chrome
閲覧ブラウザ：edge

Answer 1

ありがとうございます！
GPT-4すごすぎます！
ソースを勉強して、今後に役立てたいと思います。

Answer 2

この回答はGPT-4による自動生成回答です

以下のように、window.addEventListener('load', ...) の中で Splide を初期化することで、ページのローディングが完了してからスライダーが開始されるようになります。

window.addEventListener('load', () => {
  const ms = 400;
  loader.style.transition = 'opacity ' + ms + 'ms';
  
  const loaderOpacity = function(){
    loader.style.opacity = 0;
  }
  const loaderDisplay = function(){
    loader.style.display = "none";
  }
  // setTimeout(loaderOpacity, 1);
  // setTimeout(loaderDisplay, ms);
  // デモ用
  setTimeout(loaderOpacity, 1000);
  setTimeout(loaderDisplay, 1000 + ms);

  // Splideの初期化をここに移動
  var slider = new Splide( '.splide', {
    type : 'loop',
    autoplay: true,
    interval: 6000,
    speed: 1000,
    pauseOnFocus: false,
  }).mount();
});

これにより、ページのローディングが完了した後に Splide が初期化され、スライダーが最初から開始されるようになります。