Question

我正在尝试在我的数据表加载时显示等待的gif。我只是在进入使用数据表显示所有子网格（即$(element).show()）的$(element).each()循环之前调用DisplayInnerTable()。

我似乎已将问题缩小到.each()方法。如果我删除了.each()中的所有代码，那么等待gif仍然无法显示，是的，我也删除了.hide()。如果我在等待gif显示的.each()之前放置一个断点。似乎是一个时间问题，就像.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

在每个循环中使用vssadmin create shadow /for=C:，您将阻止浏览器，直到发出所有请求的响应。在您的代码到达点击回调的末尾之前，浏览器不会进行任何渲染。

此时您需要请求数据异步，并且在加载所有数据后，您必须隐藏加载的gif。我假设您使用jQuery的ajax方法，因此您可以使用返回的Defere来跟踪您的请求。

有些事情是这样的：

async: false

这里有一些相关的信息：

Wait until all jQuery Ajax requests are done?
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(); }) } });：Pass in an array of Deferreds to $.when()

在调用JQuery之前，等待gif不会显示.each

2 个答案: