Warte GIF wird nicht angezeigt, bevor JQuery aufgerufen wird.

Question

Ich versuche, eine Warte gif anzuzeigen, während meine Daten geladen werden. Ich rufe einfach $(element).show() kurz vor dem Eingeben meiner $(element).each() Schleife, die alle untergeordneten Gitter anzeigt (dh. DisplayInnerTable()) mit Datenträgern.

Es scheint, ich habe das Problem auf die .each() Methode eingegrenzt. Wenn ich den ganzen Code innerhalb der .each() entferne, wird das Wartegif immer noch nicht angezeigt, und ja, ich entferne auch die . Wenn ich kurz vor der .each() einen Haltepunkt einstelle, wird das Warte-GIF angezeigt. Scheint ein Timing-Problem zu sein, wie die .each() passiert so schnell die wait.gif innerhalb der div hat keine Zeit zu rendern. Und warum sollte Javascript Thread die Manipulation von HTML-Elementen verhindern?

Ich habe einige ähnliche Artikel gefunden, aber keiner von ihnen beantwortet dieses spezielle Problem. Die meisten anderen Artikel empfehlen die Verwendung setTimeout(). Nun, ich habe das auf jede mögliche Weise versucht, kein Glück. Jede Hilfe, Hinweise oder Hinweise werden sehr geschätzt.

Hier ist mein Code-Schnipsel:

$(document).ready(function() 
    { 
    $('#expand-all').on('click', function() { 
     $("#loader-wait-ani").show(); 
     ExpandAllChildGrids(); 
    }); 

    function ExpandAllChildGrids() 
    { 
     var tr; 
     $('#result-table tbody tr').each(function (value, index) { 
      tr = $(this).closest('tr'); 
      var row = outerTable.row(tr); 
      userId = row.cell(tr, 1).data(); 

     DisplayInnerTable(userId, row, tr); 
     }); 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 
     $("#loader-wait-ani").hide(); 
    } 
}); 

Hier ist mein html:

<div style="width:100%; margin: 0 auto; text-align:center;"> 
     <div id="loader-wait-ani" class="modal" style="display: none; z-index: 300;"> 
      <img src="~/Images/waitbar.gif" alt="Pleae Wait..." width="250" height="20" /> 
     </div> 
    </div> 

Answer 1

bereits. Es ist ein Rückruf bei show() und ein Rückruf auf DisplayInnerTable()

$(document).ready(function() 
    { 
    $('#expand-all').on('click', function() { 
     $("#loader-wait-ani").show("fast", function(){ 
      ExpandAllChildGrids(); 
     }); 
    }); 

    function ExpandAllChildGrids() 
    { 
     var tr; 
     callDisplayInner(hideLoader); 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 

    } 
}); 

function hideLoader(){ 
     $("#loader-wait-ani").hide(); 
} 

function callDisplayInner(hideLoader){ 
     $('#result-table tbody tr').each(function (value, index) { 
      tr = $(this).closest('tr'); 
      var row = outerTable.row(tr); 
      userId = row.cell(tr, 1).data(); 

     DisplayInnerTable(userId, row, tr); 
     }); 
     hideLoader(); 
} 

Answer 2

async: false in jeder Schleife werden Sie den Browser blockieren, bis die reponses für alle Anfragen gesendet wurden. Der Browser würde kein Rendering durchführen, bis der Code das Ende des Rückrufs erreicht hat.

Alsdann müssten Sie die Daten async anfordern und nachdem alle Daten geladen sind, müssen Sie Ihr Laden gif verstecken. Ich nehme an, dass Sie die Ajax-Methode von jQuery verwenden, damit Sie den zurückgegebenen Defere-Befehl verwenden können, um Ihre Anfragen zu verfolgen.

Manche Dinge wie folgt aus:

function DisplayInnerTable(userId, row, tr, callback) { 
    //return the Defered object of the jQuery request 
    return $.ajax('/request/to/url'); 
} 


$(document).ready(function() { 
    $('#expand-all').on('click', function() { 
    $("#loader-wait-ani").show(); 
    ExpandAllChildGrids(); 
    }); 


    function ExpandAllChildGrids() { 
    var tr; 
    var allRequests = []; 
    $('#result-table tbody tr').each(function(value, index) { 
     tr = $(this).closest('tr'); 
     var row = outerTable.row(tr); 
     userId = row.cell(tr, 1).data(); 

     //collect all Deferes in an array 
     allRequests.push(DisplayInnerTable(userId, row, tr)); 
    }); 


    $.when.apply($, allRequests) 
     .then(function() { 
     // will be executed when all requests are finished 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 
     $("#loader-wait-ani").hide(); 
     }) 
    } 
}); 

Hier einige relevante Informationen:

• Wait until all jQuery Ajax requests are done?
• $.when.apply($, allRequests): Pass in an array of Deferreds to $.when()