Amélioration progressive, comportement lorsque les pages ne sont pas encore complètement chargées

Question

Je développe des sites en utilisant l'amélioration progressive implémentée complètement dans jQuery. Par exemple, j'ajoute dynamiquement des gestionnaires d'événements onclick pour ancrer des tags afin de lire des fichiers MP3 liés "en ligne" en utilisant SoundManager et de faire apparaître des lecteurs Youtube pour des liens Youtube, via $ (document) .ready (function()). Toutefois, si l'utilisateur clique dessus alors que la page est en cours de chargement, ils obtiennent toujours la version non améliorée. J'ai pensé à cacher les choses pertinentes (via display: none, ou quelque chose comme ça) et les montrer quand elles sont chargées, ou mettre une boîte de dialogue "loading" modale, mais les deux sonnent comme des hacks.

De meilleures idées? Je sens qu'il me manque quelque chose de complètement évident ici.

Cordialement,

Alex

Answer 1

Je n'ai pas testé cela, mais vous pouvez essayer live. La pensée est que vous pourriez mettre vos gestionnaires de clic en dehors de document.ready afin qu'ils soient exécutés tout de suite. Comme live utilise event delegation pour atteindre ses fonctionnalités, vous n'avez pas vraiment besoin d'attendre que le DOM soit prêt, et tous les clics effectués pendant le chargement de la page doivent toujours être capturés par le gestionnaire d'événements.

Si cela ne fonctionne pas, vous pouvez essayer de placer les balises de script Javascript directement sous tout ce dont ils ont besoin pour lier. Ce n'est pas joli, mais cela éliminera à peu près le problème.

Answer 2

Supposons que vous ayez utilisé un bon jugement et les gens sont en baisse pour la version non améliorée simplement parce que le délai est trop long alors j'utiliser CSS pour désactiver les contrôles. Le CSS va charger presque immédiatement. Ensuite, en utilisant Javascript, je basculerais le CSS pour que les contrôles soient réactivés.

Cependant, ma première réaction est que si l'utilisateur peut cliquer dessus pendant le chargement de la page, alors votre page ou votre connexion est trop lente. Cependant, si cela est rarement le cas (moins de 1% du temps), vous pouvez ignorer le moment où l'utilisateur peut atteindre son objectif, c'est-à-dire écouter sa musique. Je dis cela parce qu'une fois que les utilisateurs se rendent compte qu'une meilleure expérience attend une demi-seconde plus tard, il attendra généralement que Javascript apparaisse, puis cliquera.

Answer 3

Je prends la position opposée d'aleemb concernant l'utilisation de CSS. Si vous utilisez css pour désactiver les contrôles, toute personne dont javascript est désactivé ou utilise un logiciel d'accessibilité ne pourra pas utiliser ces contrôles sans désactiver complètement sa feuille de style.

Vous pouvez utiliser un très petit javascript en ligne juste avant la balise de fermeture du corps pour masquer les éléments via js très rapidement. S'il est en ligne et n'a pas besoin de charger des ressources externes, il sera très rapide, généralement plus rapide qu'un utilisateur peut cliquer.

Cependant, je ne d'accord avec aleemb que si vos utilisateurs sont en mesure de traiter mentalement la page et la rendre au contrôle qu'ils veulent cliquer avant js est chargé, il y a probablement un problème plus profond de la façon dont votre page est en cours de chargement. Rechercher des moyens de réduire le temps de chargement: compresser les fichiers image, gzipping html/css/js, réduire votre javascript, combiner les images en sprites, etc

Answer 4

Je suggérerais de suivre Paolo Bergantino's advise - la délégation d'événement est la voie à suivre pour éviter complètement le problème.

J'ai eu un problème similaire où la délégation d'événements ne pouvait pas faire le travail - vous pouvez read about that here.