Nowadays, most websites are connected to databases. the larger the data in the database, the longer it takes for the browser (or the code) to fetch/retrieve the required data for the user. and ofcourse, that’s where the developers’ skills comes handy, where developing an efficient code and using the minimum queries as possible is a must. i would like to add that having a little data in the database is not an excuse for not developing an efficient code for retrieving information from databases.

now, i assume that you “developers” did the most efficient way to retrieve the data, but above that there is still a considerable “fetching” time to wait inorder to fully display the records queried, here comes the benefit of adding a splash screen for the user, so he/she doesn’t panic and think that the page is stuck or something.

easy steps to follow inorder to get an attractive waiting screen (see below) while the code is processing and the user is waiting:

first of all you need to add one important line of code to the top of your ASP page, that line is:

<%Response.Buffer = True%>

This line tells the server not to send anything to the client until the page is finished processing or you use “Response.Flush” code in part of your ASP page to send everything fully loaded so far.

now just add the following to javascript functions to your code between “script” tags, those functions are used to “show” and “hide” the splash screen when needed:

function showObj(obj){obj.style.visibility = "visible";}

function hideObj(obj)

{obj.style.visibility = "hidden";}

now after we created the functions we create the part that gonna show as “splash” screen, i created it as “div” as it can contain more then one element inside it not just an animated image or text..

  <div id="splashScreen" style="position:absolute;z-index:5;align:center;">           Searching, please wait .. <br>          <img src="loada.gif"/>

  </div>

its strongly recommended to put this div as close as possible to the nearest element after you invoke a “search” button or a “submit” button so the div would show as soon as the “fetching” face starts

you can put any animated “gif” pic in the img src, i choose to put a loading indicator, you can find a very nice collection of activity indicators from http://www.ajaxload.info/

after you put the div in the right position, you should put the “Response.Flush” code so you tell the browser to show to the user everything loaded so far “including the splash screen” and then do the processing, code executing and searching. after that you do “Response.Flush” again to show the information fetched, and finally you hide the “splash screen” .. so to make it simple, your code would be like the following:

<%..Response.Flush  'this will show everything loaded so far including the splash screen.'... put the searching/fetching code here and show the results ...'... remember that your results wont show until you flush again ....Response.Flush  'this will show everything so far including splash screen AND results

%>

and after we finished from everything we hide the “splash” screen with the following command (put the command in javascript script tag)

var splashsplash = document.getElementById("splashScreen");hideObj(splash);

remember that you can customize the splash to your liking, after all its a div and can be pretty flexible.

Related posts:

1. Increasing performance and adding flexibility using arrays instead of recordsets in ASP with databases
2. Calling ASP Functions from java script