javascript - 使用 jQuery 加速图像动画以优化 iPad

Question

我想知道如何加快网站中图像的移动速度。该网站在 iPad 上应该尽可能快，并且目前图像的移动不是很流畅。 (在 iPad3 和 iPhone 5 上测试)

该网站非常简单。主要结构是这样的:

<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 动态加载图像的可能性，但在渲染下一张幻灯片之前没有足够的时间加载它，因为移动速度非常快。

你会推荐我什么？谢谢。

Answer 1

在 iPad/iPhone 上，使用 CSS3 动画/过渡，而不是 jQuery 动画以获得最佳/最流畅的性能。 CSS3 动画/过渡是在 native 浏览器代码中实现的，不受 javascript 的单线程性的影响，有时可以在执行其他操作时在后台更流畅地运行。

如果您不熟悉这些 CSS3 功能，可以从以下网站开始:http://css3.bradshawenterprises.com/ (请参阅教程)。