temporarily disable IE repaint?

Jonathan Ellis · Jun 9, 2005

I have some code that looks like this:

var options = document.sform.files.options
for (var i = 0; i < options.length; i++) {
options.selected = true
}

As it loops you can see the options scroll by while IE renders each
one. For a couple hundred options this is okay, but I need to handle
up to 10,000. (Long story.) Is there a way to hint to IE that "hey,
I'm going to do a lot of these, wait until we're all done before
repainting?" Or is there a better way to speed things up?

Sample html:

<html>
<body>
<script language=javascript>
function selectall() {
var options = document.sform.files.options
for (var i = 0; i < options.length; i++) {
options.selected = true
}
}
</script>

<form name=sform>
<select name=files multiple size=10>
<option>foo

</select>
<input type=button onclick="selectall()" value="select">
</form>

</body>
</html>

Thanks,

-Jonathan

Yann-Erwan Perio · Jun 9, 2005

Jonathan Ellis wrote:

Hi,

I have some code that looks like this:

var options = document.sform.files.options
for (var i = 0; i < options.length; i++) {
options.selected = true
}

As it loops you can see the options scroll by while IE renders each
one. For a couple hundred options this is okay, but I need to handle
up to 10,000. (Long story.) Is there a way to hint to IE that "hey,
I'm going to do a lot of these, wait until we're all done before
repainting?" Or is there a better way to speed things up?

I don't think you can prevent the repainting in IE, but you could try
hiding the select box, select the options and show it again - this would
give interesting results in IE, which AIUI you're only concerned with.

Other browsers wouldn't benefit from this approach though, you'd have to
use other techniques (for instance working on orphaned nodes) - or more
simply not have a select box with 10,000 entries (short story).

<script type="text/javascript">
var SelectOptions = (function(){
var selectObj=null;
var options=[];

function selectOptions(bSelect){
selectObj.style.visibility="hidden";
setTimeout(
function(){
for(var ii=options.length; ii--
options[ii].selected=bSelect;
selectObj.style.visibility="visible";
},
1
);
}

return {
init : function() {
selectObj=document.forms["sform"].elements["files"];
for(var opt=selectObj.options, ii=opt.length; ii--
options[ii]=opt[ii];
},
selectAll : function() {
options[0].selected=true; //to speed IE
selectOptions(true);
},
selectNone: function() {
selectOptions(false);
}
};
})();

window.onload = function() {
SelectOptions.init();
}
</script>

<form name="sform">
<script type="text/javascript">
var buf=["<select name='files' multiple='multiple' size='10'>"];
for(var ii=0; ii<10000; ii++)
buf[buf.length]="<option>foo<\/option>";
buf[buf.length]="<\/select>";
document.write(buf.join(""));
</script>
<input type=button onclick="SelectOptions.selectAll()" value="1">
<input type=button onclick="SelectOptions.selectNone()" value="2">
</form>

HTH,
Yep.

Jim Ley · Jun 9, 2005

I don't think you can prevent the repainting in IE,

screen.updateInterval

but use with immense caution, it's almost never sensible to do it.

Jim.

Yann-Erwan Perio · Jun 9, 2005

screen.updateInterval

but use with immense caution, it's almost never sensible to do it.

Ahah, I didn't know this one, it's a funny property

I can't manage to make it work in regards of the OP's needs, though (it
seems that the selection is not considered as repainting, maybe due to
select elements being windowed controls - or my test cases being
completely inadequate, it's been time since I haven't programmed).

Cheers,
Yep.

RobG · Jun 10, 2005

Jonathan said:
I have some code that looks like this:

var options = document.sform.files.options
for (var i = 0; i < options.length; i++) {
options.selected = true
}

As it loops you can see the options scroll by while IE renders each
one. For a couple hundred options this is okay, but I need to handle
up to 10,000. (Long story.) Is there a way to hint to IE that "hey,
I'm going to do a lot of these, wait until we're all done before
repainting?" Or is there a better way to speed things up?

Sample html:

<html>
<body>
<script language=javascript>
function selectall() {
var options = document.sform.files.options
for (var i = 0; i < options.length; i++) {
options.selected = true
}
}
</script>

<form name=sform>
<select name=files multiple size=10>
<option>foo

A closing tag is required for option elements, perhaps that was slowing
you down. The following selects all options in about 2 seconds in IE,
Firefox takes about 20 seconds (your performance may vary...).

A do..while does not seem to offer any significant benefit in
this case (not to mention that I'd love to know the point of 10,000
options).

<form action="" name="formA">
<select multiple name="bigSelect">
<script type="text/javascript">
var s = document.forms['formA'].elements['bigSelect'];
for ( var i=0; i<10000; i++ ){
document.write("<option>Option " + i + "</option>");
}
</script>
</select>

<input type="button" value="Select do..while" onclick="
var opts = this.form.elements['bigSelect'].options;
var x, i=0;
var s = new Date()
if ( ( x = opts ) ){
do {
x.selected = true;
} while ( ( x = opts[++i] ) )
}
var f = new Date();
alert( (f-s));
">

<input type="button" value="Select for..length" onclick="
var options = this.form.elements['bigSelect'].options;
var s = new Date()
for (var i = 0; i < options.length; i++) {
options.selected = true
}
var f = new Date();
alert( (f-s));
">
</form>

Jim Ley · Jun 10, 2005

Jonathan Ellis wrote:
A closing tag is required for option elements, perhaps that was slowing
you down.

Nope, closing option tag is optional in HTML, IE only understands HTML
of course.

Jim.

RobG · Jun 10, 2005

Jim said:
Nope, closing option tag is optional in HTML, IE only understands HTML
of course.

Dang, I even checked the spec - but the 'option' link from the HTML
elements index takes you to the header for select, optgroup and
option so I actually read the requirements for select, not option.

Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Javascrip code wont run properly.	2	Oct 2, 2022
Multi select options in a menu	1	Oct 30, 2022
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Very Basic CC Validation Javascript	0	Oct 29, 2019
Survey details won't go through using php, ajax, Mysql	3	Oct 25, 2023
Selective check box selector	3	Jul 22, 2024
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 21, 2023

temporarily disable IE repaint?

Jonathan Ellis

Yann-Erwan Perio

Jim Ley

Yann-Erwan Perio

RobG

Jim Ley

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads