Jump to content

Page Load


Cod-nes
 Share

Recommended Posts

Wrap all the contents EXCEPT THE LOAD MESSAGE in a container div. Set the container to display:none in CSS. The load message must be the first element inside the body, so it loads first. Text in a div with a colored background would be ideal, because it should load FAST. Position it where you like. It'll be the only thing on the screen, so the way you position it (relative, absolute, margins) doesn't really matter.In your script, have a function attached to window.onload. The function should set the page-loading message to display:none and the wrapper div to display:block.Keep in mind that window.onload will fire even if all the page images have not downloaded yet. So if that's the thing that has you concerned, you might need a more complex function that triggers the swap based on the images' onload status. And remember that the last image on the page doesn't always load last. It might be close, but images load almost randomly. So you might need to figure a way to keep track of all your important images. Like, increment a variable every time an image loads. When the variable hits the magic number, that's when you swap the display.

Link to comment
Share on other sites

So would the code look like this? >_< I'm not good at javascript.

<html><head><style type="text/css">.no {display:none;}.dis {display:block}</style><script type="text/javascript">function Loading {window.onload()}</script></head><div class="dis"></div><div class="no"></div>

Link to comment
Share on other sites

More like this:

<html> <head> <style type="text/css"> .no {display:none;} .dis {display:block} </style> <script type="text/javascript"> window.onload = function () {	document.getElementById("dis").style.display="none";	document.getElementById("no").style.display="block"; } </script> </head> <div class="dis" id="dis"></div> <div class="no" id="no"></div>

Link to comment
Share on other sites

This might be a little overkill, but this works well:http://www.choiceuniversity.net/It might actually be better to start the loading screen off, and turn it on with Javascript. That way, people without Javascript can still use your site. If you check the source on that page you'll see this in the body:

	<div id="loading-mask" style=""></div>	<div id="loading">	  <div class="loading-indicator"><img src="images/loading.gif" style="margin-right:8px; float:left; vertical-align:top; width: 32px; height: 32px;"><div id="loading-msg">Loading...</div></div>	</div>	<script type="text/javascript">	document.getElementById("loading-mask").style.display = "block";	document.getElementById("loading").style.display = "block";	</script>

And some CSS chunks in the head. After the page loads it runs these lines to remove it:

Ext.destroy(Ext.get("loading"));Ext.destroy(Ext.get("loading-mask"));

That requires ExtJS though, so you would need to download and set that up. But it makes a lot of these types of things real easy to do. Without using Ext you would just add some code to window.onload which would remove or hide those elements.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...