Load DIV content in background!

Hi,

I need some help with a DIV problem.

This is what I have now:

<div id="myDiv"> 
<div1>Directly visible text</div1>
</div>
<script type="text/javascript"> 
window.onload = function () { 
  setTimeout(function () { 
    var div = document.getElementById('myDiv');
    div.innerHTML = '<div2>This div is visible after 5 seconds.</div2>';  
  }, 5000); 
} 
</script>

Code (markup):

What I need is a script that does the same, but with a small difference. DIV1 and DIV2 must start loading at the same time.

Any help is welcome.

 

the same time meaning right as the page loads, or after 5 seconds?

 

DIV1 and DIV2 start loading at the same time, but only DIV1 is visible and after 5 seconds DIV1 closes and DIV2 will be visible. DIV2 needs to run at the background.

 

so, the page loads and you see DIV1, then after 5 seconds, DIV1 hides and DIV2 shows?

im trying to understand what your doing

 

First of all, you have just one div and that's "myDiv". The innerHTML of this div contains what you call div1 and div2, but you write div2 when the time has elapsed... The whole thing is messed up

Guess you need something like that:

<div id="myDiv"> 
<div id='div1'>Directly visible text</div>
<div id='div2' style='visibility: hidden'>This div is visible after 5 seconds.</div>
</div>
<script type="text/javascript"> 
window.onload = function () { 
  setTimeout("alert('1'); document.getElementById('div1').style.visibility = 'hidden'; document.getElementById('div2').style.visibility = 'visible';" , 5000); 
} 
</script>

Code (markup):

Change the display property if you like, rather than the visibility. Now you've got three divs all of them loading at the same time (approximately) and the first one hides when the second appears. Is that good enough?

 

Thanks for the reply's.
@xlcho: it does the same as my script?

@crath: thats what I need.
I'll explain it.

Let say I have an 300x250 banner and a FLV movie!

Banner and the FLV movie should start loading at the same time (when the page is visited) but the flv file is only visible after 5 seconds and should be running already for 5 seconds.

I hope its clear now, sorry for my English.

 

No, it's not My code loads the content of the second div with the rest of the page. Yours changes the innerHTML of myDiv, which happens five seconds after the page has loaded. From your explanation, I think my code will do the work, but it's you choice

 

I'm trying it but its not working, the flv file starts loading after 5 seconds?

 

sorry but no idea why that happens. i don't have the time to test it myself.. Maybe in a few hours i could, if you haven't yet found a solution

 

I'd say it's not working because it depends on browser and plugin which handles the playing of the given flv file.
The object won't and also shouldn't normally be loaded and start playing the given flv file while it's hidden.
What you can try to do, is let the object load, then hide it for 5 seconds and then make it visible again.