Ultimate Fade-in slideshow, onload image

[Compuhelp]

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 )

[ddadmin]

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:

<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>

[jscheuer1]

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?

[ddadmin]

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

[ddadmin]

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:

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.

[Compuhelp]

it's better with the preload function, tks