在调用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()