2009-09-04 5 views
1

je me demandais si je pouvais faire ce qui suit:éléments de page chargés avant le script

charger une page html et définir la couleur backgroung de l'élément de corps dynamique avec javascript, dans ce cas avec un script jquery. Si les éléments de la page sont chargés avant l'exécution de js, la couleur du corps sera blanche pendant une seconde, puis elle changera de couleur. Si le js serait chargé avant le rendu du html alors nous n'aurions pas encore un corps pour appliquer les changements à droite? Ou ai-je tort? Pourriez-vous s'il vous plaît me donner un conseil quelle est la meilleure solution pour cela? Merci beaucoup

salutations

Répondre

1

Vous pouvez lier un événement à déclenché lorsque l'arbre DOM est prêt, qui sera généralement avant que la page est affichée.

http://docs.jquery.com/Events/ready

Je l'utiliser pour javascript discret pour commencer à changer la page le plus tôt possible, afin que l'utilisateur ne voit pas de changement en raison du javascript. Edit: Il existe une autre solution qui n'est pas idéale mais qui peut fonctionner. Avoir le div principal être caché, donc rien ne s'affiche, jusqu'à ce que l'arborescence DOM est terminée, et le javascript modifie la div principale pour être visible.

L'autre option est de mettre le javascript à la fin du html, et de lui donner immédiatement la couleur, mais c'est vraiment une solution de timing.

+0

désolé, mais vous avez tort: ​​dans la plupart des cas, le navigateur commencera à rendre la page * avant que * 'DOMContentLoaded' (ou hacks équivalents) ne se déclenche; vous pouvez même retarder l'événement d'une durée arbitraire en utilisant des transferts segmentés (exemple PHP: ajouter 'flush(); sleep (42);' avant la fermeture '') – Christoph

+0

C'est ce que j'ai fait, mais cela signifie que le le corps a déjà été chargé ce qui donne ce fond blanc pour une seconde :( –

+0

Je suis habitué à avoir des tables ou des images, quelque chose qui ralentit le rendu, donc je n'ai pas eu une situation où la page est rendue avant que l'arbre DOM soit fini. –

1

Dans la plupart des cas, l'utilisation de DOMContentLoaded (ou des hacks équivalents) est suffisante. C'est problématique si l'analyse du code HTML est retardée (par exemple en raison de calculs sur le serveur ou le client ou d'une connexion lente) ou - comme dans votre cas - d'effets visuels non désirés; J'ai écrit à propos de ce problème en ce qui concerne les transferts en morceaux some time ago.

Vous devez connaître le décalage le plus court en ajoutant script éléments au body directement après les éléments concernés (voir this question pour savoir quand cela est problématique).

Votre exemple de changer la couleur de la body ressemblerait à ceci:

<body> 
<script type="text/javascript"> 
document.body.style.background = 'green'; 
</script> 
0

La balise <body> peut ne pas être le premier arrière-plan rendu. L'élément <html> lui-même peut également avoir une couleur d'arrière-plan et est généralement visible lorsque le corps ne couvre pas entièrement la fenêtre. Par conséquent, si vous placez un script dans l'en-tête où la balise body n'a pas encore été analysée, vous pouvez simplement styler document.documentElement à la place jusqu'à ce que l'élément body ait été créé par l'analyseur HTML.

Questions connexes