What is Skeleton Screen?

##Skeleton Screen

Recently, there has been a need for skeleton screens from time to time in projects, so I took the time to do some research on the skeleton screen plan. There have been many practices of skeleton screens, and many people have introduced their own solutions. Here I have summarized and classified them based on my personal understanding and shared them with everyone.

Recommended tutorials: "

Mini Program Development" " Mini Program Video Tutorial"

About Skeleton Screen (Introduction)

The skeleton screen shows the user the general structure of the page before the page data is loaded, and then renders the page after the requested data is returned to supplement the data content that needs to be displayed. It is often used for relatively regular list pages such as article lists and dynamic list pages.

It has been applied in many projects: ex: Ele.me h5 version, Zhihu, Facebook and other websites have applications.
Let’s take a picture as an example:

Two types of uses

The use is explained in the introduction, but you can still continue to elaborate. Points:

• is used as the loading for routing switching in spa, combined with the life cycle of the component and the timing of the ajax request return.

• is used as the first Optimization of screen rendering.

First type of use

The first type of use requires you to write the skeleton screen yourself. We recommend two mature and easy to customize A solution for customizing svg components into skeleton screens

• react-content-loader

• vue-content-loader

As first screen rendering (automated solution)

This solution is a set of solutions summarized by Ele.me in the practice of skeleton screens:

• The dom structure and css of the skeleton screen are injected under the nodes in the template when they are built after offline generation.

• Principle related eleme skeleton screen plug-in implementation principle

• Project address of the solution: page-skeleton-webpack-plugin

• Notes when using:

1. Configuration of cssUnit: You need to use adaptive units. Select according to the selection range given in the document. The ratio generated directly with px will be inappropriate

2. Puppeteer is about 80M, which may not be available during installation. One download was successful.

• Principle:

Use puppeteer to control headless Chrome on the server to open the page under development that needs to generate a skeleton screen. Wait for the page to load

After the rendering is completed, on the premise of retaining the page layout style, delete or add elements on the page, and overwrite the existing elements in a cascading manner
, so that the page does not change Under the layout, hide the pictures and text and cover them with styles so that they are displayed as gray blocks. Then
extract the modified HTML and CSS styles, so that it is the skeleton screen.

Other solutions

Use it in combination with ssr render/prerender:

• Pre-write the skeleton screen component and inject it into the html file through ssr render analysis (except that you need to write it yourself, the process is similar to the automation solution above) Reference The skeleton screen component written in advance in article

• 1 can be replaced by a picture (svg); or the designer can design it.

# #Skeleton screen of small program

There is no concept of pre-rendering, but you can still pre-write the skeleton screen component yourself and put it in the page, and wait until the asynchronous request data comes back. Update page.
## Recommended related tutorials: "

CSS Basic Tutorial

" "

PHP Getting Started to Mastery"

The above is the detailed content of What is Skeleton Screen?. For more information, please follow other related articles on the PHP Chinese website!