Preloading pages?

M3GAPL3X · 04-14-2003, 08:44 AM

Hi,

I have a website called http://www.betacademy.tk and it has a bunch of roll overs on the front page. What I want to do is create a splash page that will preload the images first and then redirect to the main page. A possible preloader graphic would be cool. Does anyone know where I can find such a script?

Would this be easier if I did this in Flash?

Thanks!

sde · 04-14-2003, 09:06 AM

i found this .. let me know if it works.

PHP Code:


			
<script>



/*

Preload images script

By JavaScript Kit ([url]http://javascriptkit.com[/url])

Over 400+ free scripts here!

*/



var myimages=new Array()

function preloadimages(){

  for (i=0;i<preloadimages.arguments.length;i++){

    myimages[i]=new Image()

    myimages[i].src=preloadimages.arguments[i]

  }

}



//Enter path of images to be preloaded inside parenthesis. Extend list as desired.

preloadimages("http://mydomain.com/firstimage.gif","http://mydomain.com/secondimage.gif","http://mydomain.com/thirdimage.gif")



</script>

Epsilon · 04-14-2003, 06:27 PM

Why do you need a script for this? A very simple, non-Java way to preload images on your splash page is to include them at the bottom of the splash page with a height an width of 1 pixel (so they won't be seen).

Code:

<img src="images/image1.gif" width="1" height="1">
<img src="images/image2.jpg" width="1" height="1">

This will load them into the browser's cache, making them quickly accessible for other pages in your site. Just make sure that you allow enough time before the re-direct for the images to load over a 56k modem. Figure 4KB per second.

M3GAPL3X · 04-20-2003, 09:23 AM

Thanks for the tip Epsilon! I will do that on my splash page.

purefreak · 04-09-2005, 03:34 AM

Alternatively you can do it with CSS, using the same concept.
Simply devine a class with display set to none in your <Head> section:

Code:

<style type="text/css">
.hiddenPic {display:none;}
</style>

Then add your images at the bottom of your splash page (before the </body> tag:

Code:

<img src="cauniversity.png" 
  alt="CAU logo" title="CAU logo" 
    height="350" width="350" class="hiddenPic">

<img src="cau-knowledge-bank.png"
  alt="KB logo" title="KB logo"
     height="350" width="350" class="hiddenPic">

<img src="cauniversity.png" 
  alt="cauniversity.org screenshot" title="cauniversity.org screenshot"
     height="350" width="350" class="hiddenPic">

Alternatively you can use this through out your site to load the images of your next page ect.

njoy.