11521 sujets

JavaScript, DOM et API Web HTML5

Histoire de chargement

Bonsoir,

Depuis quelques jours je lis pas mal d'article sur le chargement de scripts et fichiers javascript. Par exemple, où insérer les baslises javascript? Dans le <head> ou juste avant </body> ?

Le problème est que, quelque soit la technique utilisée, celui ci persiste Smiley ohwell

Je vous explique le problème:

J'ai un script, issue de jquery ui, qui me permet de personnaliser les selectbox, checkbox et bouton radio.

Lorsque la page est en chargement, les selectbox et autre éléments personnalisés s'affichent dans leur style par défaut. Ce n'est qu'une fois la page entièrement chargée que ces éléments sont modifiés par le code javascript.

Voilà, au niveau esthétique, c'est pas top, et je voulais savoir s'il y avait une solution pour résoudre ce problème.

Merci !!
Fred ( statut => Smiley biggol )
Une petite recherche sur FOUC (Flash of Unstyled Content) devrait répondre à ta question.
En général, on cache l'élément au chargement, puis on l'affiche une fois que le javascript a fait son travail.
salut,

merci pour ta réponse.
Je suis allé lire l'article, mais je ne comprend pas trop comment résoudre le problème (anglais très faible). J'ai tenté de trouvé un autre article en français mais je n'ai rien trouvé.

Connais tu un article en français? Ou connais tu la solution?

merci !!
Libratoi a écrit :
En général, on cache l'élément au chargement, puis on l'affiche une fois que le javascript a fait son travail.
Et du coup, si JS n'est pas activé l'utilisateur n'a pas accès à l'élément...

Pour ce genre de problème, le mieux est de ne rien faire, ce n'est pas si gênant que ça.

Pour ce qui est de la question concernant où placer les fichiers JS : en règles générale, il est préférable de les placer juste avant </body> afin de ne pas ralentir le chargement du contenu. Les scripts permettant leur chargement en simultané avec le code HTML peuvent être placés dans le head.
Je ne comprend toujours pas l'utilité de désactiver javascript dans son navigateur Smiley confuse

merci pour vos réactions
Bonjour,

Je conseille de travailler sur les performances navigateur de tes pages: réduction du nombre de requêtes HTTP, du poids des fichiers, JavaScript non bloquant, etc. Il faut aussi voir si tu ne peux pas avancer l'exécution de ton script.

Une mise en garde: gérer ce genre de chose efficacement demande pas mal de boulot et d'expertise. Mais ça peut être l'occasion d'apprendre, à la rigueur.

Libratoi a écrit :
Il existe des techniques pour pour ne cacher l'élément uniquement si besoin (si js activé)

Encore faut-il le faire correctement, ce qui n'est <euphémisme>pas toujours le cas</euphémisme>.
Mais oui sur le principe.
Tu penses à un ajout de classe via JavaScript sur <html> ou <body>, par exemple?
Modifié par Florent V. (09 Nov 2010 - 11:25)
Florent V. a écrit :

Encore faut-il le faire correctement, ce qui n'est &lt;euphémisme&gt;pas toujours le cas&lt;/euphémisme&gt;.
Mais oui sur le principe.
Tu penses à un ajout de classe via JavaScript sur &lt;html&gt; ou &lt;body&gt;, par exemple?


Bonjour,

Oui (dans le head) :
<script type="text/javascript">document.documentElement.className = 'js';</script>
Je dirais même plus :
document.documentElement.className+=" js"

Ce qui permet d'avoir plusieurs classes sur le html si nécessaire.

Et pour ceux qui n'auraient pas suivi, cela permet de cibler des éléments CSS en ajoutant .js au début de la règle, pour ne les cibler que quand Javascript est activé (par exemple comme indiqué pour masquer les selects par défaut, puis les réafficher/styler avec jQuery UI)
Pour faire mon emmerdeur:

<script type="text/javascript">
	document.documentElement.className ="hasJS " + document.documentElement.className;
</script>


Certains vieux navigateurs n'aiment pas l'espace en début d'attribut. Smiley cligne
Patidou a écrit :
Certains vieux navigateurs n'aiment pas l'espace en début d'attribut. Smiley cligne

Lesquels, et est-ce qu'on ne s'en fiche pas un peu?
Parce que Netscape 4 et IEMac 5, hum, comment dire... Smiley lol

(À emmerdeur, emmerdeur et demi.)
Modifié par Florent V. (11 Nov 2010 - 01:34)
Sujet clos
Aller à