swiper.js官網(wǎng)：http://www.swiper.com.cn/api/Images/2015/0308/213.html

設(shè)為true開啟圖片延遲加載，使preloadImages無效。
需要將圖片img標(biāo)簽的src改寫成data-src，并且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background（3.0.7開始啟用）。

lazyLoadingInPrevNextAmount

設(shè)置在延遲加載圖片時(shí)提前多少個(gè)slide。個(gè)數(shù)不可少于slidesPerView的數(shù)量。
默認(rèn)為1，提前1個(gè)slide加載圖片，例如切換到第三個(gè)slide時(shí)加載第四個(gè)slide里面的圖片。

使用方法示例

<script> var mySwiper = new Swiper('.swiper-container',{ lazyLoading : true, lazyLoadingInPrevNext : true, lazyLoadingInPrevNextAmount : 2, }) </script>

　

callback

http://www.swiper.com.cn/api/callbacks/2014/1217/91.html

回調(diào)函數(shù)，swiper從當(dāng)前slide開始過渡到另一個(gè)slide時(shí)執(zhí)行。觸摸情況下，如果釋放slide時(shí)沒有達(dá)到過渡條件而回彈時(shí)不會觸發(fā)這個(gè)函數(shù)，此時(shí)可用onTransitionStart。
可接受swiper實(shí)例作為參數(shù)，輸出的activeIndex是過渡后的slide索引。

使用方法示例

　

<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ onSlideChangeStart: function(swiper){alert(swiper.activeIndex);} }) </script>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/mmzuo-798/p/7219015.html

總結(jié)

以上是生活随笔為你收集整理的swiper.js 多图片页面的懒加载lazyLoading的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。