Вставить loader в функцию

[Katefan]

Доброго времени. Возникла проблема. Суть ее такова:
Имеется скрипт фильтрации блоков

$(function() {
	var newSelection = "";
	$("#flavor-nav a").click(function(){
	    $("#all-flavors").fadeTo(200, 0.10);
		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");
		newSelection = $(this).attr("rel");
		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
	    $("#all-flavors").fadeTo(600, 1);
	});
});

Когда блоков немного все прекрасно работает, но когда их порядка 500 штук, то при первом клике на фильтре элементы загружаются 12 сек, при дальнейших кликах все работает очень быстро как и положено. Поэтому возникла идея поставить лоадер, чтоб пользователь не ломал голову почему все зависло. Привожу код html для понятности.

<div id="flavor-nav">			
<a rel="all" class="current button type">Все </a>
  <a rel="pop" class="button type">Популярные</a>
</div>


 <div class="flavor all pop"><img src="/p266.jpg"> </div>  	
 <div class="flavor all"><img src="/p267.jpg"> </div>  	
<div class="flavor all"><img src="/p268.jpg"> </div>  	
 <div class="flavor all pop"><img src="/p269.jpg"> </div>

Понимаю что надо поставить картинку

<div id="loading">
  <img id="loading-image" src="/ajax-loader.gif" alt="Loading..." />
</div>

и что то похожее на такой скрипт

$(window).load(function() {
     $('#loading').hide();
  });

только он срабатывает для страницы, а мне нужно для блоков, помогите плиз)

[рони]

фильтре элементы загружаются 12 сек

до этого их что нет на странице? может прелоадер картинок сделать?

[Katefan]

они есть, просто при выборе свойства популярные допустим, они фильтруются первый раз 12 сек

[рони]

Katefan,
может css анимацию попробовать сделать вместо slideDown и закешируйте $(".flavor") до функции чтоб не искать всякий раз

$(function() {
	var divs = $(".flavor");
	$("#flavor-nav a").click(function(event){
	    event.preventDefault();
	    $("#all-flavors").fadeTo(200, 0.10);
		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");
		var newSelection = $(this).attr("rel");
        newSelection = divs.filter("."+newSelection).slideDown(600);
        divs.not(newSelection).slideUp(600);
	    $("#all-flavors").fadeTo(600, 1);
	});
});

[Katefan]

Рони,

Если я правильно поняла, то я заменяю свой скрипт на тот, что вы написали, и добавляю css анимацию типа такой.

.flavor .slidedown {
    -webkit-animation-name: slideDown;
}

.flavor .slideup {
    -webkit-animation-name: slideUp;
}

@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(endYposition);
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        -webkit-transform: translateY(endYposition);
    }
}

+ надо добавить класс slidedown и slideup в html. Только ничего не изменилось, все равно при первом клике все длится эти 12 сек

Мне кажется значок лоадера тут смотрелся бы очень норм при их фильтрации, но я тупица в javascript и jquery и не знаю как модифицировать скрипт((

[рони]

длится эти 12 сек

как это увидеть? можно ссылку в личку