[erobober]

Привет!
Была поставлена задача сделать простенький слайдер в "шапку" сайта. Как результат использовал скрипт "самодельного слайдера" с одного сайта - _http://cave-dell-vino.kiev.ua.

Он работает так - сначала загружает все картинки с помощью скрипта jquery.imgpreload.min.js(_http://www.farinspace.com/jquery-image-preload-plugin/), потом по таймеру меняет CSS свойство z-index картинок. Там ещё можно под определенные адреса страниц прописывать свои картинки.
JS code:

var bannerTime = 4000;
 var bannerFade = 2000; 
 var bannerCount = 0;
 var bannerThis = 0;
 var remove = false;

$(document).ready(function(){

$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
bannerCount++;
}); 

$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
bannerCount++;
}); 

if(location.href.toLowerCase().search('/') >=0)
{
//для главное страницы показываем все слайды кроме 1 и 2

$('#slide-0').remove();
$('#slide-1').remove();
remove = true;
}	

if(location.href.toLowerCase().search('/contacts.html') >=0)
{
//например, для контактов, все слайды

remove = true;
}	

if(remove == false)
{
$('#slide-0').remove();
$('#slide-1').remove();
$('#slide-2').remove();
$('#slide-3').remove();
$('#slide-4').remove();

//. .  . . .
$('#slide-40').remove();
}

bannerCount = 0;
$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
if(bannerCount == 0)
{
        $(this).css({'z-index':'10'});
}	
bannerCount++;
}); 

$('.head-photo div img').imgpreload
({
each: function()
{
// this = dom image object
// callback executes when each image loads
},
all: function()
{
// this = jQuery image object selection
// callback executes when all images are loaded
if(bannerCount > 1)
{
setTimeout('nextSlide();',bannerTime);
}
}
});

});


function nextSlide()
{	
if(bannerThis < (bannerCount-1))
{
bannerThisTemp = bannerThis+1;
}
else
{
bannerThisTemp = 0;
}
$('#slide-'+bannerThisTemp).css({'z-index':'9'});
$('#slide-'+bannerThis).css({'z-index':'10'});
$('#slide-'+bannerThis).fadeOut(bannerFade,function(){
$('#slide-'+bannerThisTemp).css({'z-index':'10'});
$('#slide-'+bannerThis).css({'z-index':'1','display':'block'});
bannerThis = bannerThisTemp;
setTimeout('nextSlide()',bannerTime);
})
}

HTML code:

<div class="head-photo">
<div class="slide"><img src="/images/head-0.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-1.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-2.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-3.jpg" alt="" /></div>
<!--        . ...................... -->
<div class="slide"><img src="/images/head-40.jpg" alt="" /></div>
</div>

Но у меня получилось картинок 40, размером 25-50кб. Вот я свои 40 штук картинок и "разбил по определенным адресам страниц. Скажем если есть сайт визитка с 10 страницами, то по 4 фото-слайда на страницу. А если есть какая то категория, то так же на категорию(по 4-5 картинок).
Вроде нормально, но меня терзают смутные сомнения, может есть какой то другой способ или более продвинутое решение. Да и надоело каждые раз при переходе на другую страницу созерцать слайды сначала. Что ли рандом какой то сделать...

Возникла у меня идея переделки: каким то макаром одноразово загрузить все 40 картинок при первом открытие сайта, а потом при навигации по сайту, должен изменяться только контент страниц, а картинки в шапке-слайде должны какбы в своем потоке.... т.е. показ не начинается сначала, а продолжается далее.

Может есть более "дружественное" решение в плане производительности или у Вас есть предложения по улучшению. Буду благодарен за помощь.

Буду рад советам и примерам =)