The overview

CSS implementation awesome-skeleton vue-skeleton-webpack-plugin page-skeleton-webpack-plugin
advantages Simple, crude, easy to understand, accurate and flexible Tools, after the development of pictures can be generated, convenient. simple Simple and accurate
disadvantages More trouble Some complex web pages cannot be implemented Bulky, unable to generate a skeleton screen based on the page style No maintenance, need to modify the source code
availability recommended The recommended Is not recommended Is not recommended

CSS implementation (simple and easy to understand)

Add. Skeleton before request, remove. Skeleton style when data is available.

css

.skeleton { background-image: linear-gradient(-45deg, #f5f5f5 40%, #fff 55%, #f5f5f5 63%); // width: 300px; // height: 100px; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-animation 2s ease infinite; margin-top 50px } @keyframes skeleton-animation { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }}Copy the code

util.js

export const skeleton = (data, otherClass)=> {
   return data ? ` ${otherClass}` : `skeleton ${otherClass}`
 }

Copy the code

use

<div :class="skeleton(true)"></div>
Copy the code

Use the awesome-skeleton tool

Github.com/kaola-fed/a…

Git clone https://github.com/kaola-fed/awesome-skeleton.git CD awesome-skeleton NPM I CD demo node index.js The Skeleton screen will appear in a few seconds. Click. The skeleton screen images and base64 files are then generated under demo/ skeleton-OutputCopy the code

vue-skeleton-webpack-plugin

The vue-skeleton-webpack-plugin style does not generate a skeleton screen from the content, it is written from the beginning and is not flexible enough.

page-skeleton-webpack-plugin

Is not very good, do not maintain the code, download after need to modify the node_module/page – skeleton – webpack – the plugin/SRC/skeletonPlugin js files in

SkeletonPlugin. Prototype. CreateServer (probably in line 23) :

if (! this.server) { const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign server.listen().catch(err => server.log.warn(err)) } // const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign // server.listen().catch(err => server.log.warn(err))Copy the code

In the browser to open the page, enter Ctrl | Cmd + enter the preview will appear skeleton page buttonClick the preview skeleton screen (wait 5-10 seconds), click the save button in the upper right corner, and the shell file will be generated

Then NPM Run Build compiles the project and, after launching the dist directory under Nginx, visits the page to see the effect. The effects can be easily observed with slow3G (I started Dist using a Node server and found no skeleton screen).