Question

我正在构建一个在加载主页时有一些动画的网站（例如，主徽标和一些菜单从屏幕两侧滑入）。同时，我也在后台使用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动画，你需要2个状态 - 初始，它定位幻灯片，一个具有额外的类，将幻灯片定位在目标位置。

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

<强>示例

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

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

要显示的那个：

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

}

AJAX加载对象/图像 - 使jQuery动画起伏不定

1 个答案: