Advanced Search

Results 1 to 5 of 5

Thread: Time Delay for Loading Graphics

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

    Question Time Delay for Loading Graphics

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <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.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jscheuer1; 04-17-2011 at 06:12 PM. Reason: remove email link

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
  •