0

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

你会推荐我什么？谢谢。

4

1 回答 1

3

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

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

于 2013-02-22T16:52:15.290 回答