horrible IE crash bug, need help working around

[NaTeDoGG]

Hello! I am a web developer and am having a bad problem. This code crashes IE 6 and probably 5 and 5.5 (you'll need any old image to use as bozo.gif)...
[code]
for ( var i=0; i < 100; i++ ) {
var div = document.createElement( "DIV" );
div.innerHTML = "crash test";
div.style.backgroundImage = "url(bozo.gif)";
document.body.appendChild( div );
}
[/code]

If done *while* the pages loads, this does not crash. But do it *after* the page loads (in window.onload for example) and it loads fine the first time, but click refresh 1 or 2 times and IE will never come back.

Further poking around has revealed that if I put 100 DIVs on the page with HTML, like this...
[code]
<div style="background-image:url(bozo.gif)">crash test</div>
<div style="background-image:url(bozo.gif)">crash test</div>
<div style="background-image:url(bozo.gif)">crash test</div>
.
.
.
[/code]

It doesn't crash with repeated refreshes. However, adding this code after the page is loaded will cause IE to not come back after a refresh or two...
[code]
for ( var i=0; i < document.body.children.length; i++ )
document.body.children[i].style.width = 100;
[/code]

I believe the reason for this is because setting the widths after a page has loaded on DIVs that have background images causes IE to try to retrieve the background images again. And IE trying to get background images after the page is loaded causes it to never come back.

But wait, theres more. When trying to use ProxyTrace, which you can find here...

http://www.pocketsoap.com/tcptrace/pt.aspx

...to watch the connections that IE is opening, the problem disappears. A sort of Schrodinger's browser. I can't say for sure why ProxyTrace stops the problem. Obviously asking visitors to download and start up ProxyTrace so that they can view the webpage properly is not an option, however it may be an important clue.

The examples given are of course not exactly what my web application is doing, but they are the simpliest cases I have found to reproduce the problem.

Searching google, news groups, etc has not turned up anyone with the same problem. The closest I've found is people who want to use background images to do rollovers. Their repeated swapping of the background images causes IE to crash. For them, they can get around it by using one big image and setting its top to display different sections. But for my situation, I have DIVs and TABLEs with backgrounds and just by setting widths the browser stops processing requests.

That about sums up my problems. I am at my wits end. Any help is appreciated. Thanks!

[1][[b]edited by[/b]: Brett_Tabke at 9:10 am (utc) on Oct. 8, 2003][/1]

[Hester]

Have you tried adding heights to the divs also? (You can use height:auto; if it's not a fixed size.) Sometimes IE needs both width and height.

[NaTeDoGG]

Setting a timeout of 0 so the work isn't done in the same thread that invokes the onload event fixes the problem.

[NaTeDoGG]

Using the setTimeout fixed the problems I was having inserting images into the document using the thread triggered by onload. It seems the background image crash problem is a seperate issue which comes from a setting in IE.

In IE6, if you go to Tools -> Internet Options, on the General Tab, Temporary Internet Settings, click the Settings button, look at the top, "Check for newer versions of stored pages". If "Every visit to the page" is checked background images will crash and hang IE when the element they are applied to is resized. The correct (and default) setting is "Automatically".

The combination of these two problems proved to be a horrible experience. Hopefully others will be able to find this thread and solve their problems.

Good luck!