Preloading: Images and Sound
<font color="#ff0000" size=4>WebTV JS "Bug" - Reload (cmd-r)</font>
There are times when it is desired to have more than one image or song on a page. These are usually instances involving onMouseOvers or slideshows. Without taking appropriate precautions, the first time an image is viewed or a song is played may be accompanied by a wait as it loads. After this the image or song will be in cache and there is virtually no wait the second and subsequent times. To avoid this wait time, the images or sound can be preloaded, i.e., placed in cache, when the page is loaded. There is a down side to this preload, however: It may take an unacceptably long time to load the page as beyond 3 to 5 images or songs the preloading will add to the load time for the page. A way around this is to have the page preceding loaded before it is actually linked to. This is done by placing a <link> tag in the head section of the preceding page:

<link href="URL_nextpage" rel="next">

While the preceding page is being viewed the next page will be loaded and all images or songs on it will be preloaded.

Images  The preloading of images has two statements associated with each image:

<script> img#=new Image(width,height); img#.src="URLimage#"> </script>

In this, # is an image numbered 1, 2, 3, etc., and the dimensions for the image are optional. Not including them will have all images the same size as the smallest of them. Including them allows for images of different dimensions.

Placement of the image(s) on a page is done using either an <img>, <embed>, or an <object< tag, which must be named, e.g.,

<img src="URL_img1" name="myPic">

All subsequent images will appear at the same location being directed there by the location name in the statement:

document.myPic.src=img#.src;

Below are images used previously in illustrating mouseovers, but without preloading. The difference in time taken to view the images can be observed by going first to this example and then returning to this page to note the difference with a preload:

/* Preload Images */ <script> img1=new Image(w1,h1);img1.src="URL1"; img2=new Image(w2,h2);img2.src="URL2"; </script> /* To Switch Image */ function swtch() {document.myPic.src=img2.src;return true;} /* To Restore Image */ function restr() {document.myPic.src=img1.src;return true;} </script> <!-- Cursor Rest --> <a href="#1">Rest</a> <!-- Image Placement --> < a href="#1" onMouseOver="swich()" onMouseOut="restr()"> <img src="URL1" name="myPic">

Rest

Sounds  Preloading of sounds or music is somewhat more involved than for images. Two arrays must be defined: one containing the URLs for the sound files and the other an identifying name for each file. When doing this, care must be taken that the URLs and the names are in the same order in the arrays. The preloading is done by an <embed> tag, one for each sound file. For a single song this would be:

<embed src="URL_song" autostart="false" hidden="true" name="ID_name">

An anchor tag may be used to click on a song:

<a href="javascript:void(0)" onClick="document.ID_name.play(false)">Play</a>

Note that in the <embed> tag the autostart is set as "false" so that the song will not play. To have it play using the anchor tag, play is set as false, i.e., the intial "false" is cancelled by the second "false" making the "play" command "true".

The script which follows preloads three midis, any one of which may be selected to play. A midi, while playing, can be turned off, to select another one, or restarted if desired. A wrong input returns "??":

<script> /* Array of IDnames */ var nm=new Array("ID0","ID1","ID2"); /* Array of URLs */ var sngs=new Array("URL0","URL1","URL2"); /* Length of Array */ len=sngs.length; /* Preload Each Tune */ for(i=0;i<len;i++) {document.write('<embed src='+sngs[i]+' autostart="false" hidden="true" name="'+nm[i]+'">');} /* Start Music */ function selct(n){document[nm[n]].play();} /* Stop Music */ function offselct(){document[nm[n]].stop();} /* Check Input */ function doIt() {var m=document.chuz.iwant.value;if(m<len) /* Convert String to Integer */ {m=parseInt(m,10);n=m; /* Call Play Function */ selct(n);} /* Improper Selection */ else{document.chuz.song.value="??";}} </script>