En primer lugar, un punto de vista: en general, los diseñadores web pasan mucho tiempo tratando de mejorar el tiempo percibido de carga de la página, logrando que se muestren lo más rápido posible. Esto va de la otra manera, presentando una página en blanco hasta que todo esté listo, lo que puede no ser ideal.
Pero si es apropiado para su situación:.
Ya que todo lo visible será un descendiente de body, que puede mostrarse body ocultos y luego se desvanecen en Sería importante incluir una reserva para los usuarios sin JavaScript (típicamente menos del 2% al menos according to Yahoo, pero aún así). Así que a lo largo de las líneas de:
(Live Copy)
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
inline here just for purposes of the example
-->
<style type="text/css">
body {
/* Hide it for nifty fade-in effect */
display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
/* Re-displays it by overriding the above */
display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {
$(document.body).fadeIn(1000);
})(jQuery);
</script>
</body>
</html>
Un par de variaciones por parte de la escritura de que, dependiendo de si desea que el fundido de entrada que se produzca:
Esperar "listo" evento:
Live Copy
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
Wa que para el caso window#load:
Live Copy
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load incendios muy tarde en el proceso de carga de la página, después de que todos los recursos externos (incluyendo todas las imágenes) se han cargado. Pero dijiste que querías esperar hasta que todo estuviera cargado, así que eso podría ser lo que quieres hacer. Definitivamente hará que su página parezca más lenta ...
¿Existe una alternativa para esto en caso de que alguien no tenga Javascript habilitado? – optimus203