链接事件答案

【问题标题】：Chaining the events链接事件
【发布时间】：2010-10-31 20:38:57
【问题描述】：

我有以下 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();


                       });
         });
    });

}

我的最终要求是淡出当前内容。显示正在加载的消息。显示来自服务器的数据具有淡入效果

【问题讨论】：

标签： jquery jquery-chaining

【解决方案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 发布到，但它仍然适用于您的页面。

【讨论】：

【解决方案2】：

我会尝试一下，为了能够控制加载过程，最好使用显式 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();                             
                   });

});

【讨论】：

【解决方案3】：

我还没有测试过，但为什么不只显示/隐藏 gif 动画呢？加载前淡入，加载后淡出，但在显示内容之前。

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 动画，因为那是你的问题；）

【讨论】：

谢谢 Steven，但是 $(.loadAnimation) 是什么。 ?
我认为应该是 $('.loadAnimation') 并且将是你想要动画的东西的类
是的，氙气是对的。我的错字（现已更正）。你会例如有
.
附言。如果您不想使用 GIF 动画，只需将 div 替换为
内容正在加载
。或者同时使用 GIF 动画和文本。