为什么一次又一次地加载背景图像?

我在演示中使用了下面的软件包

https://splidejs.com/options/ 一切正常。但我面临两个问题。

1. 为什么第一张幻灯片中没有加载图像? 实际上,当幻灯片只有在设置背景图像时才可见时,我实现了延迟加载功能。但是 它在第二张幻灯片中工作。但不是一开始就工作。 滑动 .

一步一步复制。

1. 运行应用程序。检查第一张幻灯片中是否没有图像

第二期。 2.当我浏览导航按钮时 > 按钮它会加载新幻灯片。就像多重时代。您将看到第一张幻灯片何时出现。它又下载了为什么??或者隐藏并再次显示图像。

这是我的密码 https://codesandbox.io/s/little-resonance-4yhvz?file=/src/index.js

import "./styles.css";
import Splide from "@splidejs/splide";
const x = new Splide("#splide", {
  type: "loop"
}).mount();
x.Event.on("visible", function ({ slide }) {
  if (slide && !slide.classList.contains("bgimg")) {
    slide.style.backgroundImage = `url('${slide.getAttribute("data-bgim")}')`;
    slide.classList.add("bgimg");
  }
});

x.Event.on("active", function ({ slide }) {
  console.log(slide);
});


 any update ?