Help making my JQuery Fading Gallery more efficient.

Question

On the homepage of this site - http://bit.ly/a3IoV5 - I have a large image fading JQuery gallery.

Here's the JQuery:

$('.fadein img').addClass('js');

$(function() {
    $('.fadein').children().eq(0).appendTo('.fadein').show();
    setInterval(function() {
        $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000);
    }, 8000);
});

the CSS:

.js .fadein img { display: none; }
.js .fadein img:first-child { display: block; }
.fadein img { position: absolute; right: 0; top: 0; width: 1000px; height: 300px; }

and the HTML

<div class="fadein"> 
<img src="header1.png" /> 
<img src="header2.png" /> 
<img src="header3.png" /> 
<img src="header4.png" /> 
<img src="header6.png" /> 
<img src="header7.png" /> 
<img src="header9.png" /> 
<img src="header10.png" /> 
<img src="header12.png" /> 
</div> 

I was hoping there was some sort of image loading trick that would help the loading speed of the page itself. Any help would be appreciated.

Answer 1

You should load the images after the page is ready. Depending on the image size this could increase the speed dramatically.

So you might display the first image while loading the second image. As soon as the second image is ready you start your fade animation.

Answer 2

Just going from the code you have supplied, if you are adding a class of "js" to all img tags under an element with the fadein class as per:

$('.fadein img').addClass('js');

Your CSS Selectors may need changing:

/* Your Current CSS */
.js .fadein img { display: none; }
.js .fadein img:first-child { display: block; }

/* Suggested CSS */
.fadein img.js { display:none; }
.fadein img.js:first-child { display:block; }

Your current codes will work if a parent element also has the js class, but will not have any effect on the elements you add that class to using the first jQuery action.

If you are concerned about visitors seeing a delay when initially loading the page, you may be able to provide at least a placeholder graphic by adding a background image to the fadein element, and maybe using an image which is more compressed/basic (like a low quality JPEG).

/* Suggested CSS */
.fadein { height:300px;width:1000px;background:#F5F5F5 url('http://pottstownarts.org/wp-content/themes/paca/files/headerimgs/basic.jpg') no-repeat right top; }

This image will be covered by the gallery once it starts operating (to be positive, you could always have jQuery remove the CSS background-image setting once the Gallery starts rolling, so any semi-transparent images will not be tarnished).

$( '.fadein' ).css( 'background-image' , '' );