Question

在我的模板中，我创建了iDangero.us＆＃34; Swiper＆＃34;幻灯片：

<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秒钟才能引起注意＆＃34; （可以这么说）。在此之前，它将图像叠加在另一个上面（因为它们全部加载）。一旦加载，它就可以正常工作。即使图像正在加载，我也希望它能够保持＆＃34;倒塌＆＃34;

有没有办法在Swiper的初始化代码中执行此操作？另外 - 有没有另外一种方法来使用javascript / css？

由于

Answer 1

尝试使用images（https://github.com/desandro/imagesloaded）。听取完成/总是事件，然后初始化你的swiper。

imagesLoaded(".swiper-wrapper").on("done", function() {
    // Initialize swiper
});

iDangero.us Swiper - 处理大型图像集

1 个答案: