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动画/过渡在本机浏览器代码中实现，不受javascript的单线程影响，有时可以在后台运行时更顺畅地运行。

如果您不熟悉这些CSS3功能，请访问以下网站：http://css3.bradshawenterprises.com/（请参阅教程）。

使用jQuery for iPad优化加速图像动画

1 个答案: