Guest Lelouch Posted July 15, 2009 Share Posted July 15, 2009 Is there a way to display a temporary page until the main page (which takes time to load) has fully-loaded? Link to comment Share on other sites More sharing options...
jesh Posted July 15, 2009 Share Posted July 15, 2009 You could do something like this: <html><head><script type="text/javascript">window.onload = function(){ document.getElementById("loading").style.display = "none"; document.getElementById("content").style.display = "";}</script></head><body><div id="loading">This is some content to show while the page is loading.</div><div id="content" style="display:none;">This is the main content of the page</div></body></html> Link to comment Share on other sites More sharing options...
MrFish Posted July 15, 2009 Share Posted July 15, 2009 Maybe you can show us the page and the code so we can tell you how to optimize speed.The way I see it, it could be any of this-Poorly coded,Too many images,Too much server communication,Your web provider sucks,It's just you.Or maybe something else. I have to see it before I can tell you. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 15, 2009 Share Posted July 15, 2009 That's not fair to say, some things are just big. I've got an application that downloads 900KB just for the login page alone. The admin side requires over 1MB of files, but some will be cached from the login page. The compressed Javascript admin code is over 300KB by itself, without any other support files. That application uses a loading screen like jesh showed. I have code like this to make sure Javascript is enabled, and then show the loading part. You can even stick a little animated spinner gif in there to look like it's actually doing something. The onload event (not shown) removes the loading divs. <div id="require">This application requires that your browser has Javascript support enabled.<br><br>Loading required files, please stand by...<br><br>If this message does not disappear, please ensure that your browser is not blocking Javascript execution.</div> <script type="text/javascript"> document.getElementById("require").style.display = "none"; </script> <div id="loading-mask"></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> CSS to go with that: #loading-mask{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:20000; background-color:white; display: none; } #loading{ position:absolute; left:45%; top:40%; padding:2px; z-index:20001; height:auto; display: none; } #loading .loading-indicator{ background:white; color:#444; font:bold 13px tahoma,arial,helvetica; padding:10px; margin:0; height:auto; } #loading-msg { float: left; margin-top: 8px; font:bold 13px tahoma,arial,helvetica; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.