Preloading images before displaying page/text

[jaredc]

Hi

This is not a problem as such - more of a query. I've noticed that several websites seem to have an "entry page" while the website loads. I'm guessging that the webpages are somehow loaded into the browser whilst this page is being displayed with the result being that the viewer then sees the whole page displayed "at once".

I've tried to replicate this by including a very rough javascript routine as follows:

<script language=&quot;Javascript&quot;>

if( document.images ) 
{
btnHome = new Image();
btnHome.src = &quot;images/btnHome.gif&quot;;
}
</script>
<SCRIPT LANGUAGE=&quot;Javascript&quot;>
	window.location=&quot;home.asp&quot;;
</SCRIPT>

I've included this in the index page of the site which then redirects to the home page in attempt to load all the images, but the page is redirected before the images have finished loading (with the result that the page text and general structure loads followed gradually by the images)

I'm I thinking along the right lines by using this javascrit method or is there some other area which I should be investigating?

Any thoughts or advice very much appreciated
Mike

 

[adam0101]

Use a loop to check if the image is completely loaded before redirecting.

<script language=&quot;Javascript&quot;>

if( document.images ){
btnHome = new Image();
btnHome.src = &quot;images/btnHome.gif&quot;;
imgCheck();
}
function imgCheck(){
if(btnHome.complete){
window.location=&quot;home.asp&quot;;
}
else{
setTimeout('imgCheck()',50);
}
}

</SCRIPT> Adam

http://www.adventex.com

 

[jaredc]

Thanks for that Adam, I've slightly amended the srcirpt to include a number of images:

<script language=&quot;Javascript&quot;>
if( document.images ) 
{
btnHome = new Image();
btnHome.src = &quot;images/btnHome.gif&quot;;
  imagename = btnHome;
  imgCheck(imagename);
btnAboutUs = new Image();
btnAboutUs.src = &quot;images/btnAboutUs.gif&quot;;
  imagename = btnAboutUs;
  imgCheck(imagename);
btnContactUs = new Image();
btnContactUs.src = &quot;images/btnContactUs.gif&quot;;
  imagename = btnContactUs;
  imgCheck(imagename);
	
}
function imgCheck(imagename){

  if(imagename.complete){
	//document.write('loading');
	window.location=&quot;home.asp&quot;;
  }
  else{
    setTimeout('imgCheck()',50);
  }
}

</SCRIPT>

Its still not working quite as I'd like it too; i.e. redirecting to the home page before all the images have been loaded. I suspect it might be something to do with the way I've amended your script; more specifially in the imgCheck function I think its re-directing the page after its done the first image and not doing the rest.

Any other advice or comments you may have would be very much appreciated and I hope the above makes at least some sense

 

[nvb]

Add a counter of the number of images that are successfully loaded. Then change the imgCheck function:

function imgCheck(img) {
if (img.complete) {
icntr++;
}
if (icntr = document.images.length) {
window.location=&quot;home.asp&quot;;
} else {
setTimeout(&quot;imgCheck()&quot;, 50);
}
} Cheers,
Nico