Limpiar desperfectos de CSS y JavaScript por demora de carga

Este tip es muy sencillo realmente, pero señala como cuidar los elementos en una página web cuya CSS es asignada dinámicamente mediante JavaScript, en este caso en especifico jQuery.

Me explico, normalmente esperamos a que la DOM esté completamente cargada para comenzar a modificarla, el problema viene siendo que puede tardar un poco que esto suceda, aun cuando el código es realmente sencillo por lo que se puede notar por un instante los elementos involucrados:

Código :

$(document).ready(function(){
   $(objeto).hide();
   //
   $(document).click(function(){
      $(this).slideDown("velocidad");
   });
});

Pongo la siguiente demostración para hacer muestra del código, que aunque no idéntico al anterior hace prácticamente lo mismo. Si no lograste ver el detalle que señalo, refresca la página y notaras el "flash" en el que se logra apreciar el recuadro con texto.

Intentar solucionar el problema desde el archivo CSS no es una opción

La manera más lógica e inmediata para remediar esto seguramente seria modificar directamente el archivo CSS, añadiendo algo como objeto{display:none;} pero habrían conflictos con quienes no tienen JavaScript activado en su navegador, por lo que jamás podrían ver el contenido oculto aun dando click al botón.

Lo mejor es identificar el camino correcto, la "Mejora Progresiva"

Quizá la única solución real aquí es no recurrir al uso de CSS puro, o solamente JavaScript sino algo intermedio haciendo un poco de uso de ambas. Esto no deja de recordarme la Mejora progresiva/Progressive Enhancement. Con el siguiente código nos ahorramos el posible lió de que el usuario tenga o no JavaScript activado, así como los detalles por dejarle todo solamente a CSS:

Código :

document.write('<style type="text/css" rel="stylesheet">objeto{display:none;}</style>');
$(document).ready(function() { ... });

Quizá parezca realmente vil utilizar document.write en estos días modernos con wi-fi gratis y calentamiento global, pero funciona realmente bien. En su defecto podemos violar la ley interna y moral de jQuery y colocar este código fuera de $.ready() :

Código :

$('head').append('<style type="text/css" rel="stylesheet">objeto{display:none}</style>')

Aquí dejo un ejemplo igual a la primera demostración, pero con el código modificado solucionando así el error. Que igual, si tienes una conexión regular llegara a aparecer, pero es mucho menos probable y durara quizá la mitad de tiempo en desaparecer, pruébalo con acciones más grandes y ejemplos reales y notaras dramáticamente el cambio.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.