2011-07-28 13 views
6

Actualmente estoy usando las funciones ocultar/mostrar en jQuery para ayudar a filtrar una tabla en grupos desde un cuadro de selección.ocultar/mostrar son * muy * lentos

El código real funciona bien, pero es increíblemente lento, algunas veces tarda uno o dos minutos en ejecutarse.

Cambié el código así que en vez de ocultar() y show() se utiliza css({'display':'none'}); y css({'display':'block'}); - la diferencia de velocidad es simplemente increíble, ahora se tarda sólo unos segundos, pero en Firefox los datos de tabla es todo lo aplastó para cada fila .

Este no es el fin del mundo, ya que aquí utilizamos Internet Explorer casi exclusivamente, pero todavía me preguntaba si hay una forma de evitarlo ya que mucha gente (yo incluido) usa Firefox.

Respuesta

4

En firefox para mostrar/ocultar una fila de la tabla, debe configurar la siguiente.

//To show 
$("tr").css("display", "table-row"); 

//To hide 
$("tr").css("display", "none"); 
+0

esta es la forma en que debe hacerlo para IE, así como un tr debe ser un tipo de pantalla de 'tabla-fila' en lugar de un elemento de bloque – scrappedcola

+1

En realidad, siempre es mejor usar jquery show/hide porque se ocupa de todos estas condiciones. – ShankarSangoli

+0

Muchas gracias, ¡esto es realmente perfecto! Usando Firebug antes, descubrí que había valores de celda de tabla que probé (y por supuesto que no funcionó) ¡pero esto es perfecto! Desafortunadamente, realmente no puedo usar show/hide: lleva tiempo procesar http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance –

1

La API de jQuery especifica que se puede establecer una duración para las funciones .show y .hide. Sospecho que cuando establezcas esto, puede que solucione tu problema.

Ver the docs for .show().

Ver the docs for .hide().

+0

Muchas gracias, lo tenía configurado en (0) antes, así que no era la animación el problema, era solo la cantidad de procesamiento que lo mató - http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance –

+0

@xn dx Al establecer la velocidad en 0, se está forzando a jQuery a usar animate para cambiar el valor, eso lo ralentizará, solo déjelo en blanco. Además, show/hide not oly cambie el css pero guarda en caché el valor anterior para poder restaurarlo a su visibilidad adecuada. – Andrew

+0

¡Ah! Nunca supe configurar la velocidad a 0 todavía desencadenaría la animación, muchas gracias :) –

1

La respuesta que menciona la duración de show() y hide() es buena. Sin embargo, si tiene demasiadas filas, la diferencia entre show() y display: block o display: table-row es que show() ejecuta una animación para cada fila. Esto definitivamente puede ser lento, especialmente en tablas más grandes.

Si realmente está tratando de exprimir el rendimiento, intente buscar el código fuente de jqGrid o SlickGrid. El último tiene una función de filtrado increíblemente rápida que definitivamente funcionaría. Si eso es demasiado complicado para usted, simplemente vaya con display: block o display: table-row y display: none. Incluso puedes crear tu propio plugin jQuery que muestre Fast y hide Fast para que no tengas que repetir ese código.

+0

Este es un gran consejo, ¡gracias! Solo estoy mirando SlickGrid ahora, se ve realmente bien :) –

Cuestiones relacionadas