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

Question

Je développe des sites utilisant l'amélioration progressive mis en œuvre complètement jQuery.

Par exemple, je suis l'ajout de gestionnaires d'événements onclick dynamiquement pour ancrer les balises pour jouer les fichiers liés MP3 « en ligne » à l'aide SoundManager et surgissant joueurs Youtube pour les liens Youtube, par .ready $ (document) (function ()).

Cependant, si l'utilisateur clique sur eux pendant le 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 le montrer lors du chargement, ou de mettre une boîte de dialogue modale « chargement », mais les deux sons comme hacks

Les meilleures idées? Je sens que je manque ici quelque chose de complètement évident.

Cordialement,

Alex

Answer 1

Je ne l'ai pas testé, mais vous pouvez essayer live . L'idée est que vous pouvez mettre vos gestionnaires de clic en dehors de document.ready ils sont exécutées immédiatement. Depuis live utilise délégation de l'événement pour atteindre ses fonctionnalités, vous ne avez pas vraiment besoin d'attendre le DOM pour être prêt, et tous les clics effectués pendant le chargement doit être capturé encore par le gestionnaire d'événements.

Si cela ne fonctionne pas, vous pouvez essayer de mettre les balises de script Javascript directement sous tout ce qu'ils ont besoin de se lier. Ce n'est pas assez, mais il sera à peu éliminer beaucoup le problème.

Answer 2

En supposant que vous avez 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 commandes . Le CSS chargera presque tout de suite. Ensuite, en utilisant Javascript je le CSS basculer si les commandes sont réactivées.

Cependant, ma première réaction est que si l'utilisateur peut cliquer dessus pendant le chargement, votre page ou connexion est trop lente. Toutefois, si cela est rarement le cas - moins de 1% du temps - alors vous pouvez hausser les épaules tant que l'utilisateur peut atteindre son objectif, qui est d'écouter sa musique. Je dis cela parce qu'une fois que les utilisateurs se rend compte qu'une meilleure expérience attend une demi-seconde plus tard, il sera généralement attendre Javascript pour rendre puis cliquez sur.

Answer 3

Je prends la position opposée à aleemb en ce qui concerne l'utilisation de CSS. Si vous utilisez pour désactiver css les commandes, puis tous ceux qui a désactivé javascript ou utilise un logiciel d'accessibilité ne pourra pas utiliser ces contrôles sans désactiver entièrement votre feuille de style.

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

Cependant, I faire 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 votre js est chargé, il y a probablement un problème plus profond avec la façon dont votre page est en cours de téléchargement. Examiner les moyens de réduire le temps de charge:. Compression de fichiers d'image, gzipping html / css / js fichiers, rapetisser votre javascript, combiner des images en sprites, etc

Answer 4

Je vous suggère conseiller de Paolo Bergantino -. la délégation de l'événement est la voie à suivre pour éviter le problème tout à fait

J'ai eu un problème similaire où la délégation de l'événement ne pouvait pas faire le travail - vous pouvez lire à ce sujet ici .