SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Oregon
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    shorter download time?

    Alright i have this slideshow code (below) and it preloads every image that is entered. This really drags out download time. I am trying to eliminate or just preload the first image or when the image is about to rollover. Or anything that will reduce download time if it is even possible. here's the code
    <script>


    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000

    // Duration of crossfade (seconds)
    var crossFadeDuration = 50

    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below

    Pic[0] = 'Jeff.jpg'
    Pic[1] = 'LIBRARY.jpg'
    Pic[2] = 'COMPUTERS.jpg'
    Pic[3] = 'CLAUDIA.jpg'



    var t
    var j = 0
    var p = Pic.length

    var preLoad = new Array()
    for (i = 0; i < p; i++){
    preLoad[i] = new Image()
    preLoad[i].src = Pic[i]
    }

    function runSlideShow(){
    if (document.all){
    document.images.SlideShow.style.filter="blendTrans(duration=2)"
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
    document.images.SlideShow.filters.blendTrans.Apply()
    }
    document.images.SlideShow.src = preLoad[j].src
    if (document.all){
    document.images.SlideShow.filters.blendTrans.Play()
    }
    j = j + 1
    if (j > (p-1)) j=0
    t = setTimeout('runSlideShow()', slideShowSpeed)
    }
    </script>
    thanks justin

  2. #2
    SitePoint Member
    Join Date
    Feb 2003
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Preloading is rarely a good idea. For most purposes postloading is better. When all the images have loaded it will start the slideshow. You could always change it to start the slideshow after a couple have loaded and hope they're there by the time they're needed - it's up to you

    Try this out for size (then change it to use your own images)

    Code:
    <html><head><title> New Document </title>
     <base href="http://home.btconnect.com/piglet/images/" />
     </head>
     <body>
     <script>
     // Set slideShowSpeed (milliseconds)
     var slideShowSpeed = 5000
     
     // Duration of crossfade (seconds)
     var crossFadeDuration = 50
     
     // Specify the image files
     var Pic = new Array() // don't touch this
     // to add more images, just continue
     // the pattern, adding to the array below
     
     Pic[0] = 'piglet1.gif'
     Pic[1] = 'piglet2.gif'
     Pic[2] = 'piglet3.gif'
     Pic[3] = 'piglet4.gif'
     
     var t
     var j = 0
     var p = Pic.length
     
     var preLoad = new Array()
     function postload(){
     for (i = 0; i < p; i++){
     preLoad[i] = new Image()
     preLoad[i].onabort=preLoad[i].onerror=preLoad[i].onload=foo;
     preLoad[i].src = Pic[i]
     }
     }
     
     imgLoaded=0;
     function foo(){
     	if (++imgLoaded==(p-1))
     		runSlideShow()
     }
     
     onload=postload;
     
     function runSlideShow(){
     	if (document.all){
     		document.images.SlideShow.style.filter="blendTrans(duration=2)"
     		document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
     		document.images.SlideShow.filters.blendTrans.Apply()
     	}
     	document.images.SlideShow.src = preLoad[j].src
     	if (document.all){
     		document.images.SlideShow.filters.blendTrans.Play()
     	}
     	j = j + 1
     	if (j > (p-1)) j=0
     	t = setTimeout('runSlideShow()', slideShowSpeed)
     }
     </script>
     <img src="piglet0.gif" name="SlideShow" width="100px" height="100px" />
     </body>
     </html>
    piglet

    Moderator at The City

  3. #3
    SitePoint Enthusiast kgish's Avatar
    Join Date
    Dec 2001
    Location
    Gouda, The Netherlands
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on how large the images are, an even better solution might be only to preload the "next" image of the next slide, after the current slide has been loaded and the user is spending time viewing this idly.

    By the time the user has viewed and read the whole slide, the next image has been preloaded alright, resulting in the desired snappier slide transition effect.
    Kiffin
    Your average future-famous kind of guy...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •