Saltar al contenido

¿Cómo ocultar elementos con jQuery antes de que se rendericen?

Presta atención porque en este escrito vas a hallar el arreglo que buscas.

Solución:

@Andrés,

Sé que la respuesta ya ha sido aceptada, pero usando display: none; será una pesadilla para los usuarios sin Javascript.

Usando Javascript en línea, puede ocultar un elemento sin que parpadee. Los usuarios sin Javascript aún podrán verlo.

Considere algunos divs que deben ocultarse cuando se carga la página.


    


    
... some content ...
... some content ...

El Javascript en línea se ejecutará tan pronto como se represente el elemento, ocultándolo así del usuario.

Estoy de acuerdo con Boris Guéry en que no es un exceso de ingeniería, sino una mejor práctica estándar. Iría de una manera ligeramente diferente a la de Boris, agregando una clase no-js al html inicialmente y luego eliminándola con JavaScript.

De esta forma, no está esperando a que el documento esté listo para ocultar el contenido y, sin JavaScript, seguirá viendo el contenido. Asumir que el usuario no tiene JavaScript está más en línea con la filosofía de mejora progresiva.

ex:



mi CSS:

#foo 
    display: none;

html.no-js #foo 
    display: block;

y javascript

$(document).ready(
   function()
   
     $('html').removeClass('no-js');
   
);

********* O según el caso***********

ex:

foobar and stuff

CSS:

.no-js 
  display:none;

#foo 
  display: block;

#foo.no-js 
  display: none;

js:

$(document).ready(function()
  // remove the class from any element that has it.
  $('.no-js').removeClass('no-js');
);

Por lo general, configuro una clase .js en mi elemento para establecer la propiedad adecuada cuando JavaScript está habilitado.

Luego puedo configurar el CSS dependiendo de si javascript está presente o no.

ex:



mi CSS:

html.js #foo

    display: none;

y javascript

$(document).ready(
   function()
   
     $(html).addClass('js');
   
);

valoraciones y comentarios

Tienes la opción de añadir valor a nuestra información tributando tu experiencia en las reseñas.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *