lazy
设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。
图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
还可以加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
或者黑色的<div class="swiper-lazy-preloader swiper-lazy-preloader-black"></div>
swiper5还新增了可以通过设置Swiper的CSS风格
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
还可以加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
或者黑色的<div class="swiper-lazy-preloader swiper-lazy-preloader-black"></div>
swiper5还新增了可以通过设置Swiper的CSS风格
--swiper-theme-color或单独设置预加载风格--swiper-preloader-color来改变预加载圆圈的颜色。当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
lazy信息
- 类型：
- object/boolean
- 默认：
- false
- 举例：
- true
- 启用版本：
- 4.0.0
效果演示
背景图的延迟加载使用方法示例
从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
<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>
<!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)-->
<div class="swiper-slide">
<img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<!-- 延迟加载背景图的结构 -->
<div class="swiper-slide">
<div data-background="path/to/picture-2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- slide的背景延迟加载 -->
<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {
lazy: {
loadPrevNext: true,
},
});
</script>
<style type="text/css">
.swiper{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-preloader-color: #00ff33;/* 单独设置预加载圆圈的颜色 */
}
</style>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/lazy/213.html
