"A picture is worth a thousand words." Images could spruce up your website,
but they can also increase your web pages' loading time.
This problem can be resolved with JavaScript Image() object: the images are preloaded into the cache, and whenever you use them, they are retrieved instantaneously!
<html> <head> <script type="text/javascript"> <!-- image01= new Image() image01.src="img01.jpg" image02= new Image() image02.src="img02.jpg" //--> </script> </head> </html>
Using array if multiple images:
<script language="JavaScript">
function preload() { image01 = new Image(); imgs = new Array(); imgs[0]="image1.jpg" imgs[1]="image2.jpg" imgs[2]="image3.jpg" imgs[3]="image4.jpg"
for(int i=0; i<=3; i++) { image01.src=imgs[i]; } }
</script>
The following will create the please wait...page
<html> <head> <script language="JavaScript"> image01 = new Image(); image01.onLoad=loadImg(); // preload the images image01.src='bigImage.jpg';
function loadImg() { document.location.href='thepage.html'; } </script> </head>
<body> Please wait, loading ...
</body> </html>