Swiper Lazy Loading(延迟加载) - 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风格--swiper-theme-color或单独设置预加载风格--swiper-preloader-color来改变预加载圆圈的颜色。 当你设置了slidesPerView:'auto' 或者 slidesPerView > 1,还需要开启watchSlidesVisibility。

lazy信息

类型:
object/boolean
默认:
false
举例:
true
启用版本:
4.0.0

效果演示

背景图的延迟加载
slide1
slide2
slide3

使用方法示例

从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>