javascript - AJAX 加载对象/图像 - 使 jQuery 动画不稳定

Question

我正在构建一个网站，当您加载主页时它有一些动画(例如，主 Logo 和一些菜单从屏幕两侧滑入)。同时，我还在后台使用 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);

Answer 1

问题

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

如何解决这个问题

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

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

您的情况

因此，要让这项工作真正为您服务。暂时保留丑陋的 ajax 调用。您不需要使用 jQuery animate，而是需要 2 种状态 - 初始状态，它将幻灯片定位在远处，另一种状态带有额外的类，它将您的幻灯片定位在它的目标位置。

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

示例

你的初始状态可能是这样的:

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

以及要显示的位置:

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

}