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

【问题标题】：iDangero.us Swiper - dealing with large image setsiDangero.us Swiper - 处理大型图像集
【发布时间】：2013-07-16 01:07:26
【问题描述】：

在我的模板中，我生成了 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？

谢谢

【问题讨论】：

我相信你想做延迟加载，但我对那个库不熟悉，你能检查一下图像是否加载了吗？用 jquery toggle 切换它

标签： javascript jquery jquery-mobile swiper

【解决方案1】：

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

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

【讨论】：