javascript - 在 jquery 中创建类似书籍的布局

Question

我正在开发一个网络应用程序，它要求其数据以类似书籍的格式显示。数据是这样的

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

我使用jquery以书籍格式显示数据。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
}

结果的最终图像

现在图书 View 已正确显示，但问题是: 1. 由于创建了大量 div，因此需要花费大量时间来显示。

我尝试用纯 JavaScript 创建 div，但仍然没有效果。 现在我们正在转向 Angular JS，以避免使用 jquery 创建 div。这会影响加载时间吗？

还有什么其他方法可以避免创建大量 div 并减少加载时间。

Answer 1

这不是解决方案，只是根据屏幕捕获实现的一种方法。 不要立即加载所有数据，而是尝试在从源获取数据后将数据存储在缓存中，而是在每个下一页/上一页上单击编写一个回调，该回调将仅获取当前页面数据，以便可以减少渲染时间。或者您可以使用一些插件来实现这种目的，例如 @aeno 指定的
Turn.js。

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

  }
}