У меня есть веб-приложение, которое я использую для выбора рабочего графика. В основном я пытаюсь подражать itunes. Каждый рабочий график представляет собой элемент списка, который можно сортировать. Элементы списка загружаются ajax в отдельные неупорядоченные списки. Слева находится боковая панель с неупорядоченным списком, который действует так же, как список воспроизведения. Вы можете перетаскивать графики работы вверх и вниз, чтобы изменить их порядок или в разные списки. И когда вы нажимаете на список слева, отображаются только элементы списка в этом списке. В firefox все отлично работает. Но при использовании других браузеров он становится невероятно медленным после того, как вы нажмете на список строк на левой боковой панели. По мере увеличения количества элементов списка скорость замедляется.
Мой код jquery находится в заголовке документа. Вот html для тестовой страницы.
<body>
<div id='sideBar'>
<p class='listTitle'>LIBRARY</p>
<ul class='lineList'>
<li id='all_lines' class='list'>All Lines<span class='listTotal'>5</span></li>
</ul>
<p class='listTitle'>Line Lists<span class="addList ui-icon ui-icon-circle-plus">h</span></p>
<ol id="userLists" class='lineList'>
<li id='top_picks' class='list' >Top picks<span class='listTotal'>5</span> </li>
<li id='one_day' class='list' >One day<span class='listTotal'>5</span></li>
<li id='two_day' class='list' >Two day<span class='listTotal'>5</span></li>
<li id='three_day' class='list' >Three day<span class='listTotal'>5</span></li>
<li id='four_day' class='list' >Four Day<span class='listTotal'>5</span></li>
<li id='mixed' class='list' >Mixed<span class='listTotal'>5</span></li>
<li id='reserve' class='list' >Reserve<span class='listTotal'>5</span></li>
<li id='deleted' class='list' >Deleted<span class='listTotal'>5</span></li>
</ol>
</div> <!-- end of Sidebar div div (holds all the line lists on the right side) -->
<div id='linecontainer' class='ui-widget'>
<!-- each ul could have 0 to as many as 300 list items -->
<ul id="TOP_PICKS" class='ui-widget-content'>
<li>lots of line html</li>
<li>many many list items </li>
<li>repeat for each list below</li>
</ul>
<ul id="ONE_DAY" class='ui-widget-content'></ul>
<ul id="TWO_DAY" class='ui-widget-content'> </ul>
<ul id="THREE_DAY" class='ui-widget-content'> </ul>
<ul id="FOUR_DAY" class='ui-widget-content'> </ul>
<ul id="MIXED" class='ui-widget-content'> </ul>
<ul id="RESERVE" class='ui-widget-content'> </ul>
<ul id="DELETED" class='ui-widget-content'> </ul>
</div> <!-- End linecontainer div -->
<div id='sequence' title=""> </div>
<div id='loading' class='ui-widget-content'> <p>Loading...<span class="ui-progressbar-value">.</span></p></div>
И функция, которая отображает строки в зависимости от того, на какой список строк вы нажимаете, такова.
// LINE LIST CLICK EVENT
// Want user to be able to add list so made this live()
$(".list").live( 'click', function () {
// when user clicks on list, we only want to show lines in that list, hide all the others
var $listTarget = $(this);
$("#sideBar li").removeClass('ui-state-active');// remove last line highlight
$listTarget.addClass('ui-state-active');//add style to current list
//var allLines = $('li.line'); // find all lines
// decided better way is to target smaller amount of UL's to show or hide
var allLists = $('#linecontainer ul');// get all the UL's that the lines are inside
var thelistName = $listTarget.attr("id");
if(thelistName == "all_lines") {
//users wants to see all lines at once
allLists.show();
}
else {
//user wants only to see one list of lines
//build the selector that finds the ul list
//list id matches ul id but in Uppercase so both are unique
var TargetedList = '#' + thelistName.toUpperCase();
allLists.hide();
$(TargetedList).show();
}
});
Я думал, что использование идентификатора дважды, один раз в верхнем регистре и один раз в нижнем регистре, было проблемой, поэтому я попытался указать идентификатор элемента списка боковой панели как «top_picks» и связанный список контейнеров как «top_picks-list», но все еще имел тот же проблема.
Я ценю ваш вклад!
ОБНОВЛЕНИЕ Думаю, мой заголовок не совсем правильно сформулирован. У меня проблема с анимацией jquery. У меня есть большое количество элементов списка (в некоторых случаях до 300), загруженных ajax, в 8 разных списков внутри div linecontainer. Пользователь может перетащить элемент списка на боковую панель, чтобы изменить принадлежность элемента списка.
JavaScript, который я показываю здесь, определяет, какой список щелкнул пользователь, а затем скрывает все элементы списка, а затем показывает только элементы списка, которые принадлежат нужному списку.
Я подумал, что будет быстрее ориентироваться на 8 неупорядоченных списков на странице и анимировать их, чем находить все 300 элементов списка на странице и анимировать их. Опять же, Firefox быстро справляется с этим, но Chrome и Safari слишком медленные. Это должно быть связано с тем, как браузеры находят элементы DOM.
