JQuery Image Gallery with setInterval

[ptemedia]

Hi, I have made an image gallery which all in all is working fine. However, there is the option of to play through the images using setInterval to change the image every 8 seconds. After all images have been preloaded, this works fine. In its current set up however, the code waits 8 seconds before loading the new image and fading it in, by which time, a further 8 or more seconds have passed (my internet is so slow so this won't be a problem for most people as images are reduced quality suitable for web).

What I am trying to change in my code is to preload the next image in the series in the previous Interval.

I also want the interval to stop if the 8 seconds has already passed, and restart when the image is finally loaded. (So if an image takes longer than the 8 seconds to load, the interval will stop and only resume when the picture is loaded. At the moment, if an image does not load in time, the code just skips to the next one.)

Here is my code: I have removed some of the code that is unnecessary to the problem, but the comments should make it clear.

timeoutFunc = setInterval(function(){

// a bar to show how long is left until the image changes.
    			$('.timer').animate({'width':'100%'},0);
    			$('.timer').animate({'width':'0px'},8000);

// here we work out the variable 'mainImg' There is some code removed, but it simply either increments mainImg from say img2 to img3 unless it is at the end of the gallery in which case it goes to img0
    	    	mainImg = 'img' + twomainImg;
    	        
// adds a loading gif to the gallery.
    	    	$('#loader').addClass('loading');


// var src is already calculated and it is the next image to load
    	    	
    	        $('.nextimage').attr('src', src);

                $('.nextimage').addClass('new');
    		        
// Once the image is loaded we fade out the current image, revealing the 'next image'. 
    		        $('img.nextimage').load(function(){
    		        	
    				    $('#loader').removeClass('loading');
    			        	
    			        $('.current').fadeOut('slow', function() {
    			        	$(this).removeClass('current');
    			        	$(this).addClass('nextimage');
    			        });

                                $('.new').fadeIn('slow', function(){
    			        	$(this).addClass('current');
    			        	$(this).removeClass('nextimage');
    			        	$(this).removeClass('new');
    			        });

    			        current = mainImg; // this is used so you cannot select the thumbnail of the picture already selected.
    		        });
    		},8000);

I hope that all makes sense. Many thanks in advance.