www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slideshow timing (basic)

  1. #1
    Join Date
    Jan 2005
    Posts
    216

    Slideshow timing (basic)

    I'm trying to build a slideshow page in Javascript. It's dynamically built and all of that is working, but the Javascript timing is giving me trouble.

    First, a PHP script builds an array of Image objects to preloads. I have a 'Loading pictures....' message appear in the foreground of the page. This message should disappear after the final image has been preloaded. I'm using Javascript's onLoad() event of the last image to change the message's CSS div display property to hidden, but it always executes immediately, even though the browser is obviously still working.

    Is there a way just to tell Javascript "do not proceed with the rest of the code until this task has finished"? I'm open to any ideas.
    dz_boy

  2. #2
    Join Date
    Mar 2009
    Posts
    464
    Javascript image objects have a true/false property called 'complete' which indicates if they have finished loading. Just because the 'window' has loaded doesn't mean the image has loaded. You might try something along these lines:

    Code:
    var t = setInterval(myFunc, 100);
    
    function myFunc(){
          if ( LastImageObject.complete){
                clearInterval(t);
          }
          else { return;}
          ....whatever it is you want your code to do...

  3. #3
    Join Date
    Jan 2005
    Posts
    216
    Thanks tcobb, that worked. Here's the code that I used:

    Code:
    var t = setInterval("Loaded()",100);
    	
    function Loaded(){
    	if(image[15].complete) //15 was the last image in the array
    	{
    	clearInterval(t);
    	document.getElementById('load').style.display = "none";
        }
        else{return;}
        }
    dz_boy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles