待機中のGIFはJQueryを呼び出す直前に表示されません。

Question

私のデータテーブルがロードされている間に表示する待機GIFを取得しようとしています。私は$(element).each()ループを入力する直前に$(element).show()と呼ぶだけで、すべての子グリッド（すなわち、DisplayInnerTable()）をデータテーブルを使って表示します。

私は.each()メソッドに問題を絞り込んだようです。 .each()の中にあるすべてのコードを削除しても、待機中のGIFは表示されず、はい、私は.hide()も削除します。 .each()の直前にブレークポイントを置くと、待機中のGIFが表示されます。 .each()が非常に速く起こっているように、タイミング問題と思われるwait.gifの中にdivはレンダリングする時間がありません。そしてそのメモの中で、なぜJavascriptスレッドはhtml要素の操作を妨げますか？

私はいくつかの同様の記事を見つけましたが、どれもこの特定の問題に答えません。他の記事のほとんどはsetTimeout()を使用することをお勧めします。私は可能な限りあらゆる方法でそれを試みました、運はありません。どんな助け、ヒント、手がかりも高く評価されます。ここで

は私のコードスニペットです：

$(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(); 
    } 
}); 

は、ここに私の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

はこれを試してみてください。それはshow()にコールバックし、すべての要求に対してreponses sendedではされるまで、ブラウザをブロックする各ループでasync: falseを使用して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

上のコールバックです。あなたのコードがオンクリックコールバックの終わりに達するまで、ブラウザはレンダリングを行いません。

この時点で、データを非同期に要求する必要があり、すべてのデータがロードされた後、ロード中のgifを非表示にする必要があります。私はjQueryのajaxメソッドを使用して、返されたDefereを使用してリクエストを追跡できると仮定します。

そのようないくつかのもの：ここで

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

いくつかの関連情報：

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