Time Delay for Loading Graphics

[Jim Weinberg]

I want to run a slideshow script on my webpage (see my post: Slideshow with multiple transition effects). The script words pretty well, except that the transitions are sluggish until they've been cycled through once (until they're all loaded into the browser's cache, I suspect).

My question is, is there a way to display part of the webpage (html only) and delay the exicution of the slideshow script until all of the graphics have been loaded? Delaying it for a fixed amount of time would also work, I think.

Thanks,
Jim W.

[jscheuer1]

I'm not sure about your other post, could you link to it? If you mean Vic's code, it doesn't look like he included a preload/load check option, but you better ask him to be certain.

Anyways, if there is no option like that, instead of starting the slideshow right away, you could have a front end something like - say all the images in the slideshow are in a div with an id of slideshow, or you can collect them some other way. You run through them in a loop loading them, once they all either load or fail (error), you can then start the show.

I see his code can have markup like:

  <div id="tst1" class="slideshow">
   <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
   <div class="panel" ><a href="#">Panel 1</a></div>
   <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
   <div class="panel" style="background-Color:red;">Panel 2</div>
   <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
   <div class="panel" style="background-Color:green;" >Panel 3</div>
   <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
   <div class="panel" style="background-Color:green;" >Panel 4</div> . . .

So for that particular show, those are the images. After the browser has parsed the page, you can check on things by doing:

<script type="text/javascript">
(function(){
	var ims = document.getElementById('tst1').getElementsByTagName('img'), count = ims.length;
	for(var i = 0; i < ims.length; ++i){
		(function(s){
			var im = new Image();
			im.onload = im.onerror = function(){
				if(!--count){
					// run the init code for the 'tst1' slideshow here
				}
			};
			im.src = s;
		})(ims[i].src);
	}
})();
</script>

That's assuming the init for the slideshow does no document.write business. It doesn't look like it does. I'd suggest putting that script right before the closing </body> tag. I'm not all that familiar with Vic's script though, there could be problems. Perhaps Vic could weigh in.

[Jim Weinberg]

Hi John.

Thanks for the reply. I don't have the code up yet, so there's no link to it. I could put it up if you think that would help. You're right, it is Vic's code. I've emailed him (at the address on the website: vwphillips@ntlworld.com), but, so far, no answer.

I tried your code. As you suggested, I put it at the end and embedded Vic's init script where you indicated. No luck.

Any other thoughts?

Thanks,
Jim

[jscheuer1]

I could always have a typo in my code, or you may have introduced one. What does it do? Does the show run at all?

Also, and I for got to mention this as I assumed it was obvious, you shouldn't init before this added code.

Right now I'm also wondering if there's a start command separate from the init?

In any case, it would help if you were to put up a demo of it. That would save me the time of having to imagine all your settings, and make up a proxy show with images that might be too dissimilar to yours to really be a good test. There would be other time savings for me as well.

And if Vic does weigh in, it will give him something to work with as well. He's not as frequent a participant here as I am.

Please put up your demo. It doesn't have to work.

[Jim Weinberg]

Okay, John. I uploaded the page and graphics. Here's the link:

www.ohiobuttons.org/Testing/SlideShowTester.html

Right now, I'm going to go hit my head against the nearest wall, because it seems to be working okay from the server in Netscape, IE, and Flock. The only problem is that Firefox displays the page differently if I load it from my computer or from the server. I'm beginning to think I should just scape this whole slideshow thing.

Let me know if I'm loosing touch with reality. I'm off to get a beer ... or 2 or 5.

Jim.
ps. If you want, go ahead and email me directly at jimweinberg at sprintmail.com