jQuery - 全屏幻燈片性能提示？

Question

我正在構建一個全屏幻燈片，我嘗試使用定位，邊距，現在滾動來製作左/右滑動。

但每次總會有性能差距超過。我還沒有找到一個好方法來做到這一點，我正在尋求一些幫助。我也嘗試過純粹的CSS，它運行良好，但在我需要的瀏覽器中無法正常工作。

我有一個簡單的演示在這裏：http://jsfiddle.net/qkRvS/2/embedded/result/ ，並在代碼：http://jsfiddle.net/qkRvS/2/

有人能指出我在正確的方向，使這個儘可能順利？每個圖像變化似乎都沒什麼問題。

謝謝！

Answer 1

不幸的是，我不認爲你有一個快樂的答案。 CSS3轉換的CSS3轉換在支持它的瀏覽器中提供最佳性能。 ie7-8操縱left屬性執行滾動，但是在ie7-8中可能永遠不會看起來非常平滑。 Firefox性能也不是很好，但越來越好。在某些情況下，我發現left在Firefox中比-moz-transform更高性能，但在最新版本中可能已更改。所以提示：

• 儘可能壓縮你的圖片。如果可能，請使用.jpgs。
• 做每一種方法的測試中每個瀏覽器
• 使用相應瀏覽器的最高效的方法
• 如果您正在使用jQuery的動畫的方法，您可能希望從16ms的調整幀速率以類似30毫秒，因此瀏覽器不會像重繪那樣受到重創。

Answer 2

我想通了。只需使用CSS3轉換並在溢出的div上「左移」，就可以減少重繪次數。