Jump to content
Sign in to follow this  
Guest Lelouch

Page Taking Long Time To Load

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?

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
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;	}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...