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

Question

我正在构建一个全屏幻灯片，我尝试使用定位，边距，现在使用ScrollTo进行左/右滑动。

但每次总是存在性能差距。我还没有找到一个很好的方法来做到这一点，我正在寻求帮助。我也尝试过纯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的animate方法，你可能想要将帧速率从16ms调整到类似30ms的速度，这样浏览器就不会受到重绘的影响。

Answer 2

我明白了。只需在溢出的div上使用CSS3过渡和“左”，你就可以减少重新绘制。