Jim Hutchinson <[EMAIL PROTECTED]> writes:

> Yes Guido, please post that code again. It sounds wonderful! Imagine the
> possibilites.
> >
> >I just posted a code snippet to Suzanne for 'just-in-time' preloading
> >of the next of a sequence of images. I could repost that on the list
> >if anyone is interested.

Well then, due to popular demand, here we go:


<script language="JavaScript">
Sequence = new 
Array("images/test2.jpeg","images/test3.jpeg","images/test4.jpeg","images/test5.jpeg");
Counter = 0;
function PreloadNext () {
        Next_image = new Image();
        Next_image.src = Sequence[Counter];
        Counter++;
}
</script>
<IMG NAME="Current_image" SRC="images/test1.jpeg" onLoad="PreloadNext()">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Next Image" onClick="Current_image.src=Next_image.src">
</FORM>


A little explanation: the Sequence array is a convenient way to store
the source locations of the images we're going to preload. It doesn't
load anything yet, and it doesn't contain the first image (which is
not going to be preloaded, but rather just loaded). Similarly, the
Counter variable and the PreloadNext function are declared, but not
being put to use yet.

The action begins at the IMG tag. It loads the first image. As soon as
this is done, the PreloadNext function is triggered. This one creates
a new image which is not visible to the viewer but very real for the
browser software, which loads its SRC when we tell it to. It knows
what source to load by picking the appropriate one out of our Sequence
array. When this is done, it increments the Counter so we'll take the
next source string next time around.

Then we have the form, with the button. When the button is clicked, it
replaces the source of the visible image with the source of the
invisible preloaded image. You could of course dispose of the form by
using the onClick event of the image itself.

And now we've arrived at the real trick. Replacing the current image
with the preloaded next image, triggers another onLoad event in the
IMG tag. Which activates the PreloadNext function.... so we've closed
the circle.

Tested only in NN4, but it's very straightforward coding as it is.

Note, that it would be easy to modify the script to make it preload
the next _two_ pictures, if you want to stay ahead of your clients.

:*CU#
-- 
***    Guido A.J. Stevens      ***    mailto:[EMAIL PROTECTED]    ***
***    Net Facilities Group    ***    tel:+31.43.3618933    ***   
***    http://www.nfg.nl       ***    fax:+31.43.3560502    ***   

PGP fingerprint E3 56 AA 30 44 EE 9E E9 CA 52 C5 B8 66 2F 77 21
____________________________________________________________________
--------------------------------------------------------------------
 Join The Web Consultants Association :  Register on our web site Now
Web Consultants Web Site : http://just4u.com/webconsultants
If you lose the instructions All subscription/unsubscribing can be done
directly from our website for all our lists.
---------------------------------------------------------------------

Reply via email to