什么是骨架屏

什么是骨架屏呢？骨架屏(Skeleton Screen)是指在頁(yè)面數(shù)據(jù)加載完成前，先給用戶展示出頁(yè)面的大致結(jié)構(gòu)（灰色占位圖），在拿到接口數(shù)據(jù)后渲染出實(shí)際頁(yè)面內(nèi)容然后替換掉。Skeleton Screen 是近兩年開(kāi)始流行的加載控件，本質(zhì)上是界面加載過(guò)程中的過(guò)渡效果。 假如能在加載前把網(wǎng)頁(yè)的大概輪廓預(yù)先顯示，接著再逐漸加載真正內(nèi)容，這樣既降低了用戶的焦灼情緒，又能使界面加載過(guò)程變得自然通暢，不會(huì)造成網(wǎng)頁(yè)長(zhǎng)時(shí)間白屏或者閃爍。這就是Skeleton Screen！

Skeleton Screen 能給人一種頁(yè)面內(nèi)容“已經(jīng)渲染出一部分”的感覺(jué)，相較于傳統(tǒng)的 loading 效果，在一定程度上可提升用戶體驗(yàn)。

實(shí)現(xiàn)方案

step1:首先全局安裝插件 draw-page-structure，這個(gè)插件要依賴Puppeteer，所以可能會(huì)有些慢。

npm i draw-page-structure -g

step2:安裝完之后，進(jìn)入到項(xiàng)目目錄下運(yùn)行命令

dps init

運(yùn)行之后會(huì)讓你輸入要生成的骨架屏的頁(yè)面的地址和最終生成的骨架屏HTML片段要插入的.html文件的地址，這里的.html文件的地址要寫(xiě)成絕對(duì)路徑。

命令運(yùn)行成功就會(huì)在當(dāng)前目錄下生成dps.config.js文件，這個(gè)文件就是用于生成骨架屏的基本配置。

step3: 執(zhí)行開(kāi)始命令

dps start

這個(gè)命令會(huì)先啟動(dòng)無(wú)頭瀏覽器，無(wú)頭瀏覽器執(zhí)行相應(yīng)腳本，讀取dps.config.js配置，然后就會(huì)生成一個(gè)html片段并自動(dòng)插入到相應(yīng)的.html文件。運(yùn)行這個(gè)項(xiàng)目并在瀏覽器打開(kāi)，就會(huì)發(fā)現(xiàn)頁(yè)面加載完之前出現(xiàn)了骨架屏。

更多內(nèi)容參見(jiàn)以下文章：

一步步帶你實(shí)踐自動(dòng)化生成骨架屏 - 掘金

網(wǎng)頁(yè)骨架屏自動(dòng)生成方案（dps） - 掘金

總結(jié)

以上是生活随笔為你收集整理的wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案（dps）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。