1. 程式人生 > >swiper.js 多圖片頁面的懶加載lazyLoading

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

fun con 9.png 標簽 條件 需要 start 開啟 tran

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