Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page loading 2

Status
Not open for further replies.

vlitim

Programmer
Sep 2, 2000
393
GB
I have an asp page that has something like this on it

response.write("Hello, loading now")

' then a procedure that takes about 30 secs or so

the problem is that the page doesn't show the first part until the second part has completyed its operation! Is there any way of getting around this??

Cheers
Tim
 
right now everything your sending to response is going into a buffer that by default is served to the client until the whole ASP script has been executed. The simplest way to push this to the client immediately is to turn off the buffer at the top of your page:
<%
Option Explicit

Response.Buffer = False 'buffer is now off
%>
This will cause the buffer to be bypassed, so as the page creates content it will be shipped immediately to the client browser.

Another, slightly more elegant, way to use this is to create a little div as a loading message like so:
Code:
<%
Option Explicit

Response.Buffer = False
%>
<html>
<body onLoad=&quot;document.getElementById('loadMessage').style.display='none';&quot;>
<div id=&quot;loadMessage&quot;> Please wait, loading...</div>
<%
'rest of code
%>
</body>
</html>
In this case the please wait message will show up immediately like above, but will disappear once the page has fully loaded. Of course you could spruce itup a bit and make it pretty:
Code:
<%
Option Explicit

Response.Buffer = False
%>
<html>
<body onLoad=&quot;document.getElementById('loadMessage').style.display='none';&quot;>
<div id=&quot;loadMessage&quot; style=&quot;border:1px solid #aaaaee;background-color:#ccccff;color:#666699;font-family:cursive;position:absolute;text-align:center;width:50%;padding:10px;top:200px;left:200px;&quot;> Please wait, loading...</div>
<%
'rest of code
%>
</body>
</html>


Anyways, that should give you something fun to play with :)

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...) :p
 
Hey Tarwn...

I've got a little twist on this code, I hope you could help me out with. What if I wanted to show the <div> for a minimum of say 3 seconds?

I've used this before on a few pages but what happens is, if the process runs extremely fast, the <div> will flash on the screen and the user only sees a box (too quick to read &quot;Please Wait&quot;), and then the rest of the page loads.

It would be great if I could just show the <div> for 3 seconds if it was a fast page... or show the <div> until a slower page has finished processing.

Any ideas???

thanks in advance,
mwa
 
Tricky :)

Ok, here we go, we are capturing the current seconds from the ASP server and from the client browser, hopefully they won't be to far off. We then check if the differance between the ASP generation time (+3seconds) is greater than the client side time, if it is we loaded to fast so we pause for the difference + 1 millisecond just in case it ever gets exact. The only problem here is if the client clock is 30+ seconds off from the server, we get way to much lag time.
Code:
<%
Option Explicit

Response.Buffer = False
%>
<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
function waitMessage(){
	var tDate, jsNow, asNow;
	asNow = <%=second(Now())%>;
	tDate = new Date();
	jsNow = tDate.getSeconds();

	if(asNow + 3 > jsNow){
		setTimeout(&quot;hideMessage();&quot;,(asNow + 3 - jsNow)*1000 + 1);
	}
	else{
		hideMessage();
	}
	
	//Remove the following line, it is only there for test display
	document.getElementById('txt').value = &quot;Asp seconds:&quot;+asNow+&quot; JS seconds:&quot;+jsNow+&quot; induced wait time: &quot;+((asNow + 3 - jsNow)*1000 + 1);
}
function hideMessage(){
	document.getElementById('loadMessage').style.display='none';
}
//-->
</script>
</head>
<body onLoad=&quot;waitMessage();&quot;>
<div id=&quot;loadMessage&quot; style=&quot;border:1px solid #aaaaee;background-color:#ccccff;color:#666699;font-family:cursive;position:absolute;text-align:center;width:50%;padding:10px;top:200px;left:200px;&quot;> Please wait, loading...</div>
<br>

<!-- Remove the following line, it is only there for test display -->
Box for test Code: <input type=&quot;text&quot; id=&quot;txt&quot; size=&quot;100&quot;>


<%
'rest of code
%>
</body>
</html>


Ok now to fix the lag time. The easiest fix would be of course to change the timeout to a fixed 3000 milliseconds. This would mean that anyone that took more than 3 seconds to load the page (according to differances between server and client clocks) would still get the message whisked away instantly, but if someone loaded the page in 2.5 seconds they would get an extra 3 seconds of induced delay, for a 5.5 second load time. Lets see what we can do for those poor bastards :)

This one has a great deal of test code, all nicely commented for easy removal. This should solve the problem of non-synchronous server and client time. Right now the test pause is one second but that can be changed to test at differant load times, just change the TESTLOADTIME variable.
Code:
<%
Option Explicit

Response.Buffer = False
%>
<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
var firstTime, secondTime;

function waitMessage(){
	firstTime = <%=second(Now())%>;

	if(firstTime + 3 > secondTime){
		setTimeout(&quot;hideMessage();&quot;,(firstTime + 3 - secondTime)*1000 + 1);
		
		//-------------- Test Code Below ----------------------------
		document.getElementById('txt').value = &quot;1st Asp seconds:&quot;+firstTime+&quot; 2nd ASP seconds:&quot;+secondTime+&quot; induced wait time: &quot;+((firstTime + 3 - secondTime)*1000 + 1);
		//-------------- test Code Above ----------------------------
	}
	else{
		hideMessage();
		
		//-------------- Test Code Below ----------------------------
		document.getElementById('txt').value = &quot;1st Asp seconds:&quot;+firstTime+&quot; 2nd ASP seconds:&quot;+secondTime+&quot; induced wait time: 0&quot;;
		//-------------- test Code Above ----------------------------
	}
}
function hideMessage(){
	document.getElementById('loadMessage').style.display='none';
}
//-->
</script>
</head>
<body onLoad=&quot;setTheTime();waitMessage();&quot;>
<div id=&quot;loadMessage&quot; style=&quot;border:1px solid #aaaaee;background-color:#ccccff;color:#666699;font-family:cursive;position:absolute;text-align:center;width:50%;padding:10px;top:200px;left:200px;&quot;> Please wait, loading...</div>
<br>

		<!------------------Test Code Below ----------------------->
			Box for test Code: <input type=&quot;text&quot; id=&quot;txt&quot; size=&quot;100&quot;>

			<%
			Dim TESTLOADTIME
			TESTLOADTIME = 1
			Dim testTime, testChk

			'just a loop to slow the loading
			testTime = Now()
			testChk = second(Now()) + TESTLOADTIME
			Do Until second(testTime) >= testChk
				testTime = Now()
			Loop
			%>
		<!------------------Test Code Above ----------------------->
<%
'rest of code
%>
<script language=&quot;JavaScript&quot;>
<!--
	function setTheTime(){
		secondTime = <%=second(Now())%>;
	}
//-->
</script>
</body>
</html>

Let me know if that was what you were looking for, thanks for a good challenge :)
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...) :p
 
Bravo... This looks like it will work... I will test when I get a few minutes and let you know how it goes.

Thanks for the quick response...

mwa
 
No problem, gave me a much needed cigarette...I mean thinking break :)

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...) :p
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top