2

我正在构建一个网站，当您加载主页时有一些动画（例如，主徽标和一些菜单从屏幕两侧滑入）。同时，我也在后台使用 AJAX 开始加载一些稍后可能会查看的图像。这样做的问题是，当图像加载时，动画变得非常不稳定。有没有办法阻止这种情况？或者也许给 AJAX 函数一个较低的优先级，以便在动画运行时它不会尝试做任何事情？

这是我用来加载这些图像的当前脚本：

$('.lightbox-container.first').load('/images/first_set/', function(){
    $('.lightbox-container.second').load('/images/second_set/', function(){
        $('.lightbox-container.third').load('/images/third_set/', function(){
            $('.lightbox-container.fourth').load('/images/fourth_set/', function(){
                $('.lightbox-container.fifth').load('/images/fifth_set/', function(){
                    $('.lightbox-container.sixth').load('/images/sixth_set/');
                });
            });
        });
    });
});

我所有的动画功能看起来像：

$('.third-section').animate({ 'opacity': '1', 'height': '200px', 'padding-top': '20px', }, 500);
4

1 回答 1

1

问题

由于你所有的 ajax 和 js 动画都运行在同一个浏览器线程上，你肯定会遇到这个问题。您正在达到 CPU 的极限，这会导致断断续续。

如何解决这个问题

使用 CSS3 转换。这些在所有现代浏览器中都是硬件加速的，并在单独的线程上运行，因此它们的性能通常不受 ajax 调用的影响。既然你说你只滑动东西，我认为这对你来说是理想的解决方案。这里有一篇很棒的文章：

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

你的情况

所以要真正为你工作。让丑陋的 ajax 调用保持原样。您不需要使用 jQuery animate，而是需要 2 个状态 - 初始状态，它将幻灯片定位，一个带有额外的类，它将您的幻灯片定位在它的目标位置。

您所要做的就是将类添加到幻灯片中，它就会很好地到位。理论很简单。

样本

您的初始状态可能是这样的：

.slide {
    transform: translate(-400px, -200px);
    transition: all 5s;
}

并且要在适当的位置显示：

.slide.show {
    transform: translate(0px, 0px);

}
于 2013-11-09T00:24:28.043 回答