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).