lazyLoading
设为true开启图片延迟加载，使preloadImages无效。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background（3.0.7开始启用）。
还可以为slide加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background（3.0.7开始启用）。
还可以为slide加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
lazyLoading参数
- 类型：
- boolean
- 默认：
- false
- 举例：
- true
- 启用版本：
- 3.04
效果演示
背景图的延迟加载使用方法示例
<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>转载原创文章请注明：文章转载自：Swiper中文网 [https://3.swiper.com.cn]
本文地址：https://3.swiper.com.cn/api/Images/2015/0308/213.html