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 befor load，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();                             
                   });

});

链接事件

3 个答案: