Si manejas cientos o miles de elementos y necesitas mostrar u ocultarlos con jQuery, probablemente habrás experimentado una bajada en el rendimiento. Vamos a ver cómo acelerar hide() o show() en jQuery.

Vuelve a pensarlo

Comproba de nuevo cómo lo estás haciendo.

Me refiero a si estas seleccionando cada elemento individualmente, algo así:

$('#element1').show();
$('#element2').show();
$('#element3').show();
$('#element4').hide();
...

Por favor, no uses show() ni hide() en un bucle.

Si lo estás haciendo así, para. Tienes que cambiarlo.

Considera dividir los elementos con 2 clases y después aplicarles la función una sola vez. Por ejemplo:

$('.will-show').show();
$('.will-hide').hide();

Cómo acelerar hide() o show() en jQuery

Si tu código aún experimenta mal rendimiento, aquí tienes una lista de diferentes modos, los más rápido primero:

CSS puro en Javascript

items[i].style.display = hideCondition ? 'none' : 'block';

CSS con jQuery

$('#element1').css('display', '');
$('#element4').css('display', 'none')

Usar .show() and .hide()

Es lo que estabas usando, así que sigue leyendo!

No uses .toggle()

Es el más lento porque jQuery debe comprobar si el elemento es visible o no.

🙋‍♂️ Deja un comentario con tus dudas o experiencias