# **图片懒加载** ## lazy 设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。 图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。 还可以加一个预加载，或者白色的[https://www.swiper.com.cn/api/lazy/213.html](https://www.swiper.com.cn/api/lazy/213.html) 当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。 ``` <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 延迟加载图片的结构 --> <div class="swiper-slide"> <img data-src="02swiper/images/1.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)--> <div class="swiper-slide"> <img data-src="02swiper/images/2.jpg" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <div class="swiper-slide"> <img data-src="02swiper/images/1.jpg" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <div class="swiper-slide"> <img data-src="02swiper/images/2.jpg" 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> ```