how do i make the slideshow start when everything has loaded?

**sher_amf** · 01-15-2010 05:55 AM

my problem is when the page loads, the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading..

what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth..

Code:

<div id="slideshow">
    <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="Image/image2.jpg" alt="Slideshow Image 2" />
    <img src="Image/image3.jpg" alt="Slideshow Image 3" />
    <img src="Image/image4.jpg" alt="Slideshow Image 4" />
</div>

javascript

Code:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );//speed of changing image
});

**sher_amf** · 01-16-2010 08:03 PM

tried this and what happened was only the first image was showing..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<head>
<link rel="shortcut icon" href="favicon.ico">

<!-----Metatags here--------->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-----Metatags here--------->




<title>tation</title>

<!-----Javascript and CSS codes here------->
<link rel="stylesheet" type="text/css" href="js-css/layout.css" />
<script type="text/javascript" src="js-css/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js-css/slideshow.js"></script>
<!-----Javascript and CSS codes here------->

</head>

<body onload"startShow()">

<div id="topsection">

  <center>
  <table width="840px" border="0">
  <tr>
  <td><div align="left"><img src="Image/logo2.png" width="558" height="129" /></div></td>
  	  </tr>
      
   	  <tr>
      <td>
	 	 <ul class="glossymenu">
        <li><a href="contactus.html"><b>Contact Us</b></a></li>
        <li><a href="facts.html"><b>Facts</b></a></li>
        <li><a href="products.html"><b>Products</b></a></li>	
        <li  class="current"><a href="index.html"><b>Home</b></a></li>	
		</ul>
	</td>
    </tr>
  </table>
</center>

</div>


<div id="maincontainer">

<div id="contentwrapper">
<div id="contentcolumn">

<div class="index">
<br/>
<center>
<table width="546" border="0">
  <tr>
    <td width="811">
    
<div id="slideshow">
    <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="Image/image2.jpg" alt="Slideshow Image 2" />
    <img src="Image/image3.jpg" alt="Slideshow Image 3" />
    <img src="Image/image4.jpg" alt="Slideshow Image 4" />
</div>
<!---end of division for the slideshow---->

</td>
  </tr>
</table>
</center>
<br/>
<strong><u></u></strong> is your complete water store. Our machines is equipped with a 16-Stage Pure & Fresh Water Purification System, which produces the highest quality drinking water available.Our unique purification system makes other agents that affect the taste and healthfulness of water.<br /><br />

<strong><u></u></strong> not only offers this wide range of products related to water treatment applications, but strives to develop long-term strategic partnerships with our top customers by identifying quality product sourcing, competitive pricing, consolidation services and other professional support services.	
<br />
<br />
<strong><u></u></strong> provides healthy water for every Filipino. A regular maintenance check-up is initiated to ensure that the system is running smoothly. Our purification process not only makes the water healthier but it also makes it taste bettehas the leasing edge in water purification.

</div>
</div>
</div>


<div id="footer">&copy;  <br> Powered by <b><u>sheramf</u></b></div>

</div>

</body>
</html>

Code:


function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

function startShow() { 
    $(function() { 
        setInterval( "slideSwitch()", 4000 );//speed of changing image 
    }); 
}

**criterion9** · 01-16-2010 09:16 PM

You can try using one of the old preloading techniques from ages ago. You simply loop through all your image URLs and append them to the src attribute of dynamically created img elements that you never append to the DOM. This should at least initiate the download process for them by the time you start using them.

**sher_amf** · 01-17-2010 12:19 AM

Originally Posted by criterion9

You can try using one of the old preloading techniques from ages ago. You simply loop through all your image URLs and append them to the src attribute of dynamically created img elements that you never append to the DOM. This should at least initiate the download process for them by the time you start using them.

i didn't quite understand that .... do you have sample codes?

**criterion9** · 01-17-2010 07:54 AM

Something like?

Code:

//assuming photos is an array of photo urls
myImageLoader = new Image();
for(var i = 0; i < photos.length; i++){
myImageLoader.src = photos[i]; //could use objs here instead of that is what you have already
}
myImageLoader.onLoad=everythingReady(); //assuming everythingReady is a function that will start your slideshow

A little googling for "preloading images javascript" found some tutorials and such:
Link1
Link2
Link3
etc...

**sher_amf** · 01-17-2010 10:19 PM

it doesn't work in firefox..it works on chrome and IE

**criterion9** · 01-18-2010 12:09 AM

I didn't test it or anything. Do you get an error message?

**sher_amf** · 01-18-2010 03:18 AM

there was no error message... but when i tried it in firefox the image won't change..

**criterion9** · 01-18-2010 07:32 AM

Did your original code work before in FF? This shouldn't have an effect on that. Is it possible that the function starting your slideshow never fires?

**sher_amf** · 01-18-2010 08:25 AM

yeap it worked before i added the startshow function

**criterion9** · 01-18-2010 08:32 AM

Is it possible that the function starting your slideshow never fires?

See second question above.

Thread: how do i make the slideshow start when everything has loaded?

Thread Tools

Display

how do i make the slideshow start when everything has loaded?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions