Advanced Search

Results 1 to 6 of 6

Thread: Ultimate Fade-in slideshow, onload image

  1. #1
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow, onload image

    Hi,

    Your script http://dynamicdrive.com/dynamicindex...nslideshow.htm is very amazing.

    But I have a little request:
    I'm using this script to slideshow big pictures, and there is a little "bug". The next image appear before the current one is totaly loaded / displayed.

    There is a way to check if the image is loaded before displaying the next one?

    Maybe we can add an event listener on the image onload?
    this.onload=fadein();

    Thanks in advance.
    (and happy new year )

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    The concurrent loading of the following image beneath the current one is actually by design, so the fade effect knows which image to fade to. If some of your images are very large and even the preloading portion of the code isn't able to preload all of them before the script runs, then you might run into the problem you've described.

    I guess you can try loading the slideshow via body onload, Simply change the code of step 2 to:

    Code:
    <script type="text/javascript">
    window.onload=function(){
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
    new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
    }
    </script>

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    I really don't think that will work as, document.write is involved with the new fadeshow() function(s). Have you tried optimizing your images and/or using a longer delay?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Ah yes, I totally forgot about that. John is right. Let me give this some more thought.

  5. #5
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Ok, one thing you can do is try and preload the images inside the HEAD section of the page (instead of the BODY, which is the case now).

    Add the below code directly beneath the fade arrays (code of Step 1) as follows:

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
     
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo4.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
    
    //BEGIN NEWLY ADDED CODE:
    
    function preloadfadeimages(){
    var preloads=new Array()
    for (var i=0;i<arguments.length;i++){
    for (var t=0; t<arguments[i].length; t++){
    preloads[preloads.length]=new Image()
    preloads[preloads.length-1].src=arguments[i][t][0]
    }
    }
    }
    
    preloadfadeimages(fadeimages, fadeimages2)
    where the part in red are the names of the fade arrays you've defined. The newly added function will preload all the images found inside the arrays passed into it.

  6. #6
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it's better with the preload function, tks

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
  •