Une approche nue des chargeurs squelettes polyvalents et réutilisables

Des indicateurs de chargement efficaces, comme les filateurs et les chargeurs squelettes, améliorent considérablement l'expérience utilisateur pendant les temps de chargement de la page. Bien que les filateurs soient simples à mettre en œuvre, les chargeurs de squelettes, bien que potentiellement plus complexes, offrent une expérience supérieure dans des scénarios spécifiques. De nombreuses implémentations de chargeur squelettique existantes manquent de réutilisabilité et d'évolutivité, étant souvent adaptées à des composants uniques. Cet article présente une approche plus efficace, réutilisable et évolutive.

Spinners vs chargeurs squelettes

Les filateurs (ou les barres de progression) sont les indicateurs de chargement les plus courants, fournissant un repère visuel que le chargement est en cours. Cependant, ils offrent un engagement limité; Les utilisateurs attendent passivement, incapables d'interagir avec d'autres éléments de page. Les chargeurs squelettes (ou écrans squelettes), inversement, offrent une expérience d'attente plus active. Ils utilisent des espaces réservés (boîtes colorées) représentant le contenu éventuel, offrant un sentiment de progrès et un chargement plus rapide perçu.

Surtout, les composants de chargement ne devraient pas masquer les problèmes de performance sous-jacents. Optimiser d'abord les actifs et les processus backend; Les éléments de chargement sont un dernier recours lorsque les retards sont inévitables et ne sont pas dus à des problèmes de performances réparables.

Utilisation efficace des chargeurs squelettes

Les chargeurs squelettes ne doivent pas remplacer les chargeurs à écran complet mais sont mieux utilisés dans des conditions spécifiques:

Retards évitables?

Prioriser l'optimisation des performances pour minimiser les retards de chargement. Les chargeurs squelettes ne conviennent que lorsque les retards sont vraiment inévitables.

Chargement initié par l'utilisateur?

Pour les actions de l'utilisateur déclenchant le chargement (par exemple, les images de chargement paresseux), fournissez des commentaires avec un élément de chargement. Sans cela, les utilisateurs ne connaissent pas les processus de fond.

Disposition cohérente et prévisible?

Les chargeurs squelettes fonctionnent mieux avec les dispositions de contenu prévisibles. Si le squelette ne ressemble pas à la disposition finale, le changement soudain peut être choquant.

Contenu immédiatement disponible?

Les chargeurs squelettes sont plus efficaces lorsque un contenu est immédiatement visible tandis que d'autres se chargent de manière asynchrone. Cela maintient un sentiment de progrès. Un écran rempli uniquement de chargeurs squelettes sans aucun contenu initial n'est pas significativement meilleur qu'un spinner complet.

Construire des chargeurs squelettes robustes

De nombreux exemples de chargeur squelette sont sur-conçus. Cet article préconise une approche minimaliste pour une mise en œuvre, une réutilisation et une maintenance faciles.

Exemple de grille de cartes

En utilisant HTML, CSS et JavaScript, une grille simple de six cartes démontrera un chargement asynchrone. Chaque carte utilise une image d'espace réservé ( <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Une approche nue des chargeurs squelettes polyvalents et réutilisables"> ) Pour s'assurer que le squelette est visible jusqu'à ce que l'image se charge.

Styles de chargeur squelette

Au lieu de créer des composants squelettes séparés, tirez parti des styles de mise en page existants. Le CSS suivant active les styles squelettes lorsque la classe de parent .loading est présente:

 .Loading .loading-item {
  Contexte: # 949494! IMPORTANT; / * Couleur de chargeur squelette personnalisable * /
  Couleur: RGBA (0, 0, 0, 0)! IMPORTANT;
  Color à bordure: RGBA (0, 0, 0, 0)! IMPORTANT;
  utilisateur-sélection: aucun;
  curseur: attendez;
}

.Loading .loading-item * {
  Visibilité: Hidden! Important;
}

.Loading .Loading-Item: vide :: After,
.Loading .loading-item *: vide :: After {
  Contenu: "\ 00A0";
}

Cette approche hérite de la disposition des styles de composants principaux, en remplaçant le contenu par des boîtes solides. La classe .loading-item assure la préservation de la mise en page.

Contenu multiplié et quarts de mise en page

Pour résoudre les changements de mise en page causés par des longueurs de contenu variables, utilisez<br> Tags dans les éléments d'espace réservé pour simuler plusieurs lignes. Cela hérite des propriétés CSS pertinentes pour un dimensionnement précis.

Considérations d'accessibilité

L'accessibilité est cruciale.

Contraste

Des chargeurs squelettes à contraste élevé sont recommandés pour une meilleure visibilité, adhérant aux directives WCAG. La requête multimédia prefers-contrast (lorsqu'elle est largement prise en charge) peut offrir une personnalisation supplémentaire.

Animations

Respectez les préférences de l'utilisateur pour une réduction du mouvement en utilisant la requête multimédia prefers-reduced-motion pour désactiver les animations si nécessaire.

Lecteurs d'écran

Utilisez des attributs Aria comme le texte aria-hidden pour fournir un contexte pour les lecteurs d'écran. Par exemple: <div> <span style="display:none;">Loading...</span><img aria-hidden="true" ... alt="Une approche nue des chargeurs squelettes polyvalents et réutilisables" > </div> .

Conclusion

Cette approche minimaliste crée des chargeurs squelettes polyvalents et réutilisables qui héritent de la disposition à partir des styles existants, remplaçant uniquement le contenu. Cela améliore la maintenabilité et l'évolutivité. La priorité à l'accessibilité garantit l'inclusivité pour tous les utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!