使用ajax / jquery以特定顺序加载元素

Question

当有人进入我的网页时，我想首先在页面上加载#portfolio和#header div。

然后我想在前两个加载完成后开始加载#slide（以改进功能）。

如何使用ajax / jquery做到这一点？

提前多多感谢！

Answer 1

我认为您正在使用$.ajax来拨打#portfolio和#header。

从jQuery 1.5开始，您可以使用$.when在多个AJAX请求完成后执行操作：

$.when(
    $.ajax({
        /* options to load #portfolio */
    }),
    $.ajax({
        /* options to load #header */
    })
).then(function() {
    $.ajax({
       /* options to load #slide */
    });
});

Answer 2

您可以嵌套ajax调用，并在上一步的成功ajax调用中获取每个下一步。

$.ajax({ // Getting portfolio hear
     success: function(){
        $.ajax({ // Getting header here, on success callback of portfolio call
            success: function(){
                $.ajax({ // Getting slide here, on success callback of header
                    // So on,
                });
             }
        });
     }
});