Загрузка элементов в определенном порядке с использованием ajax / jquery

Question

Когда кто-то заходит на мою страницу, я хочу сначала загрузить #portfolio и #header div на страницу.

Затем я хочу начать загрузку #slide после того, как первые 2 закончили загрузку (для улучшения функциональности).

Как я могу это сделать, используя 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,
                });
             }
        });
     }
});