In primo luogo, un punto laterale: in generale, i web designer impiegano molto tempo a cercare di migliorare il tempo di caricamento della pagina percepito, facendo in modo che le cose vengano visualizzate il più rapidamente possibile. Questo va attivamente nella direzione opposta, presentando una pagina vuota finché tutto è pronto, il che potrebbe non essere l'ideale.
Ma se è appropriato per la situazione:.
Dal momento che tutto visibile sarà un discendente di body, si potrebbe caricare body nascosti e poi sfumare in Sarebbe importante includere un ripiego per gli utenti senza JavaScript (tipicamente meno del 2% almeno according to Yahoo, ma ancora). Quindi, seguendo le linee di:
(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 paio di variazioni da parte sceneggiatura di che, a seconda di quando si desidera che il fade-in a verificarsi:
Attendere "pronto" evento:
Live Copy
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
Wa per l'evento window#load:
Live Copy
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load incendi molto tardi nel processo di caricamento della pagina, dopo che tutte le risorse esterne (comprese tutte le immagini) hanno caricato. Ma hai detto che volevi aspettare che tutto fosse caricato, quindi potrebbe essere quello che vuoi fare. Sicuramente farà sembrare la tua pagina più lenta ...
fonte
2011-11-10 07:57:47
C'è un ripiego per questo nel caso in cui qualcuno non abbia Javascript abilitato? – optimus203