fragmented loading with Ultimate Fade-in Slide Show v2.4

[kleinandfein]

1) Script Title: Ultimate Fade-in Slide Show v2.4

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

3) Describe problem: Using this scrip with a large array of slides and am finding that the first load can be fragmented, choppy and inconsistent.

Of course once it's completely cached it runs fine. It seems like the script launches before enough of the images are loaded to allow for a smooth display.

I have a "please wait" text that could keep the user occupied for a minute while the images load but not sure how I can display that image/page while the array is loading.

Is there a way to insert an onload command or delay the script until more of the array is loaded?

Any help would be appreciated.

"please wait" page: http://kandf.ca/index.htm http://kandf.ca/index.htm
main page with array: http://kandf.ca/intro.htm http://kandf.ca/intro.htm

[bernie1227]

You can delay the script as such:

setTimeout(function(){
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [768, 768], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		....... (decreased in size for posting reasons) .... 
		["http://kandf.ca/images/00earthwest768-93.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-94.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-95.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-96.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-97.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-98.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-99.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-100.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-101.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-102.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-103.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-104.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-105.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-106.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-107.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-109.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-110.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-111.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-112.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-113.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-114.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-115.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-116.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-117.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-118.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-118.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-119.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-119.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-120.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-120.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/tblhis.htm"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/004.htm", "", "e-mail or call us today!"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/004.htm", "", "e-mail or call us today!"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/004.htm", "", "e-mail or call us today!"],
		["http://kandf.ca/images/00earthwest768-121.jpg", "http://kandf.ca/004.htm", "", "e-mail or call us today!"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:250, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
});
}, 30000); // delay for 30 seconds

This will delay the script, but you may be better off trying to reduce the size of the images so that they can load quicker (or putting less of them!).

Credit really goes to John for this:
http://www.dynamicdrive.com/forums/s...cript-function

[Beverleyh]

I agree with Bernie. I see that your images are already optimised to a certain degree (about 75% compression?), but I think you could squeeze a little more out of them without a great deal more loss in quality. Somewhere between 50% and 60% should give you reasonable results, but I also agree that you should look at reducing the quantity of images too - 10 or so images should be ample.

I appreciate that you might want to show the full collection but, using this type of slideshow, you should consider what your visitors will realistically hang around to look at during their time on your page, which probably will be considerably less than the time taken for a current full rotation of images. With the current quantity of images, you're adding lots of extra download 'weight' for no real benefit. If you would like to continue using your full image collection, consider using a different type of gallery - one that is geared more toward a larger number of images and so has easier navigation - maybe this? http://www.dynamicdrive.com/dynamici...photoalbum.htm

But back to image optimisation...

DD image optimising tool can be found here: http://tools.dynamicdrive.com/imageoptimizer/

Alternatively, for batch conversions, I like Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/ (fiddle with the compression setting over to the right of the screen)

If you have a copy, Adobe Fireworks offers some of the best optimisation/compression for jpegs, but its not free. It wipes the floor with the native 'save-for-web' settings in Photoshop, so, for people with a full Adobe suite, its worth switching between the 2 applications for jpegs.

[jscheuer1]

I question the number of images. Even though they grow on you after a while, the first part of the slideshow seems fine but at a certain point, to a first time viewer it becomes self indulgent, more of a family photo album than a business or concept promotion, and a sort of confused family photo album at that. Those images could go elsewhere on the site in a more straightforward slideshow or as single images not as an evolving collage. Or just be sprinkled about as ordinary images here and there on the various other pages of the site. The power of having them like that is actually greater than having them in an overwhelming slideshow. At the point where the last text (not including the text at the bottom, "Klein & Fein Design", It's the text about your dreams, when that's gone) is no longer visible, you should end it, or just a little after that. But that doesn't help with your problem.

Speaking of which, there is no problem here. I have a 100mbps connection, which is fast, but not as fast as some. So there is no problem for me. Even if I clear my cache and go directly to the intro.htm page, there is no lag or choppiness. There is a slight delay while the first image loads when the slideshow is just black. Once it starts it's smooth.

What I would advise is taking the first five (or more if testing shows more are required) images from the slideshow and put them in a division, position absolute, visibility hidden at the bottom of the index.htm page:

<div style="visibility: hidden; position: absolute; top: -2000px; left: -2000px;">
<img src="http://kandf.ca/images/00earthwest768-0.jpg" width="1" height="1" alt="original image" title="">
<img src="http://kandf.ca/images/00earthwest768-01.jpg" width="1" height="1" alt="original image" title="">
<img src="http://kandf.ca/images/00earthwest768-02.jpg" width="1" height="1" alt="original image" title="">
<img src="http://kandf.ca/images/00earthwest768-03.jpg" width="1" height="1" alt="original image" title="">
<img src="http://kandf.ca/images/00earthwest768-04.jpg" width="1" height="1" alt="original image" title="">
</div>

That will delay the loading of intro.htm until those 5 images are loaded. But there's a problem on faster connections, these images will load so fast that one doesn't get to see the text on the index.htm page long enough to read it. And, once the images are in cache, no one will be able to. So you may want to build in a minimum delay, and offer a way (like via a button or link that appears once the images are loaded) for folks to use to skip the minimum delay if the images are in cache.

That seems pretty easy to do, but will take me a little time to work out the details. So I will post back with that once I have it.

In the meantime you can setup the above division as described to see if it helps with slideshow smoothness and to determine if more images need to be included.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Another thought I had on this is that if you really want things to go as smoothly as possible, you would need a different script. One that loads that earth image as the background then overlays it with these other images which at one time were each separate images. They could be again. That way each would be added just once and cleared away as desired rather than having to load over and over again as part of a huge collage image.

And, what happens if javascript is disabled? How do they get to the site at all?

Or, since you seem to be targeting people with all this money to pay others to live their lives for them, why not assume that they have a fast connection like me (who doesn't have all that money BTW) and not worry about it so much, concentrating on a way to prolong index.htm so it can be read before it switches to the intro.htm page.

[jscheuer1]

OK, I have it figured out and I see what happens with non-javascript people and that works well. The only question I have is with the text and lists in this section on index.htm:

<p align="center"><span style="font-family: Arial"><font size="1">We are 
committed to sustainability without deprivation. Our aim is to build a better 
future </font><b><font size="1">by helping you to reduce your environmental 
footprint while maintaining or improving your quality of life.</font></b></span></p>
<p><font face="Arial" size="1">Private one-on-one consultations</font></p>
<ul>
	<li><font face="Arial" size="1">Sustainable House Design</font></li>
	<li><font face="Arial" size="1">Sustainable Lifestyle Choices</font></li>
	<li><font face="Arial" size="1">Sustainable Partnerships</font></li>
</ul>
<p><font face="Arial" size="1">Workshops on all aspects of building a home</font></p>
<ul>
	<li><font face="Arial" size="1">Site Preparation</font></li>
	<li><font face="Arial" size="1">Design and Planning</font></li>
	<li><font face="Arial" size="1">Foundations and Basements</font></li>
	<li><font face="Arial" size="1">Framing</font></li>
	<li><font face="Arial" size="1">Plumbing and Electrical</font></li>
	<li><font face="Arial" size="1">Roofing</font></li>
	<li><font face="Arial" size="1">and more...</font></li>
</ul>
<p><font face="Arial" size="1">Public Speaking</font></p>
<ul>
	<li><font face="Arial" size="1">The three pillars of sustainability</font></li>
	<li><font face="Arial" size="1">How to get there from here</font></li>
	<li><font face="Arial" size="1">The 21st Century Economy</font></li>
</ul>

That's all there taking up space but you can't see it unless you highlight it. It's because it's black text on a black background. Is that intentional?

Anyways, without addressing that, here's a substitute for the index.htm page (right click and 'Save As' then rename to index.htm):

index.txt

Keep a backup of your current page, just in case.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Any questions, just ask.

Oh, and I have a question - would you come to the Philadelphia area (PA USA) or know of anyone in your line of work that would or who is located in or around Philadelphia PA?