Was ist ein Skelettbildschirm?

Skelettbildschirm

In letzter Zeit bestand in Projekten immer wieder Bedarf an Skelettbildschirmen, also habe ich mir die Zeit genommen, dies zu tun Einige Recherchen zu Skeleton-Screen-Lösungen Es gab viele Praktiken zu Skeleton-Screens, und viele Leute haben ihre eigenen Lösungen vorgestellt. Hier habe ich sie basierend auf meinem persönlichen Verständnis zusammengefasst und mit allen geteilt.

Empfohlene Tutorials: „Mini-Programmentwicklung“ „Mini-Programm-Video-Tutorial“

Über Skeleton Screen (Einführung)

Der Skelettbildschirm zeigt dem Benutzer die allgemeine Struktur der Seite, bevor die Seitendaten geladen werden, und rendert die Seite dann, nachdem die angeforderten Daten zurückgegeben wurden, um den Dateninhalt zu ergänzen, der benötigt wird angezeigt werden. Es wird häufig für relativ regelmäßige Listenseiten wie Artikellisten und dynamische Listenseiten verwendet.
Es wird in vielen Projekten verwendet: z. B.: Ele.me h5-Version, Zhihu, Facebook und andere Websites haben Anwendungen.
Leihen Sie sich ein Bild als Beispiel aus:

Zwei Arten der Verwendung

Die Verwendung wird in der Einleitung erklärt, Sie können sie aber trotzdem verwenden Weitere Einzelheiten:

• wird als Last für die Routenumschaltung in Spa verwendet, kombiniert mit dem Lebenszyklus der Komponente und dem Timing der Ajax-Anforderungsrückgabe

• wird als erste Optimierung der Bildschirmwiedergabe verwendet.

Die erste Art der Verwendung

Die erste Für die Art der Verwendung müssen Sie Ihren eigenen Skelettbildschirm schreiben. Es werden zwei ausgereifte und einfach anzupassende Lösungen zum Anpassen von SVG-Komponenten in Skelettbildschirme empfohlen >

vue-content-loader
• Als erstes Bildschirmrendering (automatisierte Lösung)

Diese Lösung ist Eine Reihe von Lösungen, die von Ele.me in der Praxis von Skelettbildschirmen zusammengefasst wurden:

Die Dom-Struktur und das CSS des Skelettbildschirms werden offline generiert und beim Erstellen unter den Knoten in der Vorlage eingefügt .

Prinzipbezogenes Element-Skelett-Bildschirm-Plugin-Implementierungsprinzip
Projektadresse der Lösung: page-skeleton-webpack-plugin
Bei der Verwendung zu beachtende Punkte:
1. Konfiguration von cssUnit: Sie müssen adaptive Einheiten gemäß dem in der angegebenen Auswahlbereich verwenden Dokument. Das direkt mit px generierte Verhältnis ist ungeeignet

• 2. Puppeteer ist etwa 80 MB groß, was während der Installation möglicherweise nicht verfügbar ist.

Prinzip :

Verwenden Sie Puppeteer, um Headless Chrome auf dem Server zu steuern, um die in der Entwicklung befindliche Seite zu öffnen, die einen Skelettbildschirm generieren muss. Warten Sie, bis die Seite geladen ist
• und nach dem Rendern Wenn Sie fertig sind, behalten Sie den Seitenlayoutstil bei, löschen oder fügen Sie Elemente auf der Seite hinzu und überschreiben Sie die vorhandenen Elemente in einem kaskadierenden Muster

  , damit sich die Seite nicht ändert. Blenden Sie die Bilder und den Text aus und überdecken Sie sie mit Stile so, dass sie als graue Blöcke angezeigt werden. Dann

  die geänderten HTML- und CSS-Stile extrahieren, sodass es sich um einen Skelettbildschirm handelt

Andere Lösungen

Verwenden es in Verbindung mit ssr render/prerender:

Schreiben Sie die Skelett-Bildschirmkomponente vorab und fügen Sie sie durch die ssr-render-Analyse in die HTML-Datei ein (außer dass Sie sie selbst schreiben müssen Der Prozess ähnelt der obigen Automatisierungslösung.) Referenz Die vorab geschriebene Skelettbildschirmkomponente im Artikel

1 kann durch ein Bild (SVG) ersetzt werden; oder der Designer kann es entwerfen.
• Der Skelettbildschirm des Miniprogramms

verfügt nicht über das Konzept des Vorrenderns, aber Sie können es trotzdem tun Schreiben Sie die Skelett-Bildschirmkomponente selbst vor, fügen Sie sie in die Seite ein und warten Sie, bis die asynchron angeforderten Daten zurückkommen. Aktualisieren Sie die Seite.

• Empfohlene verwandte Tutorials: „

  CSS Basic Tutorial

  “ „
PHP Beginner to Mastery

“

Das obige ist der detaillierte Inhalt vonWas ist ein Skelettbildschirm?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!