Question

我有一个PHP脚本，以HTML格式提供表格。我正在使用jQuery ajax调用该脚本，显示动画图像，然后在页面中加载html表结果。我面临的问题是，在完成AJAX调用的FireFox中，页面会在加载表之前冻结并动画。在Chrome中，图片仅冻结，浏览器仍在响应。在IE9中，我看不到没有加载表格，图像也被冻结，但浏览器也没有。

是否有任何方法可以避免浏览器和动画冻结？

我在javascript中使用的代码是：

<script>
  $(document).ready(function(){
     $("#btn").click(function(){
        $.ajax({
              cache:false,
              url: 'file.php',
              dataType: 'html',
              beforeSend: function(){
                $("#ajax").append('<div><img src ="ajax-loader-bar.gif" style="margin-top: 5%;"/></br><b>Processing your file, please wait...</b></div>');
              },
              success:function(data){
                $("#myTable").html(data);
              },
              error: function(data){
              },
              complete: function(resultat, statut){
                $("#ajax").html("");
              }
        }); 
     });
  });
  </script>

HTML代码为：

<body>
  <div>
   <input id="btn" type="button" value="Create table">
   <div id="ajax"></div>
   <table id="myTable" class="tablesorter">
   </table> 
  </div>
</body>

PHP返回如下结果：

<thead><tr><th><input id='chk-all' type='checkbox'></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th></tr></thead><tbody><tr id='row_0'><td><input class='input_chk' id='chkrow_0' type='checkbox'></td><td class='row'>10038</td><td class='row'>Dickson Motor Service, Inc.</td><td class='row'>Dickson Motor Service, Inc.</td><td class='row'>candlelight4u@att.net</td><td class='row'>(626) 287-9951</td><td class='row'>*</td></tr><tr id='row_1'><td><input class='input_chk' id='chkrow_1' type='checkbox'></td><td class='row'>10041</td><td class='row'>Xtreme Roadside Inc.</td><td class='row'>Xtreme Roadside Inc.</td><td class='row'>boklingel1980@gmail.com</td><td class='row'>(602) 896-1101</td><td class='row'>*</td></tr><tr id='row_2'><td><input class='input_chk'

以下是测试的链接http://wallahed.com/test/test.html

jQuery Ajax浏览器在dom操作中冻结

0 个答案: