Ocultar el contenido de una página hasta que esté completamente cargada
Para ocultar el contenido de una página hasta que esté completamente cargada, puedes usar una combinación de CSS y JavaScript. Primero, oculta todo el contenido con CSS usando la propiedad display: none. Luego, dentro de la función $(document).ready() de jQuery, usa JavaScript para eliminar la propiedad display: none y mostrar el contenido.
Aquí tienes un ejemplo de cómo implementar esta técnica:
1. CSS:
- Define un estilo CSS que oculte todos los elementos del cuerpo de la página.
Code
body {
display: none;
}2. HTML:
- Asegúrate de que el script de jQuery se cargue antes de cualquier otro script que dependa de él.
Code
<!DOCTYPE html>
<html>
<head>
<title>Ocultar contenido hasta carga</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Elimina el estilo que oculta el contenido
$('body').css('display', 'block');
});
</script>
</head>
<body>
<h1>Contenido de la página</h1>
<p>Este contenido se mostrará después de que la página se haya cargado.</p>
</body>
</html>En este ejemplo, el contenido de la página está oculto inicialmente gracias al CSS. Una vez que el documento esté listo, el script jQuery elimina la propiedad display: none, mostrando el contenido de forma gradual. Esto evita que los usuarios vean el contenido a medio cargar mientras la página se está construyendo.
