Question

我有一个bootstrap折叠面板，它从ajax调用中加载了大量数据。当在崩溃面板中加载数据时，填充了~2000 dom元素，主要是复选框和跨度。我已经测量了调用的时间和dom元素的创建，这似乎不是问题。使用jQuery加载和创建元素只需不到一秒钟。

但是，当我点击展开拼图面板时，会导致网站滞后，面板展开需要一段时间。

有没有解决方案，或者是自举折叠面板的替代方案？您可以展开它并在滚动时逐步显示元素吗？

对于包含较少元素的折叠面板，我似乎没有任何问题。

     <div id="collapse_function" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="panel-group" id="inner_accordion">

        <!-- Checkboxes and spans are loaded here dynamically -->

        </div>

      </div>

编辑：似乎即使使用禁用的动画，网站也会停滞。

Answer 1

你应该使用：

$('#collapse_function').on('show.bs.collapse', function() { alert('we Go SHOW'); });
$('#collapse_function').on('hide.bs.collapse', function() { alert('we Go Hide'); });
$('#collapse_function').on('shown.bs.collapse', function() { alert('we ARE SHOWN'); });
$('#collapse_function').on('hidden.bs.collapse', function() { alert('we ARE HIDDEN'); });

Answer 2

好吧，似乎我在崩溃面板上添加了太多的dom元素。我在面板中向下滚动时懒洋洋地加载元素解决了这个问题。

Bootstrap崩溃无法处理太多元素

2 个答案: