Forcing a Page Redraw Mid-Function
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 visibl开发者_如何学Ce 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:
- force the page to display the loading box before it continues with the hiding of the rows
- 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
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);
加载中,请稍侯......
精彩评论