Forums

brianK

Maybe this has been asked 1000 other times. But I can't seem to find a good post about 'Preloading images'

What is the best way to pre-load images for other pages on a site? I understand there is CSS, Jquery and other JS techniques, but what is the easiest and most effective way?! Currently I am using an 'Array' and I'm 'pre-loading' about 15 images total:

<script type=\"text/javascript\">
	var myimages=new Array()
	function preloadimages(){
	for (i=0;i<preloadimages.arguments.length;i++){
	myimages[i]=new Image()
	myimages[i].src=preloadimages.arguments[i]
	}
	}
	preloadimages(\"..........\")
</script>

This works ok but creates W3C issues! It's not the end of the world for me but would like to get it out of my hair!

Any help, comments or concerns would be greatly appreciated!

ikthius

I always used this as a pre-loader:


<script language=\"javascript\">
  <!-- hide from non javascript browsers
  if (document.images) 
{
   img1 = new Image(129, 81); //size of image
   img2 = new Image(129, 81);
etc

   img1.src = \"source of image.gif\";
   img2.src = \"source of image.gif\"
etc
}
end hide-->
  </script>

brianK

Good to know. Thanks!

treehouse : what would you like to learn today?

Forums

Pre-loading images