Swiper下的延迟加载

参考Swiper.js官方文档相关资料：lazyLoading

1、lazyLoading - 一般懒加载

lazyLoading 属性设为true开启图片延迟加载，使preloadImages（预加载）无效。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图的延迟加载则在元素标签中增加属性data-background（3.0.7开始启用），并增加类名swiper-lazy：

<div class="swiper-lazy" data-background="img/case_bg.png"></div>

<script> 
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
})
</script>

还可以为slide加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

当你设置了slidesPerView:'auto'或者slidesPerView > 1，还需要开启watchSlidesVisibility。

官方使用方法示例：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>
        </div>
    </div>
</div> 
<script> 
var mySwiper = new Swiper('.swiper-container',{
    lazyLoading : true,
})
</script>

2、lazyLoadingInPrevNext - 延迟加载应用到最接近的slide的图片
参考官方文档：lazyLoadingInPrevNext
设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。
lazyLoadingInPrevNext参数

类型：boolean默认：false举例：true启用版本：3.04

官方使用方法示例：

<script> 
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
lazyLoadingInPrevNext : true,
})
</script>

3、lazyLoadingInPrevNextAmount - 设置在延迟加载图片时提前多少个slide
参考官方文档：lazyLoadingInPrevNextAmount

设置在延迟加载图片时提前多少个slide。个数不可少于slidesPerView的数量。
默认为1，提前1个slide加载图片，例如切换到第三个slide时加载第四个slide里面的图片。

扫描二维码关注公众号，回复： 3279067 查看本文章

lazyLoadingInPrevNextAmount参数：
类型：number默认：1举例：2启用版本：3.3.0

官方使用方法示例：

<script> 
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
lazyLoadingInPrevNext : true,
lazyLoadingInPrevNextAmount : 2,
})
</script>