Во-первых, побочный момент: в целом, веб-дизайнеры тратят много времени, пытаясь улучшить воспринимаемое время загрузки страницы, показывая вещи как можно быстрее. Это активно идет другим путем, представляя пустую страницу, пока все не будет готово, что может быть не идеально.
Но если это подходит для вашей ситуации:
Поскольку все видимое будет потомком body, вы можете загрузить body скрытый, а затем добавить его. Было бы важно включить запасной вариант для пользователей без JavaScript (обычно менее 2%, по крайней мере * 1007). * согласно Yahoo , но все же). Итак, в соответствии с:
(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>
Пара вариантов сценария, в зависимости от того, когда вы хотите, чтобы появление происходило:
Ожидание "готового" события:
Live Copy
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
Ожидание события window#load:
Live Copy
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load запускает очень поздно в процессе загрузки страницы после загрузки всех внешних ресурсов (включая все изображения). Но вы сказали, что хотите подождать, пока все не загрузится, так что это может быть то, что вы хотите сделать. Это определенно заставит вашу страницу выглядеть медленнее ...