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

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

$(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,
может 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);
	});
});

Рони,

Если я правильно поняла, то я заменяю свой скрипт на тот, что вы написали, и добавляю 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 и не знаю как модифицировать скрипт((

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