Jump to content

Page Taking Long Time To Load


Guest Lelouch

Recommended Posts

Guest Lelouch

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...