DHTML : Images scrolling under your titles
Dr Benton
Preloading the Images
To prevent the animation from slowing down, the images must be loaded at the same time as the page. They are then used when
they are already in the browser cache. In this way, the visitors will not notice any imperfections, even if the link is slow.
25: var messageboard = new Array()
26: messageboard[0]="messageboard1.gif"
[...]
53: var imgpreload=new Array()
54: for (i=0;i<=messageboard.length-1;i++) {
55: imgpreload[i]=new Image()
56: imgpreload[i].src=messageboard[i]
57: }
58:
59: var bgimgpreload=new Image()
60: bgimgpreload.src=bgimage
First of all, the address of the text image is stored in the
messageboard array (line 26). This address is then used on lines 53 to 56, where we use the
src attribute of the
imgpreload[] array to preload the image.
The same technique is used for the background image on lines 59 and 60.
Why do we need an array? Our script has many hidden possibilities! We use an array for displaying the title image so that we can select several different
images. They will then be successively displayed in the animation.