Jump to content

Page Taking Long Time To Load


Guest Lelouch
 Share

Recommended Posts

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.

Edited by MrFish
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

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...