Script to delay loading container div

**Webbee** · 03-03-2011 03:17 PM

Hello everyone, can someone help me with a javascript timer to delay the loading of the main container div on a website.

The reason is that I would like the background image (560k) to load first and then the site to load after. I found the opposite of what I need;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function hideit(){
var o = document.getElemenById('hidethisone');
o.style.display = 'none';
}
window.onload = function(){
setTimeout("hideit()",5000); // 5 seconds after user (re)load the page
};
</script>

</head>

<body>
<div id="hidethisone">
THIS SHOULD VANISH
</div>
</body>
</html>

Any help is much appreciated.

Thank you!

**moritana** · 03-04-2011 02:52 AM

if you still need it, try this:
this goes to the head:

HTML Code:

<style>
#theIdOfYourObject {display:none;}
</style>

and the script:

Code:

function show() {
    AB = document.getElementById('theIdOfYourObject');
    AB.style.display = 'inline';
}
setTimeout("show()", 5000);

**Webbee** · 03-04-2011 03:29 PM

That works perfect, thank you so much but I just realized that as that person is browsing the site and then comes back to the Home, they will have to wait again for the timeout to see the content.

Is there a way to have the timer operate only the first time the visitor enters the Home page? Thank you again and have a great day.

**boreas1** · 03-18-2011 02:38 AM

Hi Moritana, I just signed up to thank you for decided to answer that! It just fixed a problem I have been working on for 2 hours!

**moritana** · 03-18-2011 05:14 AM

lol, okay, you welcome ^_^

**isakm** · 05-16-2012 04:02 PM

hiya,

Thanks for this, really useful.

I am trying to hide / load 3 items at once though, and only one of them only ever end up showing up - do you know how that would be?

the code I've stuck in the header is below

<script type="text/javascript">
function show() {
AB = document.getElementById('nav1', 'social', 'footer');
AB.style.display = 'inline';
}
setTimeout("show()", 3000);
</script>
<style>
ul#nav1 {display:none;}
#footer {display:none;}
#social {display:none;}
</style>

thanks... isabelle

**moritana** · 05-17-2012 07:13 AM

getting an object by ID only fetches one object at a time, you can't use it like an array, if we could life would be way much easier.

you can fetch each element separately, and change them individually.
what you have now is that the get element by id only fetches the element written first, and the other two are a mystery to it.

Thread: Script to delay loading container div

Thread Tools

Display

Script to delay loading container div

Multiple items?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions