關於JSSOR SLIDER的問題

2016-05-12

在使用JSSOR的時候,碰到Mobile Safari會掛掉,請教google大神得到的結果,是因為兩個原因造成的:

1. 如果$AutoPlay設定為true

2. 圖片太多的狀況

在這兩個狀況下,會使Jssor Slider在頁面載入的時候loading太重,造成原本就不是很夠的iphone 5以下的Moble Safari記憶體不足,然後就掛掉了。

所以如果要解決這個問題,可以透過三個修改來處理:

1. 把$AutoPlay設定為false,然後透過api call  (jssor_slider2.$Play();) 來在所有scale都ready之後再執行

2. 把$HWA設定為false,停止hardware acceleration

3. 將圖片以lazy loading格式的方式來載入,可以減少Jssor Slider在頁面載入時候的處理時間

所以最後處理出來的結果會如下

JS的部分修改
<script>
var options = {
                $AutoPlay: false, 
                $HWA: false,
                ...其他設定...
}

ScaleSlider();
jssor_slider2.$Play();

//重新繪製的function
function ScaleSlider() {
    var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
    if (parentWidth)
        jssor_slider2.$ScaleWidth(Math.min(parentWidth, 960));
    else
        window.setTimeout(ScaleSlider, 30);
}

</script>
 
HTML的部分修改
<body>
  <div id="jssorSlider">
             <div class="slide">
                   <img u="image" src2="圖片路徑" />
                   <img u="thumb" src2="圖片路徑" />                   
             </div>
      </div>
</body>
 

 

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【630437】
digishot webdesign studio