前端開發(fā)是與用戶聯(lián)系最為密切的職位，用戶體驗(yàn)是最值得關(guān)注的問題?，F(xiàn)在越來越多的APP采用了骨架屏，隨著前端SPA單頁的流行，首屏加載也困擾著許多開發(fā)者，今天就來實(shí)現(xiàn)一個(gè)骨架屏！
前提：
以vue項(xiàng)目為例，使用官方腳手架初始化一套項(xiàng)目！
1.什么是骨架屏？
骨架屏就是頁面內(nèi)容還未加載完成的時(shí)候，先讓一些圖片或者固定結(jié)構(gòu)占位，待內(nèi)容加載完成后把他替換掉。
2. 編寫骨架屏樣式
首先咱們要寫一個(gè)骨架屏，可以是ui給你的圖，也可以是div css寫一個(gè)簡單點(diǎn)的。
上圖代碼如下：
<div id="app">
<div style="width:100%;height:50px;background: rgb(211, 219, 224);"></div>
<ul class="loading-skeleton" style="">
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
<li>
<div class="d1"></div>
<div class="d2 o"></div>
<div class="d2 d"></div>
</li>
</ul>
<style>
.loading-skeleton{
width:100%;height:auto;list-style: none;overflow: hidden;margin:0;padding:0;
}
.loading-skeleton li{
width: 40%;
height: 180px;
float: left;
margin: 3% 7% 3% 3%;
}
.loading-skeleton li .d1{
width: 100%;
height: 130px;
background: rgb(211, 219, 224);
}
.loading-skeleton li .d2{
width: 100%;
height: 15px;
background: rgb(211, 219, 224);
margin-top: 5px;
}
.loading-skeleton .o {
float:left;width:92%;height:100px;margin:3%;
background: rgb(211, 219, 224);
animation: skeleton-stripes 1s linear infinite;
transform-origin: left;
animation: skeleton-stretch .5s linear infinite alternate;
}
.loading-skeleton .d {
float:left;width:92%;height:100px;margin:3%;
background: rgb(211, 219, 224);
animation: skeleton-stripes 1s linear infinite;
transform-origin: left;
animation: skeleton-stretch .5s -.5s linear infinite alternate;
}
@keyframes skeleton-stretch {
from {
transform: scalex(1);
}
to {
transform: scalex(.3);
}
}
</style>
</div>
3. 編寫Plugin
在build目錄下新建MyPlugin_skeleton.js（名字隨便起），并寫入如下代碼:
let MyPlugin_skeleton = function (options) {
this.template = options.template;
};
MyPlugin_skeleton.prototype.apply = function (compiler) {
console.log('生成骨架中...');
compiler.plugin('compilation', compilation => {
compilation.plugin('html-webpack-plugin-before-html-processing', (htmlData, callback) => {
/**
* htmlData是打包dist后 index.html 的內(nèi)容
* 然后用replace去替換掉
*/
// console.log(htmlData)
htmlData.html = htmlData.html.replace(
`<div id="app"></div>`,
`<div id="app">
... 這里是寫好的骨架屏樣式
</div>`
);
callback(null, htmlData);
});
});
};
module.exports = MyPlugin_skeleton;
html-webpack-plugin 提供了一系列事件：
html-webpack-plugin-before-html-generation
html-webpack-plugin-before-html-processing
html-webpack-plugin-alter-asset-tags
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
html-webpack-plugin-alter-chunks
我們可以注冊(cè)到它處理 HTML 之前，使用 html-webpack-plugin-before-html-processing 事件把骨架屏動(dòng)態(tài)插入進(jìn)去；
4.在dev 和 prod 配置文件中引入自己的插件
// 引入骨架插件
const MyPlugin_skeleton = require('./MyPlugin_skeleton')
...
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
new MyPlugin_skeleton({
template: '骨架屏插件'
}),
...
5.打包
執(zhí)行cnpm run build,打開dist/index.html 可以看到我們的骨架屏已經(jīng)插入到root中
到此我們實(shí)現(xiàn)了在DOM掛載之前，先顯示骨架屏，是不是很簡單，此插件可以用于任何項(xiàng)目。
拓展
其實(shí)還可以根據(jù)用戶訪問路徑進(jìn)行打包不同的骨架，無非就加入path判斷，塞入不同樣式。
