Javascript AJAX加载对象/图像-使jQuery动画变得断断续续

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

---

问题

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

如何解决这个问题

使用CSS3转换。这些在所有现代浏览器中都是硬件加速的，并且在单独的线程上运行，因此它们的性能通常不会受到ajax调用的影响。既然你说你只会把事情转来转去，我想这对你来说是一个理想的解决方案。这里有一篇关于它的文章：

您的案例

所以要让这一切为你服务。让丑陋的ajax调用保持现状。与使用jqueryanimate不同，您需要两种状态—初始状态，用于定位幻灯片，另一种状态带有额外的类，用于将幻灯片定位到目标位置

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

样本

您的初始状态可能如下所示：

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

以及要在适当位置显示的：

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

}

---

我个人需要查看代码来诊断它。在AJAX请求的回调中有长循环吗？答案很好，这正是我需要的。非常感谢你！