swiper.js 多圖片頁面的懶載入lazyLoading

標籤：esper   class   var   分享   blank   lang   containe   targe   背景圖   

swiper.js官網：http://www.swiper.com.cn/api/Images/2015/0308/213.html

設為true開啟圖片消極式載入，使preloadImages無效。
需要將圖片img標籤的src改寫成data-src，並且增加類名swiper-lazy。
背景圖的消極式載入則增加屬性data-background（3.0.7開始啟用）。

lazyLoadingInPrevNextAmount

設定在消極式載入圖片時提前多少個slide。個數不可少於slidesPerView的數量。
預設為1，提前1個slide載入圖片，例如切換到第三個slide時載入第四個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

回呼函數，swiper從當前slide開始過渡到另一個slide時執行。觸摸情況下，如果釋放slide時沒有達到過渡條件而回彈時不會觸發這個函數，此時可用onTransitionStart。
可接受swiper執行個體作為參數，輸出的activeIndex是過渡後的slide索引。

使用方法樣本

　

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

　　

swiper.js 多圖片頁面的懶載入lazyLoading