I'm have trouble preventing my jQuery slideshow from showing a glimpse of the last frame before my slideshow begins. I would like the first frame to begin immediately without showing a glimpse of the last frame. Any suggestions are welcome and appreciated.

Thank you.


Here is my current jQuery code:

Code:
$(function(){
	slideShow();
});

function slideShow() {
    var mycounter;
	mycounter = 0;
	$('#replay, .url').hide();  // make sure button is hidden

	/**
	 * Array of images
	 */
	var arr = [ "img/image1.jpg", "img/image2.jpg", "img/image3.jpg","img/image4.jpg", "img/image5.jpg", "img/image6.jpg", "img/image7.jpg","img/image8.jpg","img/image9.jpg"];
		
	/**
	 * Foreach loop
	 */
	
	$.each(arr, function(i, val) {				
		/**
		 * Changing div opacity to 0. 1000 is the time in ms.
		 */
		$("#sImage").animate({opacity: 0.0}, 1000);
		/**
		 * Queue function will place the event in queue
		 * Changing image src after the above animate function is completed
		 */
		$("#sImage").queue(function(){
			$("#sImage").attr("src", val);
			$("#sImage").dequeue();					
		}); 
		/**
		 * Changing div opacity to 1. 1000 is the time in ms.
		 */
		$("#sImage").attr("src", val).animate({opacity: 1.0}, 10000);	
		/**
		 * Queue function will place the event in queue
		 * Here, queue function is used to hold the changing image for 1 second display
		 */				
		$("#sImage").queue(function(){					
			setTimeout(function(){
				$("#sImage").dequeue();
				mycounter++;
				// after $.each start a loop that checks for mycounter=arr.length regularly and mycounter
				setTimeout(checkCounter, 1, mycounter); 
			}, 0);
							
		});  
			
	}); 	    
        
        function checkCounter() {
	if(mycounter<arr.length) {
		setTimeout(checkCounter, 1, mycounter);
	} else {
		// mycounter has reached arr.length ... show the button
                $('#replay').fadeIn('fast');
	}
}

$('.url').delay(90550).fadeIn('slow');

	$('#replay, .replay').click(function(){ //replays video after completed
		slideShow();
	});
	
}