页面加载方法、装置、电子设备、存储介质及程序产品制造方法及图纸

本公开关于一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品。所述方法包括：解析接收到的页面代码，得到文档对象模型；将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；模型节点记录有元素初始样式；在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。上述方法可以避免页面上出现大片异常空白的问题。出现大片异常空白的问题。出现大片异常空白的问题。

【技术实现步骤摘要】
页面加载方法、装置、电子设备、存储介质及程序产品


[0001]本公开涉及页面处理
，尤其涉及一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品。

技术介绍

[0002]随着页面处理技术的发展，出现了骨架屏(Skeleton Screen)技术，通过骨架屏技术，浏览器可以在页面的数据加载之前，显示出相应的骨架屏样式，让用户预先了解到页面的基本布局，在浏览器接收到数据并加载后，则取消骨架屏样式，恢复正常的页面内容。
[0003]目前，通常采用填入图片的方式来实现骨架屏技术，在未加载任何数据时，填入一张可以体现页面基本布局的骨架屏图片，在加载数据后则移除该图片。
[0004]然而在实际应用中，当只加载了部分数据之后，在有大部分的数据未加载的情况下，仍然会移除骨架屏图片，导致整个页面会出现大片的异常空白。
[0005]因此，传统的页面加载方法存在着导致页面出现异常空白的问题。

技术实现思路

[0006]本公开提供一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品，以至少解决相关技术中页面出现异常空白的问题。本公开的技术方案如下：
[0007]根据本公开实施例的第一方面，提供一种页面加载方法，包括：
[0008]解析接收到的页面代码，得到文档对象模型；
[0009]将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；r/>[0010]在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；
[0011]在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；
[0012]在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。
[0013]在一个示例性实施例中，所述具有模型节点多个，在所述更新钩子函数被调用时，还包括：
[0014]遍历各个所述模型节点的数据内容；
[0015]当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。
[0016]在一个示例性实施例中，还包括：
[0017]当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；
[0018]当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。
[0019]在一个示例性实施例中，在所述插入钩子函数被调用时，还包括：
[0020]判断所述模型节点中的所述页面元素是否携带有骨架屏标识；
[0021]当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。
[0022]在一个示例性实施例中，所述遍历各个所述模型节点的数据内容，包括：
[0023]确定所述模型节点中的数据内容起始标签和数据内容结束标签；
[0024]当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；
[0025]当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。
[0026]根据本公开实施例的第二方面，提供一种页面加载装置，包括：
[0027]代码处理单元，被配置为执行解析接收到的页面代码，得到文档对象模型；
[0028]元素插入单元，被配置为执行将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；
[0029]样式替换单元，被配置为执行在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；
[0030]节点更新单元，被配置为执行在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；
[0031]样式还原单元，被配置为执行在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。
[0032]在一个示例性实施例中，所述具有模型节点多个，所述样式还原单元，被配置为执行：
[0033]遍历各个所述模型节点的数据内容；
[0034]当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。
[0035]在一个示例性实施例中，所述样式还原单元，被配置为执行：
[0036]当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；
[0037]当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。
[0038]在一个示例性实施例中，所述样式替换单元，被配置为执行：
[0039]判断所述模型节点中的所述页面元素是否携带有骨架屏标识；
[0040]当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。
[0041]在一个示例性实施例中，所述样式还原单元，被配置为执行：
[0042]确定所述模型节点中的数据内容起始标签和数据内容结束标签；
[0043]当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；
[0044]当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。
[0045]根据本公开实施例的第三方面，提供一种电子设备，包括：
[0046]处理器；
[0047]用于存储所述处理器可执行指令的存储器；
[0048]其中，所述处理器被配置为执行所述指令，以实现如第一方面的任一项所述的页面加载方法。
[0049]根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如第一方面的任一项所述的页面加载方法。
[0050]根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现第一方面的任一项所述的页面加载方法。
[0051]本公开的实施例提供的技术方案至少带来以下有益效果：
[0052]利用页面构建框架在页面元素插入至模型节点、在接收到元素数据时更新模型节点该两个生命周期中会自动触发调用插入钩子函数、更新钩子函数该两个生命周期钩子函数的特性，通过插入钩子函数执行将元素初始样式替换为骨架屏样式并记录元素初始本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面加载方法，其特征在于，包括：解析接收到的页面代码，得到文档对象模型；将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。2.根据权利要求1所述的页面加载方法，其特征在于，所述具有模型节点多个，在所述更新钩子函数被调用时，还包括：遍历各个所述模型节点的数据内容；当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。3.根据权利要求2所述的页面加载方法，其特征在于，还包括：当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。4.根据权利要求1所述的页面加载方法，其特征在于，在所述插入钩子函数被调用时，还包括：判断所述模型节点中的所述页面元素是否携带有骨架屏标识；当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。5.根据权利要求3所述的页面加载方法，其特征在于，所述遍历各个所述模型节点的数据内容，包括：确定所述模型节点中的数据内容起始标签和数据内容结束标签；当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；当所述数据内容起...

【专利技术属性】
技术研发人员：熊正祥，杨敬昌，张玉强，
申请(专利权)人：北京达佳互联信息技术有限公司，
类型：发明
国别省市：