0

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


                       });
         });
    });

}

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

4

3 回答 3

2

我已经对此进行了测试，看起来它应该可以满足您的要求。这是功能：

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

于 2009-06-10T21:56:38.540 回答
1

我还没有测试过，但为什么不只显示/隐藏 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 动画，因为那是你的问题；）

于 2009-06-06T10:53:28.090 回答
1

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

});
于 2009-06-06T11:44:31.857 回答