Pre-load images with Ultimate Fade-In Slideshow

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: images do not pre-load before script runs and the loading graphic does not display. I have found a work-around to get the loading graphic to display here: http://www.dynamicdrive.com/forums/s...ad.php?t=51891, but I'm not sure what problems may result from modifying the script that way.

The pre-loading solution listed there does not actually solve the pre-loading issue I'm having. I'm running a random slideshow so all of the images need to be loaded before it begins, otherwise it fades to half-loaded images.

Does anyone know how to modify the script so it will display only the loading graphic until it has loaded every image in the slideshow?

What happens if you change the following line inside the .js file:

Code:

---

jQuery(document).ready(function($){ //fire on DOM ready

---

to:

Code:

---

jQuery(window).load(function($){ //fire on document load

---

instead?

ddadmin:

Thanks for the reply. When I substitute (window).load per your suggestion the script no longer runs at all.

Any other ideas?

Does anyone know if it is possible to load the images completely before running this slideshow?

Ah yes there was a slight error in the code I posted. What about try the attached below .js file.

ddadmin:

Thanks again for keeping with this. I'm having two problems with the file.

The first is that I'm unable to properly view the source code. There is just a rectangular box character where a line return should be, which makes it very difficult to read (I use Microsoft Notepad for creating & editing my webpages), so I'm not sure what you have changed. But I had changed some stylization elements on mine, and I'd need to be able to find those again to change them back. I had also fixed a bug with the script not showing the loading graphic.

Second, when I use your file I once again have no loading graphic that displays while the script is loading all the images. I'm assuming you just used the original source code, which means you picked up the bug in the original script that I had already fixed.

I've attached the script I'm currently using, which works exactly how I want it, aside from the issue of not waiting for the images to load before starting. I apologize for not thinking to attach my modified version sooner. I hope this doesn't throw you off too much and this is still a relatively simple fix away.

Not a problem, I've modified your attached .js file with the changes that causes the script to fire on page load.

From what I can tell, the only code that you changed was on the following two lines:

Code:

---

var slideshow=this, $=jQuery
jQuery(window).load(function(){

---

I'm not sure why, but when I tested it with larger-than-normal graphics, the new one you posted didn't show a loading graphic and almost instantly started running the slideshow with the images partially loaded or not loaded at all.

The old way seemed to wait a bit longer before running the slideshow and did show a loading graphic initially. Then I tried putting the images in the body of the html document in a hidden <div> so it loads the images before considering the page loaded and that seemed to work, although I am still not getting a loading graphic showing up while it loads the images.

I'm at home right now and don't have all the resources I have at work, so I may not be able to do much more testing until next week.

Yep, those are the only two lines of changes. What it should do is fire the slideshow when the page has completely loaded, including after all the images within the slideshow have. As far as the issue of a loading graphic, the original script would simply display the first slide almost immediately while the script is initializing, and once it has, go on to show the 2nd slide. This seems just as good as displaying a loading graphic instead. Are you ok with the former behavior?

ddadmin:

Sometimes it would wait to fire the slideshow when all the images were loaded, but most of the time it would just start for me. I also discovered that the previous version I had would sometimes work as it should, but not all the time. It seems to work most of the time in Firefox.

Your updated script is not loading any preliminary image for me in Firefox. While it's loading the images I just have a blank space in Firefox (in other browsers it just starts the slideshow whether the images have been loaded or not).

Showing a loading graphic would be preferred, though, I think, because if it loads quickly it would blip the first image which would be jarring. Blipping a loading graphic is less noticeable. My goal is for it to look best for those with faster connections (the majority), but letting those trying to access by mobile phone or dial-up know that something's coming.

It's difficult to test this with my connection speed, especially when I'm trying to test across all the major browsers. For my tests, I'm using 10MB images and they're still loading too fast sometimes. I think in practical terms I can end up making one of these scripts work. My actual images are 1/10 that size or less, so even if it doesn't wait to load, most people probably won't notice the difference.

Thanks a lot for your help!

As far as the modified script not showing the 1st slide while the script is initializing, try the below modified .js file instead. What it does is load the 1st slide as soon as the document DOM has loaded (usually quite fast) while waiting for the entire document (including images) to load before initializing the script.

Thanks again for the help, ddadmin!