在調用JQuery之前，不會顯示等待的gif。每個

Question

我試圖在加載數據表時顯示等待的gif。我只是在進入我的$(element).each()循環之前調用$(element).show()，該循環顯示使用數據表的所有子網格（即DisplayInnerTable()）。

看來我已經將問題縮小到.each()方法。如果我刪除.each()裏面的所有代碼，那麼wait gif仍然不會顯示，並且是的，我還刪除了.hide()。如果我在.each()之前放置了一箇中斷點，則會顯示wait 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()回調和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你會阻止瀏覽器，直到所有請求的反應變量已經sended。直到您的代碼到達您的單擊回調結束時，瀏覽器纔會執行任何呈現。

因此，你需要請求數據異步和所有數據加載後，你必須隱藏你的加載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()