Home/ Questions/Q 4114012
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:24:01+00:00

I have a page with a table on it that has several thousand rows

  • 0

I have a page with a table on it that has several thousand rows of information.

When the user clicks a checkbox, a large amount of the rows can disappear which ends up causing normal browsers to hang for a few seconds but in my original implementation can cause IE to decide it wants to hang for a good 60 seconds (>_>).

JS Fiddle

<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>

Ideally, what I’d like to do is to to have the loading_box appear to give the user some form of idea of what’s currently happening before the browser freezes.

However, as it stands, it doesn’t try and make the loading_box visible until it’s done modifying the rest of the styles (so, it effectively appears and disappears without showing up on the screen).

Is it possible to either:

  1. force the page to display the loading box before it continues with the hiding of the rows
  2. have some more efficient way to get the rows to go to display: none that can potentially stop the page taking an age

With thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could “delay” the execution of your heavy code until you’re certain the Loading-DIV is shown, by for example using the setTimeout javascript method: 

    show div; setTimeout(doStuff, 100);

    The above pseudo code would delay the execution of “dostuff” by 100ms.. less could probably do..

    edit: implemented into your example

    $("#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);
    • 0