用jQuery优化图像动画以优化iPad优化

我在想如何加快网站中图片的移动速度。这个网站应该尽可能快的为iPad，目前图像的移动不是很流畅。（在iPad3以及iPhone 5上测试）用jQuery优化图像动画以优化iPad优化

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

<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动态加载图片的可能性，但是由于运动速度很快，没有足够的时间加载下一张幻灯片。

你会推荐我什么？谢谢。

来源

2013-02-22 Alvaro

在iPad/iPhone上，使用CSS3动画/转换，而不是jQuery动画获得最佳/最平滑的性能。 CSS3动画/转换是在原生浏览器代码中实现的，并且不受javascript的单线程影响，有时可以在做其他事情时更顺畅地在后台运行。

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

来源

2013-02-22 16:52:15 jfriend00

用jQuery优化图像动画以优化iPad优化

回答

相关问题