JavaScript Design Pattern Design Pattern

Question

En tant que développeur Web, un problème commun que je me suis attaquer est d'attendre que quelque chose à charger avant de faire quelque chose d'autre. En particulier, je cache souvent (en utilisant soit display: none; ou visibility: hidden; selon la situation) des éléments en attendant une image de fond ou un fichier CSS à charger.

Envisager this example de Last.FM. Ils superposent un format PNG semi-transparent sur chaque image d'album, de sorte qu'il semble être dans un écrin. Ils le laissent charger quand il se charge, donc en fonction de votre vitesse Internet, vous pouvez voir l'image d'art par elle-même (sans la superposition) temporairement. Dans ce cas, l'art de l'album semble bien sans l'effet de bijou. Mais dans des situations similaires, j'ai constaté que je ne veux pas que l'utilisateur voit la conception du site mutilée lorsque les ressources se chargent de manière incrémentielle. Donc, dans de rares cas, j'ai tout caché de l'utilisateur jusqu'à ce que l'ensemble du kit et kaboodle a chargé. Mais c'est souvent difficile à écrire, et cela peut forcer l'utilisateur à attendre assez longtemps pour voir quoi que ce soit (en plus du texte "chargement ...").

je peux penser (et ont utilisé à l'occasion) des solutions évidentes/compromis:

1. Utilisez un peu de CSS en ligne de sorte que certaines parties de la charge DOM et rendent, ils auront immédiatement le bon taille/position/etc

2. Rendez immédiatement la partie navigation du site, de sorte que si l'utilisateur souhaite utiliser la page actuelle uniquement pour aller ailleurs, il ne doit pas attendre que le reste se charge. Charger les images pixellisées en premier lieu comme des espaces réservés pour la mise en page tout en chargeant paresseux des images de qualité supérieure en tant que remplacements.

3. Quelque chose d'original comme utiliser un gif animé mignon pour distraire l'utilisateur lors d'une phase de "chargement ...".

4. Afficher des informations utiles en tant que référence lors du chargement de l'interface utilisateur complète. (Quelque chose comme Gmail Inbox Preview, etc.)

(Désolé si ma question est fondamentalement juste de réponse ...)

Malgré toutes ces idées, je me retrouve toujours dans l'espoir qu'il ya de meilleures façons de faire certaines de ces choses. Donc je suppose que ce que je cherche, c'est de l'inspiration et/ou des façons créatives de gérer ce problème que vous avez peut-être vu dans la nature.

Answer 1

Ceci est un problème courant. Votre meilleur pari va être d'optimiser le site pour charger plus rapidement. Essayez YSlow

• Combinez tous vos actifs JS et CSS de sorte qu'il n'y ait qu'une seule requête chacun.
  • Il existe de nombreuses façons de le faire et un certain nombre de emballeurs d'actifs existent pour chaque framework web là
• Assurez-vous que votre CSS mise en page est proccessed première
• Réduire au minimum le nombre d'images sur votre site.La combinaison de choses et d'utiliser des sprites CSS aide beaucoup
• Si c'est pas encore assez, vous pouvez mettre votre mise en page et le dimensionnement CSS dans le fichier HTML pour assurer le processus navigateur d'abord avant le CSS lié