Can I change or control the color of the IFRAME area before the content loads?

Question

I have a site where portions of the content are loaded into IFrames.

The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load.

Is there any way to specify what color the empty IFrame should render as until it has content?

Or am I taking the wrong tack here - is there a good way to keep the page from rendering until the contents are ready to be displayed?

UPDATE: Looks like the "white area" bit I'm describing is IE-specific.

Answer 1

You could perhaps set the iframe's document and set its style before loading your content.

Or you can use Ajax and not have these issues. =] (Assuming if it's appropriate for the task, of course.)

Answer 2

It's not too hard:

<iframe id="IFR" src="time.php" style="background-color: #f00;" />

Edit: I neglected to test in IE -- it does work in FireFox. Example at: http://beta.tagcloud.com/contain.html

The example demonstrates that the page quickly switches to all red, and then when the iframe loads (in 5 seconds), it switches to black.

Answer 3

This was driving me nuts, but I actually found a solution that seems to work in IE6 and 7. Haven't tested in other browsers, but Firefox seems to do it properly anyway.

The problem is solved if the iframe isn't displayed when loading, but an iframe seems to fire the "onload" immediately so after putting in an alert, I noticed it fires the onload twice, once at page load, then again once the iframe page loads so...

<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe>

//and here is the associated javascript
loadCount = 1;
function loadFrame() {
  if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire
    document.getElementById('theFrame').style.display='';
    return;
  }
  loadCount++;
}