0

仕事のスケジュールを選択するのに役立つWebアプリケーションがあります。基本的に私は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();
    }
});

IDを大文字と小文字の2回使用するのが問題だと思ったので、サイドバーリストのアイテムIDを「top_picks」、関連するコンテナリストを「top_picks-list」にしてみましたが、それでも同じです。問題。

ご意見ありがとうございます！

更新 私のタイトルは実際には正しく表現されていないと思います。jqueryアニメーションの問題があります。linecontainer div内の8つの異なるリストに、ajaxによって多数のリストアイテム（場合によっては最大300）がロードされています。ユーザーは、リストアイテムをサイドバーにドラッグアンドドロップして、リストアイテムが属するものを変更できます。

ここに示すJavaScriptハンドルは、ユーザーがクリックしたリストを決定し、すべてのリストアイテムを非表示にして、目的のリストに属するリストアイテムのみを表示します。

ページ上の300のリスト項目すべてを見つけてアニメーション化するよりも、ページ上の8つの順序付けられていないリストをターゲットにしてそれらをアニメーション化する方が速いと思いました。繰り返しますが、Firefoxはこれを実行するのに高速ですが、クロム、サファリは遅すぎます。これは、ブラウザがDOM要素を見つける方法と関係があるはずです。

4

1 に答える 1

0

別の質問で、問題をはるかに単純な例に減らすことができました。Chromeにバグがあるようです。ここに他の質問へのリンクがあります。

于 2011-01-30T17:23:46.463 に答える