什么是骨架屏

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

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

實現(xiàn)方案

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

npm i draw-page-structure -g

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

dps init

運行之后會讓你輸入要生成的骨架屏的頁面的地址和最終生成的骨架屏HTML片段要插入的.html文件的地址，這里的.html文件的地址要寫成絕對路徑。

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

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

dps start

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

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

一步步帶你實踐自動化生成骨架屏 - 掘金

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

總結(jié)

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

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