iDangero.us Swiper - dealing with large image sets
Question
In my template, I genereate the iDangero.us "Swiper" slideshow:
<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>
This works, however when I'm loading approximately 100 images (for about 5MB total of image data), it can take as much as 15 seconds for the slideshow to "snap to attention" (so to speak). Until then it stacks the images one on top of the other (as they all load). Once they are loaded, then it works fine. I'd like for it to remain "collapsed", even as the images are loading.
Is there a way to do this in the initialization code for Swiper? Also - is there an alternative way to do it just using javascript/css?
Thanks
1 answers
solution1
0 2013-08-09 07:20:25
Give imagesLoaded a try ( https://github.com/desandro/imagesloaded ). Listen to the done/always event and then initialize your swiper.
imagesLoaded(".swiper-wrapper").on("done", function() {
// Initialize swiper
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.