Le résultat que l’on cherche à obtenir est le suivant : la page se charge et une fois le rendu terminé, le JavaScript va provoquer l’apparition d’un contenu jusque là caché — à l’image du menu noir sur blog.
L’approche via JavaScript
Puisque l’on fait apparaître le contenu via JavaScript, il semble logique de le cacher de la même façon. Avec Mootools par exemple, cela reviendrait à écrire les lignes suivantes.
var element = $('id-de-notre-element'); element.addClass('hidden'); // On cache d’emblée window.addEvent('load', function() { element.removeClass('hidden'); // On révèle onload });
Cependant, cette approche ne fonctionne pas, car pour peu que le fichier JS de notre site soit quelque peu conséquent — à cause de l’usage d’une bibliothèque JS par exemple, son téléchargement et son exécution ne seront pas instantanés. Cela signifie que notre élément sera visible pour le visiteur à partir du moment où le CSS est interprété, jusqu’au moment où le JS est chargé et interprété à son tour.
Dans les faits, on peut assister à un clignotement par exemple. C’est un comportement que nous voulons à tout prix éviter, aussi nous orientons-nous vers une solution alternative.
L’approche via CSS
Puisque le JS intervient trop tard, une idée pourrait être d’attacher à notre élément un simple display:none directement dans le fichier CSS. Le problème de cette approche, c’est qu’elle est dépendante du JavaScript pour rétablir la présence de l’élément : si le JavaScript n’est pas activé, l’élément restera caché.
Notre objectif est de travailler systématiquement avec du JavaScript non-obstructif1, c’est à dire du JavaScript qui apporte un confort supplémentaire, une expérience de meilleur qualité au visiteur, sans pour autant être indispensable au fonctionnement classique du site.
Quelle solution ?
Il existe plusieurs solutions qui fonctionnent bel et bien2, mais de mon point de vue, elles relèvent toutes plus où moins du bricolage3. Ainsi, je vais vous exposer la technique que j’ai décidé d’employer sur ce même blog, mais si vous pensez connaître une solution plus propre, je vous invite à m’en faire part via le formulaire en bas de page.
La technique mise en place ici consiste à placer du JavaScript en ligne, très tôt dans le document. Ce JavaScript va injecter une feuille de style interne dans la page, et celle-ci va contenir notre display:none. L’idée, c’est que ces quelques lignes à même l’HTML vont être interprétées très vite, avant le début du rendu de la page. L’élément est donc caché du début à la fin pour le visiteur disposant de JS, et affiché pour celui qui n’en dispose pas.
Le code suivant sera inséré dans la section <head> du document.
<script type="text/javascript" charset="utf-8"> //<![CDATA[ document.write( '<style type="text/css"> #id-de-notre-element { display:none; } </style>' ); //]]> </script>
Vous pouvez trouver une explication sur les caractères étranges qui entoure le document.write sur la page d’OpenWeb consacrée à ECMAScript et (X)HTML. Quand au code JavaScript lui-même, il me semble assez parlant de lui même.
Conclusions
Il n’existe pas à ma connaissance de solution standard pour cacher un élément jusqu’au chargement de la page, sans en compromettre l’accessibilité. J’espère que ma solution vous permettra d’y palier. N’hésitez pas à me contacter pour poser vos questions, ou m’entretenir sur une autre méthode.
Message express à l’auteur