L’interface utilisateur de Jquery a l’air moche avant document.ready

Si vous examinez la documentation de l’interface utilisateur de jQuery, prenons des tabs, par exemple . Si vous examinez l’onglet Theming , vous pouvez voir les classes à appliquer pour éviter l’éclat de contenu sans style:

 
 
Nunc tincidunt
 
Proin dolor
 
 
Tab one content goes here.
 
 ...  

Remarque: ce n’est pas la meilleure pratique, mais si vous souhaitez éviter d’afficher le contenu, c’est une option, en voici une autre:

Vous pouvez masquer les éléments via CSS, atsortingbuer une classe à ces éléments

enveloppants, par exemple .startsUgly qui, dans votre feuille de style, a:

 .startsUgly { display: none; } 

…. et affichez-les en JavaScript, par exemple $(".startsUgly").show();

Ensuite, pour gérer ces utilisateurs désactivés par JavaScript, magie :

Ainsi, ceux avec JavaScript désactivé simple ne comprennent pas l’ display: none effet, ils verront toujours le contenu.

Tout d’abord, les classes de l’interface utilisateur jQuery dans la documentation ne s’appliquent qu’après document.ready. Vous pouvez les styler à votre guise, mais vous ne vous débarrasserez pas de l’éclat d’un contenu non-stylé. Les classes sont utiles pour thématiser l’interface utilisateur et non pour modifier l’apparence avant que l’interface utilisateur soit en place.

Deuxièmement, la balise noscript doit fondamentalement être évitée, pour une multitude de raisons: 1) Elle ne vous dit pas vraiment si le javascript est activé ou non. Par exemple, il pourrait être activé dans le navigateur mais bloqué par un pare-feu. 2) C’est une balise de niveau bloc, donc il n’y a que certains endroits où elle peut valablement apparaître. Ce n’est pas une solution polyvalente. 3) La balise ne fait pas la différence entre les degrés d’implémentation de javascript sur différents systèmes.

Vous étiez plus proche de la meilleure pratique dans votre message d’origine. L’astuce consiste à faire à la fois le masquage et l’affichage en javascript. Commencez par donner un style à votre page afin qu’elle ait l’air acceptable, javascript étant désactivé. Ensuite, pour empêcher le flash de contenu non-stylé, cachez les éléments laids en javascript avant document.ready (c’est la partie critique) en assignant une classe à l’élément html:

 jQuery('html').addClass('blahblah'); 

Parce que l’élément html existe déjà, il est valide de le manipuler avant document.ready. Ensuite, comme Nick le dit, placez les éléments incriminés dans une div avec la classe “startsugly”, puis insérez dans votre css une ligne qui masque les éléments incriminés:

 .blahblah .startsugly {display: none;} 

Le point ici est que l’affichage: aucun n’entre en jeu lorsque javascript est activé. Les utilisateurs désactivés pourront toujours accéder à votre contenu. Ensuite, après document.ready, insérez dans votre fonction “pimping” de votre interface utilisateur jQuery et affichez à nouveau l’élément incriminé:

 $(".startsUgly").show(); 

bien que si le contenu n’est visible que de manière conditionnelle dans un accordéon ou une structure d’tabs, cette dernière étape peut même être inutile.

 $('[class*=" ui-"]').remove(); 

En me basant sur la deuxième suggestion de Nick Craver – je n’ai aucune intention de lui voler sa réponse, mais en ajoutant une autre option – vous pouvez tirer parti de la beauté de Modernizr. Modernizr appenda une simple classe js à l’élément html si JavaScript est activé. Donc ce que vous pouvez faire est d’append un style simple à votre feuille de style principale comme celle qui suit, qui ne cachera le corps que si JavaScript est activé (car nous devons utiliser JavaScript ultérieurement pour afficher le corps):

 main.js body { display: block; } 

Et puis, ayez une simple ligne de JavaScript comme celle-ci dans votre “page maître”:

C’est une bonne solution si vous utilisez déjà Modernizr pour autre chose. Sinon, si vous n’avez pas d’autre utilisation de Modernizr, j’irais de pair avec la suggestion de Nick Craver.