使用 jQuery 为 iPad 优化加速图像动画答案

【问题标题】：Speed up image animations with jQuery for iPad optimization使用 jQuery 为 iPad 优化加速图像动画
【发布时间】：2013-02-22 16:46:24
【问题描述】：

我想知道如何加快网站中图像的移动速度。对于 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 动态加载图像的可能性，但是在渲染下一张幻灯片之前没有足够的时间加载它，因为移动速度非常快。

你会推荐我什么？谢谢。

【问题讨论】：

标签： javascript jquery performance web-applications

【解决方案1】：

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

如果您不熟悉这些 CSS3 功能，可以从以下网站开始：http://css3.bradshawenterprises.com/（参见教程）。

【讨论】：