用jQuery優化圖像動畫以優化iPad優化

我在想如何加快網站中圖片的移動速度。這個網站應該儘可能快的爲iPad，目前圖像的移動不是很流暢。（在iPad3以及iPhone 5上測試）用jQuery優化圖像動畫以優化iPad優化

該網站非常簡單。主要是這樣的結構：

<div id="slide1" class="slides"> 
</div> 

<div id="slide2" class="slides"> 
</div> 

<div id="slide3" class="slides"> 
</div> 

... //around 20 slides

每張幻燈片都有背景圖片（這是當前幻燈片）。事情是這樣的：

#slide4{ 
    background: url(../img/ipad/Slide4.PNG) no-repeat; 
    z-index:103; //over the previous slide 
    margin-left:-2000px; //in order to animate it later 
}

，並從一個幻燈片（圖像）到另一個去，我以這種方式使用jQuery：

//from slide3 to slide4 with animation 
$('#slide3').click(function(){ 
    $('#slide4').show(); 
    $('#slide4').animate({'margin-left' : '0'}); 
});

我已經嘗試降低圖像的質量，但有時如果沒有相當的質量損失，我不能減少它。

我也想過使用AJAX動態加載圖片的可能性，但是由於運動速度很快，沒有足夠的時間加載下一張幻燈片。

你會推薦我什麼？謝謝。

來源

2013-02-22 Alvaro

在iPad/iPhone上，使用CSS3動畫/轉換，而不是jQuery動畫獲得最佳/最平滑的性能。 CSS3動畫/轉換是在原生瀏覽器代碼中實現的，並且不受javascript的單線程影響，有時可以在做其他事情時更順暢地在後臺運行。

如果您不熟悉這些CSS3功能，可以從以下網站開始：http://css3.bradshawenterprises.com/（請參閱教程）。

來源

2013-02-22 16:52:15 jfriend00

用jQuery優化圖像動畫以優化iPad優化

回答

相關問題