Voici une solution à l'aide de jQuery:
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
J'ai mis ce script juste après mon </body>
balise. Il suffit de remplacer "#container" avec un sélecteur pour les DOM ou les élément(s) que vous souhaitez masquer. J'ai essayé plusieurs variantes de ce (y compris .hide()
/.show()
, et .fadeOut()
/.fadeIn()
), et la seule définition de l'opacité semble avoir le moins d'effets néfastes (scintillement, la modification de la hauteur de la page, etc.). Vous pouvez également remplacer css('opacity', 0)
avec fadeTo(100, 1)
pour une transition plus en douceur. (Non, fadeIn()
ne fonctionne pas, du moins pas sous jQuery 1.3.2.)
Maintenant, les mises en garde: j'ai mis en œuvre la-dessus car je suis en utilisant TypeKit et il est gênant de scintillement lorsque vous actualisez la page et les polices de prendre quelques centaines de millisecondes à charger. Donc je ne veux pas n'importe quel texte à afficher à l'écran jusqu'à ce que TypeKit a chargé. Mais de toute évidence, vous êtes en grande difficulté si vous utilisez le code ci-dessus et quelque chose sur votre page ne se charge pas. Il y a deux façons évidentes qu'il pourrait être amélioré:
- Un maximum de limite de temps (disons 1 seconde) après lequel tout semble si la page est chargée ou pas
- Une sorte d'indicateur de chargement (dire, quelque chose de http://www.ajaxload.info/)
Je ne vais pas la peine de la mise en œuvre de l'indicateur de chargement ici, mais le délai est facile. Il suffit d'ajouter ce pour le script ci-dessus:
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
Alors maintenant, le scénario du pire, votre page sera de prendre un supplément de seconde à apparaître.