Ajaxed div скрывает и показывает шкуры только после загрузки div

Question

У меня есть эта проблема. Я работаю над jquery ajaxed сайтом. У меня есть основной контент div в середине и сверху навигации. Мне нужно AJAX контент, потому что у меня есть флэш-фон, чтобы флэш-видео не начиналось с начала после каждой загрузки страницы. Единственный способ, которым я смог сделать это, был с таким кодом:

$(document).ready(function(){


$.ajaxSetup ({  
         cache: false  
         }); 

//For loading
     var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";  

 //  Var
    var loadPage1 = "page1.html";

//  Load page
    $("#page1").click(function(){
            $("#content").hide(2000);
            $("#content").html(ajax_load).load(loadPage1);
            $("#content").show(2000);
});

Все остальные способы получения div не работали, потому что были проблемы с получением плагинов и т. Д., Работающих в ajaxed div (content).

Итак ... все работает нормально - но div загружает его содержимое из page1.html и показывает его, и только после этого скрывает и показывает. Таким образом, он загружает страницу, а затем делает эффекты, которые я хочу.

Нужно ли мне это как-то ставить в очередь, или как правильно использовать jquery? Я пытался отложить, остановить и т. Д., Но не могу решить это. Вероятно, это очень просто.

Спасибо.

Answer 1

Показать элемент в обработчике обратного вызова загрузки. то есть:

$("#page1").click(function(){             
    $("#content").hide();             
    $("#content").html(ajax_load).load(loadPage1, function(){
        $("#content").show(2000)
    });
}); 

Answer 2

.load () принимает 2 аргумента, URI и обратный вызов для запуска после загрузки. API находится здесь: http://api.jquery.com/load/

function() {
    $("#content").hide(2000);
    $("#content").html(ajax_load).load(loadPage1, function() {
        $("#content").show(2000);
    });
}