Цепочка событий

Question

У меня есть следующая функция JavaScript, которая будет загружать данные со страницы сервера в DIV. Это работает нормально с эффектами FadeIn/FadeOut

function ShowModels(manuId) {

     var div = $("#rightcol");  


    div.fadeOut('slow',function() {          
        div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();                             

                       });

    });  

}

Теперь я хочу показать загрузочное сообщение, пока div не загрузит содержимое со страницы сервера

Я попробовал это. Но это не работает. Может ли кто-нибудь помочь мне отладить это? заранее спасибо

function ShowModels(manuId) {

     var div = $("#rightcol"); 
     var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>";
    div.fadeOut('slow',function() {
        div.load(strLoadingMsg,function(){

             div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();


                       });
         });
    });  

}

Мое окончательное требование - FadeOut текущий контент. Показать сообщение о загрузке. Показать данные, поступающие с сервера с эффектом FadeIn

Answer 1

Я проверил это, и похоже, что он должен делать то, что вы хотите. Вот функция:

function ShowModels(manuId){
     var div = $("#rightcol"); 
     var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>"; 


     div.fadeOut('slow',function() {  
     div.html(strLoadingMsg).show();       
         div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function() {

                       $(this).hide().fadeIn();                             

                   });

     });

}

Если вы хотите увидеть его в действии, перейдите по адресу: http://thetimbanks.com/demos/help/jqueryproblem-in-chaining-the-events/ и не стесняйтесь просматривать источник и использовать его по своему усмотрению.

В моем примере я просто использовал test.php для публикации, но он все равно должен работать для вашей страницы.

Answer 2

Я не проверял это, но почему бы просто не показать / скрыть GIF-анимацию? FadIn перед загрузкой и fadeOut после загрузки, но перед отображением содержимого.

var div = $("#rightcol");  


div.fadeOut('slow',function() {
    $('.loadAnimation').fadeIn(100);
    div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function() {
                       $('.loadAnimation').fadeOut(100);
                       $(this).fadeIn();                             

                   });

});

Редактировать: заменить эту анимацию GIF с текстом, так как это был ваш вопрос;)

Answer 3

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

 var div = $("#rightcol");  


div.fadeOut('slow',function() { 
    var loading = $("<img src='loading.gif'/><h3>Loading...</h3>");
    $(this).replaceWith( loading);      
    $.post("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function(data) {
                       var newDiv = $( "<div id=rightcol></div>").html( data).hide();
                       loading.replaceWith( newDiv);
                       newDiv.fadeIn();                             
                   });

});