title: skeleton-screen date: 2019-01-14 19:33:18 tags: javascript
Background and Significance
As we all know, in the era of Internet information overload, the attention span of each user is getting shorter and shorter. It is necessary for every front-end developer to carefully consider if they can attract the attention of users at the moment the web page is opened
Common web performance optimization is to improve the loading speed of the page to ensure that the page runs as soon as possible. However, when the interface returns slow data, adding a dynamic skeleton loading can effectively convey the effective information that the page is loading to the user, rather than making the user feel overwhelmed. Lose patience and finally choose to leave
Applicable Scenarios
- In a weak network environment or with complex back-end interface service logic, data is returned after a period of time
- Graphic pages that require a lot of back-end data rendering, preferably with regular card or list information
- Setting up placeholder images in advance that are the same width and height as when the data is displayed normally also avoids reflow relayouts of pages and optimizes Web performance
Show time
Today I recommend create-Content-Loader, which supports mainstream frameworks like React and Vue and supports online custom skeleton screen styles. It is very convenient to use
