[發(fā)明專利]網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202011286385.4
• 申請(qǐng)日: 2020-11-17
• 公開（公告）號(hào): CN112328940A
• 公開（公告）日: 2021-02-05
• 發(fā)明（設(shè)計(jì)）人: 張劉立;蔡少康
• 申請(qǐng)（專利權(quán)）人: 中國(guó)平安財(cái)產(chǎn)保險(xiǎn)股份有限公司
• 主分類號(hào): G06F16/958
• 分類號(hào): G06F16/958;G06F16/957;G06F8/38
• 代理公司: 深圳市世聯(lián)合知識(shí)產(chǎn)權(quán)代理有限公司 44385
• 代理人: 汪琳琳

本申請(qǐng)實(shí)施例屬于研發(fā)管理領(lǐng)域，涉及一種網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的方法，包括獲取多個(gè)網(wǎng)頁(yè)頁(yè)面，并分析各個(gè)網(wǎng)頁(yè)頁(yè)面的頁(yè)面元素，根據(jù)頁(yè)面元素確定頁(yè)面元素在網(wǎng)頁(yè)頁(yè)面中對(duì)應(yīng)的位置信息，得到所有網(wǎng)頁(yè)頁(yè)面的布局特征，根據(jù)布局特征確定并生成目標(biāo)網(wǎng)頁(yè)的骨架屏，接收到目標(biāo)網(wǎng)頁(yè)的頁(yè)面加載請(qǐng)求，根據(jù)頁(yè)面加載請(qǐng)求獲取與目標(biāo)網(wǎng)頁(yè)對(duì)應(yīng)的骨架屏，并進(jìn)行展示。本申請(qǐng)還提供一種網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)。此外，本申請(qǐng)還涉及區(qū)塊鏈技術(shù)，頁(yè)面加載請(qǐng)求可存儲(chǔ)于區(qū)塊鏈中。本申請(qǐng)可以避免用戶長(zhǎng)時(shí)間看到無(wú)意義白屏，提高視覺效果，進(jìn)一步可以提升用戶體驗(yàn)。

技術(shù)領(lǐng)域

本申請(qǐng)涉及研發(fā)管理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)

移動(dòng)終端在打開網(wǎng)頁(yè)的時(shí)候，由于網(wǎng)頁(yè)引擎初始化、網(wǎng)頁(yè)數(shù)據(jù)拉取以及頁(yè)面渲染等時(shí)間較長(zhǎng)，一般會(huì)顯示加載中的過(guò)渡頁(yè)。骨架屏是現(xiàn)今非常流行的一種網(wǎng)頁(yè)過(guò)渡頁(yè)。與傳統(tǒng)的過(guò)渡頁(yè)在特定區(qū)域顯示加載中的提示不同的是，骨架圖和網(wǎng)頁(yè)最后顯示的頁(yè)面布局高度相似，但內(nèi)容用特定的顏色完全填充。

現(xiàn)有技術(shù)中，一般是由網(wǎng)頁(yè)開發(fā)人員自己生成骨架屏，在移動(dòng)終端打開這個(gè)網(wǎng)頁(yè)時(shí)顯示出來(lái)，而網(wǎng)頁(yè)下發(fā)到終端需要發(fā)起網(wǎng)絡(luò)請(qǐng)求，將骨架屏下載到終端，并由終端的web引擎渲染進(jìn)行顯示，這段時(shí)間終端都將顯示白屏；同時(shí)網(wǎng)絡(luò)請(qǐng)求受限于網(wǎng)絡(luò)情況，時(shí)間未可預(yù)料；即使網(wǎng)絡(luò)足夠快或者骨架屏已經(jīng)在App端有緩存了，web引擎的初始化和骨架屏的渲染也需要耗費(fèi)時(shí)間，對(duì)于Android大部分機(jī)器，特別是低端機(jī)器上，無(wú)意義的白屏特別長(zhǎng)，視覺效果差，造成用戶體驗(yàn)差。

發(fā)明內(nèi)容

本申請(qǐng)實(shí)施例的目的在于提出一種網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)，以解決相關(guān)技術(shù)中移動(dòng)終端打開網(wǎng)頁(yè)時(shí)，無(wú)意義白屏長(zhǎng)，視覺效果差的問(wèn)題。

為了解決上述技術(shù)問(wèn)題，本申請(qǐng)實(shí)施例提供一種網(wǎng)頁(yè)嵌入過(guò)渡頁(yè)的方法，采用了如下所述的技術(shù)方案：

獲取多個(gè)網(wǎng)頁(yè)頁(yè)面，并分析所述網(wǎng)頁(yè)頁(yè)面的頁(yè)面元素；

根據(jù)所述頁(yè)面元素確定所述頁(yè)面元素在所述網(wǎng)頁(yè)頁(yè)面中對(duì)應(yīng)的位置信息，得到所述網(wǎng)頁(yè)頁(yè)面的布局特征；

根據(jù)接收到的目標(biāo)網(wǎng)頁(yè)的頁(yè)面加載請(qǐng)求，確定所述目標(biāo)網(wǎng)頁(yè)的布局特征，并生成骨架屏。

進(jìn)一步的，所述根據(jù)所述頁(yè)面元素確定所述頁(yè)面元素在所述網(wǎng)頁(yè)頁(yè)面中對(duì)應(yīng)的位置信息，得到所述網(wǎng)頁(yè)頁(yè)面的布局特征的步驟包括：

根據(jù)所述頁(yè)面元素和所述位置信息，生成對(duì)應(yīng)的元布局；

將所述元布局進(jìn)行組合，得到布局特征。

進(jìn)一步的，所述將所述元布局進(jìn)行組合，得到布局特征的步驟包括：

將所述元布局以列表形式進(jìn)行組合，并進(jìn)行編號(hào)；

根據(jù)所述元布局的個(gè)數(shù)以及所述編號(hào)，生成骨架屏序列作為布局特征。

進(jìn)一步的，所述根據(jù)所述頁(yè)面元素確定所述頁(yè)面元素在所述網(wǎng)頁(yè)頁(yè)面中對(duì)應(yīng)的位置信息，得到所述網(wǎng)頁(yè)頁(yè)面的布局特征的步驟包括：

根據(jù)所述頁(yè)面元素以及所述位置信息確定所述網(wǎng)頁(yè)頁(yè)面的內(nèi)容區(qū)域和非內(nèi)容區(qū)域；

將所述內(nèi)容區(qū)域和非內(nèi)容區(qū)域進(jìn)行像素填充，得到所述網(wǎng)頁(yè)頁(yè)面對(duì)應(yīng)的填充圖片，所述填充圖片為所述網(wǎng)頁(yè)頁(yè)面的布局特征；

將所有所述網(wǎng)頁(yè)頁(yè)面對(duì)應(yīng)的原圖片和所述填充圖片分別作為預(yù)設(shè)網(wǎng)絡(luò)模型的輸入和輸出，訓(xùn)練所述預(yù)設(shè)網(wǎng)絡(luò)模型，訓(xùn)練直至所述預(yù)設(shè)網(wǎng)絡(luò)模型收斂，保存所述預(yù)設(shè)網(wǎng)絡(luò)模型及其對(duì)應(yīng)的模型參數(shù)；

將待打開網(wǎng)頁(yè)頁(yè)面對(duì)應(yīng)的原圖片輸入訓(xùn)練好的預(yù)設(shè)網(wǎng)絡(luò)模型中，得到所述待打開網(wǎng)頁(yè)頁(yè)面的布局特征。

進(jìn)一步的，所述根據(jù)所述布局特征確定并生成目標(biāo)網(wǎng)頁(yè)的骨架屏的步驟包括：