Cod-nes Posted January 28, 2009 Share Posted January 28, 2009 How do I do this:The page doesn't appear until it's fully loaded and that a simple text message says that the page is loading which disappears when the page is loaded. Link to comment Share on other sites More sharing options...
jeffman Posted January 28, 2009 Share Posted January 28, 2009 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 More sharing options...
Cod-nes Posted January 28, 2009 Author Share Posted January 28, 2009 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 sharing options...
jeffman Posted January 28, 2009 Share Posted January 28, 2009 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 More sharing options...
justsomeguy Posted January 28, 2009 Share Posted January 28, 2009 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 More sharing options...
jlhaslip Posted January 28, 2009 Share Posted January 28, 2009 Or it can be done (somewhat) by using CSS by creating a background image to fake the ajax loading.http://jlhaslip.trap17.com/samples/misc/ajax/ajax_load.html Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.