Question

我在演示中使用以下包

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

为什么第一张幻灯片中没有加载图像？实际上，仅当我设置背景图像时幻灯片才可见时，我已经实现了延迟加载功能。但是 它正在第二张幻灯片中工作。但不是首先工作。幻灯片 .

步骤重现。

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

第二期。 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 ?

为什么背景图片加载一次又一次？

0 个答案: