Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2015, 16:50
Новичок на форуме
Отправить личное сообщение для Katefan Посмотреть профиль Найти все сообщения от Katefan
 
Регистрация: 09.10.2014
Сообщений: 5

Вставить 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();
  });


только он срабатывает для страницы, а мне нужно для блоков, помогите плиз)
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2015, 18:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Katefan
фильтре элементы загружаются 12 сек
до этого их что нет на странице? может прелоадер картинок сделать?

Последний раз редактировалось рони, 10.11.2015 в 18:08.
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2015, 18:11
Новичок на форуме
Отправить личное сообщение для Katefan Посмотреть профиль Найти все сообщения от Katefan
 
Регистрация: 09.10.2014
Сообщений: 5

они есть, просто при выборе свойства популярные допустим, они фильтруются первый раз 12 сек
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2015, 18:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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);
	});
});

Последний раз редактировалось рони, 10.11.2015 в 19:07.
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2015, 20:47
Новичок на форуме
Отправить личное сообщение для Katefan Посмотреть профиль Найти все сообщения от Katefan
 
Регистрация: 09.10.2014
Сообщений: 5

Рони,

Если я правильно поняла, то я заменяю свой скрипт на тот, что вы написали, и добавляю 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 и не знаю как модифицировать скрипт((
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2015, 21:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Katefan
длится эти 12 сек
как это увидеть? можно ссылку в личку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Webpack'а тред nerv_ Сборка проекта, утилиты 58 07.05.2016 13:46
Как вставить правильно функцию? Iceman77 Общие вопросы Javascript 6 08.05.2014 15:27
передать параметры в функцию jQuery AJAX Lion_astana Общие вопросы Javascript 7 21.02.2014 17:25
Вставить транслит в js функцию djonA Общие вопросы Javascript 3 26.08.2013 22:09
Помогите подключить функцию в onclick moloko Элементы интерфейса 10 30.07.2013 08:27