Tengo un panel de contracción de arranque que está cargado con una gran cantidad de datos de una llamada ajax. Cuando los datos se cargan en el panel contraer, se rellenan con ~ 2000 elementos dom, principalmente casillas de verificación y espacios. He medido el tiempo para la llamada y la creación de los elementos dom, y no parece ser un problema. Se tarda menos de un segundo en cargar y crear los elementos con jQuery.

Sin embargo, cuando hago clic para expandir el panel de contracción, hace que el sitio se retrase y el panel tarda un buen tiempo en expandirse.

¿Hay alguna solución a esto o una alternativa a los paneles de colapso bootstrap? ¿Podría expandirlo y mostrar los elementos gradualmente a medida que se desplaza?

Parece que no tengo ningún problema con los paneles de colapso que contienen menos elementos.

     <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>

Editar: parece ser el caso de que incluso con animaciones deshabilitadas, el sitio se retrasa.

1
danihodovic 1 sep. 2014 a las 01:51

2 respuestas

La mejor respuesta

Bueno, parece que estaba agregando demasiados elementos dom al panel de colapso. Lo resolví cargando perezosamente los elementos al desplazarme hacia abajo en el panel.

0
danihodovic 2 sep. 2014 a las 21:52

Deberías usar el:

$('#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'); });
0
HenryW 1 sep. 2014 a las 16:27