Écran squelette

Récemment, il y a eu un besoin d'écrans squelette de temps en temps dans les projets, j'ai donc pris le temps de le faire quelques recherches sur les solutions d'écrans squelettes. Il y a eu de nombreuses pratiques d'écrans squelettes, et de nombreuses personnes ont présenté leurs propres solutions. Ici, je les ai résumées et classées en fonction de ma compréhension personnelle et je les ai partagées avec tout le monde.

Tutoriels recommandés : "Développement de mini-programmes" "Tutoriel vidéo de mini-programme"

À propos de Skeleton Screen (Introduction)

L'écran squelette montre à l'utilisateur la structure générale de la page avant le chargement des données de la page, puis restitue la page après le renvoi des données demandées pour compléter le contenu des données qui doit être affiché. Il est souvent utilisé pour les pages de liste relativement régulières telles que les listes d'articles et les pages de liste dynamique.
Il est utilisé dans de nombreux projets : ex : Ele.me version h5, Zhihu, Facebook et d'autres sites ont des applications.
Emprunter une photo à titre d'exemple :
Quest-ce que lécran squelette ?

Deux types d'utilisations

L'utilisation est expliquée en introduction, mais vous pouvez toujours continuez à le détailler. Points :

est utilisé comme chargement pour le changement d'itinéraire dans spa, combiné avec le cycle de vie du composant et le moment du retour de la requête ajax
.
est utilisé comme première Optimisation du rendu de l'écran.

Premier type d'utilisation

Le premier type d'utilisation vous oblige à écrire votre propre écran squelette. Deux solutions matures et faciles à personnaliser sont recommandées. Solution pour personnaliser les composants svg en écrans squelettes

react-content-loader
<.>
vue-content-loader

Comme premier rendu d'écran (solution automatisée)

Cette solution est un ensemble de solutions résumées par Ele.me dans la pratique des écrans squelettes :

La structure dom et le css de l'écran squelette sont générés hors ligne et injectés sous les nœuds dans le template lors de la construction.
Principe de mise en œuvre du plug-in d'écran squelette eleme
Adresse du projet de la solution : page-skeleton-webpack-plugin
Points à noter lors de l'utilisation :

1. Configuration de cssUnit : Vous devez utiliser des unités adaptatives. Choisissez en fonction de la plage de sélection donnée dans le document. Le ratio généré directement avec px sera inapproprié

2. Puppeteer fait environ 80M, ce qui peut ne pas être disponible lors de l'installation.

Principe :

Utilisez Puppeteer pour contrôler Chrome sans tête sur le serveur afin d'ouvrir la page en cours de développement qui doit générer un écran squelette

et une fois le rendu terminé, tout en conservant le style de mise en page, supprimez ou ajoutez des éléments sur la page, et écrasez les éléments existants en cascade
afin que la page ne change pas. Sous la mise en page, masquez les images et le texte et recouvrez-les de styles ainsi. qu'ils sont affichés sous forme de blocs gris. Ensuite
extrayez les styles HTML et CSS modifiés, pour qu'il s'agisse d'un écran squelette

Quest-ce que lécran squelette ?

Autres solutions

Utiliser. en combinaison avec ssr render/prerender :

Pré-écrivez le composant d'écran squelette et injectez-le dans le fichier html via l'analyse de rendu ssr (sauf que vous devez l'écrire vous-même, le le processus est similaire à la solution d'automatisation ci-dessus) Référence Le composant d'écran squelette pré-écrit dans l'article
1 peut être remplacé par une image (svg) ou le concepteur peut le concevoir.

L'écran squelette du mini programme

n'a pas la notion de pré-rendu, mais vous pouvez quand même pré-écrivez vous-même le composant d'écran squelette et placez-le dans la page, et attendez que les données demandées de manière asynchrone reviennent sur la page de mise à jour.