Conveyor-Belt Slideshow: Pre-loading Images

[WmIrvin]

Script: Conveyor-Belt Slideshow
URL: http://www.dynamicdrive.com/dynamici...rightslide.htm

This script appears to "preload" all the images, although the show may start before all images are loaded. Is there a way to have the script load one or two images at a time just before they are needed. John provided code in another post to do this with the Ultimate Fade-In Slideshow; I would like to be able to do it with the Conveyor-Belt Slideshow as well. See Ultimate Fade-In post below:

Reference Thread from "Absolutely" posted on 01-18-06 with final reply on 02-22-06; http://www.dynamicdrive.com/forums/s...light=ultimate.

Thanks!

[jscheuer1]

Your link to the thread where this was done for the Ultimate Fade-in script is broken. Anyways, as I recall, that script had no need to know about all the images before loading anyway. Conveyor does need to know the width of all images so cannot really run without loading the images which are not preloaded, rather loaded as the page loads in the normal fashion. It is only onload (of the page) that the script should work. In light of these facts, don't use too many images and keep them small in byte size.

[jscheuer1]

One option for loading Conveyor faster could be to preload its images on a page that will be visited first, before the page with Conveyor on it.

[WmIrvin]

Yes, John, the forum thread referenced above for the Ultimate Fade-In slide show was broken, but you or someone subsequently provided a fix (see http://www.dynamicdrive.com/forums/s...ht=preloading). The ultimate script ran with this code; was it indeed not preloading?

Thanks,
Bill

[jscheuer1]

Ah, so. that was ddadmin and in that case, Ufade originally preloaded its images. DD's fix was, I imagine, to speed the beginning of the script, making it so that it need not wait until all images were loaded to proceed. The conveyor is a different situation. It needs to know the width of the image train in order to calculate at what point one image train will replace the other in order to appear continuous. This cannot be known with certainty, in any given browser, until all the images are loaded unless one were to set the width attribute or property for each image in the leftrightslide array. Even then the code would need to be changed to take advantage of this new information.

Additionally, Conveyor does not preload its images. So, there would be no point in stopping it from doing so.

Finally, whatever you do, images will only load as fast as they can. So, a situation could always arise where the image train was scrolling and there might not yet be an image there to view.

What exactly are you trying to achieve and/or prevent happening with this script? Again, there is no preloading, so describe what happens visually and what you would prefer.

[WmIrvin]

John, thanks for staying with me:

(1) The issue on preloading is that we have some users who still rely on dial-up, and our webmaster is always concerned about load time with lots of images. We will just have to deal with that. Another problem, more important, has just crept up...

(2) The times I like to use this slideshow is when the images are of varying sizes; this show seems to be sensitive to only one dimension... the height. However, take a look at this site: www.viennapres.org/index-smp.asp; this has about 20 images in it, all with a height of 98. The slideshow width is set to 148, and the images range in width from 91 to 322. It runs just fine in Internet Explorer. But in Netscape it does not run at all... all 20 images are stacked as still images, one on top of another. Even when I set the slideshow width to 322, the width of the largest image, it does the same thing. And at the bottom of the stack, when the slideshow is trying to "recycle" back to the start, it looks like it is trying to link two images together; they appear to be "jiggling" on the screen. I have tried putting the smallest image first and last, and the largest image first and last, and even repeating the smallest and largest image at the beginning and end. Nothing seems to work. Yet, the page linked to by this show, http://www.viennapres.org/FFrame.asp?Pg=2&MGN=VPC-52, is a much larger show, and it works fine in Netscape.

Can you help with this issue? The page for the Conveyor Belt, http://www.dynamicdrive.com/dynamici...rightslide.htm, says it is a cross-browser show, and does not mention anything unique about non-IE browsers.

Help! Thanks in advance...

Bill

[jscheuer1]

The only real problem that I can see in Mozilla (NS & FF, others) with:

http://www.viennapres.org/index-smp.asp

is that you open an anchor link (green) right before the slideshow but don't close it. Simply closing this link tag (as I have done below in red) will get things working:

<!-- FEATURE PANEL, INCLUDING SLIDESHOW -->

  <a href="FFrame.asp?Pg=2&MGN=VPC-52" 
  style="text-decoration: none" target="_top">

  <font face="Verdana" size="1" color="white"><b>
  SMP 2005 Photos;<br>
  click here to see more.</a>

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- &#169; Dynamic Drive DHTML code library
*     (www.dynamicdrive.com) . . .

Edit/ added later: It wouldn't hurt to also close the <b> and <font> tags and in general not to leave open tags strewn about your pages, they can always cause problems. Also, it is a better idea to use style to set the font, rather than the font tag. Verdana is a poor choice of font as its size is non-standard and, in browsers that do not support it, your text will be too big or too small.