1

在我的模板中，我生成了 iDangero.us “Swiper”幻灯片：

<body>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="..."></div>
<div class="swiper-slide"><img src="..."></div>
<div class="swiper-slide"><img src="..."></div>
... (image n)
</div>
<script>
$(function() {
  // initialize swiper
})
</script>
</body>

这是可行的，但是当我加载大约 100 张图像（总共大约 5MB 的图像数据）时，幻灯片“迅速引起注意”可能需要 15 秒（可以这么说）。在那之前，它将图像一个一个堆叠在另一个之上（因为它们都加载了）。一旦它们被加载，它就可以正常工作。我希望它保持“折叠”状态，即使图像正在加载。

有没有办法在 Swiper 的初始化代码中做到这一点？另外 - 是否有另一种方法可以仅使用 javascript/css 来做到这一点？

谢谢

4

1 回答 1

0

试试 imagesLoaded ( https://github.com/desandro/imagesloaded )。监听 done/always 事件，然后初始化你的 swiper。

imagesLoaded(".swiper-wrapper").on("done", function() {
    // Initialize swiper
});
于 2013-08-09T07:20:25.813 回答