Question

我有一个页面，上面有几千行信息。

当用户单击一个复选框时，大量的行可能会消失，最终会导致普通浏览器挂起几秒钟，但在我原来的实现中，可能会导致IE判断它要挂60秒（＆GT; _＆GT;）

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <style type='text/css'>
    body{
      font-family: "Arial", sans-serif;
      letter-spacing: 0px;
      font-size: 7pt;
    }

    table{
      border-width: 1px;
      border-color: #000000;
      border-collapse: collapse;
    }

    .tr_1{
      background: #efefef;
    }

    .tr_2{
      background: #ffffff;
    }
  </style>

  <script type='text/javascript'>
    $(function(){
      var $tr_1 = $(".tr_1"),
          $loading = $("#loading");

      $("#checky").click(function(e) {
        $loading.css('display', 'block');

        if(this.checked){
          $tr_1.css('display', 'none');
        }else{
          $tr_1.css('display', 'table-row');
        }

        $loading.css('display', 'none');
      });
    });
  </script>
</head>
<body>
  <div>
    <input type='checkbox' id='checky'>Click Here!
  </div>
  <div id='loading' style='display: none'>
    <h2>Hey! We're loading!</h2>
  </div>
  <table>
    <?php
      for ($i=0; $i<=5000; $i++){
        echo "<tr class='tr_".(($i%2)+1)."'><td>This is a row of data<td>Number $i\n";
      }
    ?>
  </table>
</body>
</html>

理想情况下，我想做的是让loading_box似乎在浏览器冻结之前给用户一些关于当前发生情况的想法。

然而，就目前情况而言，它并没有尝试使loading_box可见，直到修改完其余的样式（因此，它有效地显示并消失而不显示在屏幕上）。

是否可以：

强制页面在继续隐藏行
有一些更有效的方法来获取行显示：none可能会阻止页面占用年龄

谢谢

Answer 1

你可以“延迟”执行繁重的代码，直到你确定显示了Loading-DIV，例如使用setTimeout javascript方法：

show div; setTimeout(doStuff, 100);

上面的伪代码会将“dostuff”的执行延迟100ms ..可能会少做..

编辑：已在您的示例中实施

$("#loading").css('display', 'block');
setTimeout(function(){
  if ($(".tr_1").css('display')=='none'){
     $(".tr_1").css('display', 'table-row');
  }else{
     $(".tr_1").css('display', 'none');
  }
  $("#loading").css('display', 'none');
}, 100);

强制页面重绘中功能

1 个答案: