像jQuery的

Question

我上的Web應用程序要求其數據顯示在一本書像format.The數據的工作佈局創建的書是這樣

Menu{ 
    String menuName; 
    List<String> subMenu; 
} 

我已經使用jQuery的在顯示數據

book格式。div是動態生成的。
步驟如下：

1. created a single array with menuName and its subMenus.like completeData = [menuObj1,"submenu1","subMenu2",menuObj2,"subMenu1","subMenu2","subMenu3",...]; 
2. First fill left Container 
     For Each value in completeData 
     if it is obj then create a new Div menuDiv and display its menuName and append to container. 
check container height if it exceeds then break. 

     if it is String then create a new subMenuSpan and append it to subMenuDiv and finally append it to container. 
check container height if it exceeds then break and store the index. 

3. Now fill the right container 
     start from the storedIndex from Left Container and continue the same process. 

代碼：左側集裝箱

for(var i=index;i<completeData.length;i++){ 

    if(typeof completeData[i] == 'string'){ 
     // subMenu 
     menuSpan = $('<div id="menuSpan">').text(completeData[i]); 
     if(typeof completeData[i-1] == 'string'){ 
      menuSpan.appendTo(menuDiv); 

      // Break if container height exceeds and store the index. 
      if($('#menu-inner-left').height() >= height){ 
       menuSpan.remove(); 
       rightIndex=i; 
       break; 
      } 
     }else{ 
      menuDiv = $('<div id="menuDiv">').appendTo('#menu-inner-left'); 
      menuSpan.appendTo(menuDiv); 

      // Break if container height exceeds and store the index. 
      if($('#menu-inner-left').height() >= height){ 
       menuDiv.remove(); 
       rightIndex=i; 
       break; 
      } 
     } 
    }else{ 
     // Menu Name 
     menuNameDiv = $('<div id="menuNameDiv">').appendTo('#menu-inner-left'); 
     $('<div>').text(completeData[i].menuName).appendTo(menuNameDiv).css('float','left'); 

     // Break if container height exceeds and store the index. 
     if($('#menu-inner-left').height() >= height){ 
       menuDiv.remove(); 
       rightIndex=i; 
       break; 
     } 
    } 
    } 

代碼：右側集裝箱 開始從指數中左集裝箱儲存，然後同樣的過程

for(var i=rightIndex;i<completeData.length;i++){ 
    // Same Code of Left Container 
} 

結果的最終圖像

現在圖書視圖顯示正常但問題是： 1.需要很多時間才能顯示，因爲它會創建大量的div。

我試圖用純Javascript創建div，但仍然沒有效果。 現在我們轉向角JS以避免用jquery創建div，它會影響加載時間。

什麼可能是其他方式來避免創建大量的div和減少加載時間。

Answer 1

這不是解決方案只是一種方法來實現您的碎石捕獲。 而不是一次加載所有的數據嘗試從源獲取後，將數據存儲在緩存中，在每個下一頁/上一頁單擊編寫一個回調，將只獲取當前頁面數據，以便您可以減少渲染時間。或者你可以使用一些插件，如@adeno指定
Turn.js.

Menu{ 
    data:[ 
     String menuName; 
     List<String> subMenu; 
     ] 
    pagingObject:{ 
    pageNumber<int>, 
    currentPage<int>, 
    pageSize<int> 

    } 
}