# **圖片懶加載** ## 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> ```