骨架屏的渲染方法、装置、设备及存储介质制造方法及图纸

技术编号:25756542 阅读:32 留言:0更新日期:2020-09-25 21:05
本发明专利技术涉及计算机网络技术领域,公开了一种骨架屏的渲染方法、装置、设备及存储介质,用于减少白屏显示时间,提升页面切换的响应效率。骨架屏的渲染方法包括:获取目标终端的页面加载请求,其中,目标终端的页面加载请求为网络加载请求;根据目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对初始骨架屏进行渲染,得到首屏骨架屏;通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏;将目标骨架屏传输至目标终端进行显示。此外,本发明专利技术还涉及区块链技术,预置的骨架屏可存储于区块链中。

【技术实现步骤摘要】
骨架屏的渲染方法、装置、设备及存储介质
本专利技术涉及计算机网络
,尤其涉及一种骨架屏的渲染方法、装置、设备及存储介质。
技术介绍
随着计算机网络的发展,人们越依赖于网络获取信息和服务,可以通过网络浏览文字信息、查看图片、播放影音等。上述这些信息和服务都是通过页面形式呈现给用户的。当用户过浏览器等客户端向服务器发起统一资源定位符(uniformresourcelocator,URL)请求时,对应的服务器会根据URL请求,将相应的信息数据呈现出来,由于从网络上获取目标信息数据,所以页面完全加载目标信息数据之前会出现一定的延迟时间。本申请专利技术人在研究中发现,现有的技术中,很多前端开发方采用骨架屏来填补这段空白时间,目前骨架屏的加载方式主要是利用页面模板添加首页骨架对骨架屏进行渲染,这种加载方式只能在第一次进入系统时有骨架屏的效果。
技术实现思路
本专利技术的主要目的在于解决加载目标页面前只能在第一次进入系统时有骨架屏的效果的问题。本专利技术第一方面提供了一种骨架屏的渲染方法,包括:获取目标终端的页面加载本文档来自技高网...

【技术保护点】
1.一种骨架屏的渲染方法,其特征在于,所述骨架屏的渲染方法包括:/n获取目标终端的页面加载请求,其中,所述目标终端的页面加载请求为网络加载请求;/n根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对所述初始骨架屏进行渲染,得到首屏骨架屏;/n通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏;/n将所述目标骨架屏传输至目标终端进行显示。/n

【技术特征摘要】
1.一种骨架屏的渲染方法,其特征在于,所述骨架屏的渲染方法包括:
获取目标终端的页面加载请求,其中,所述目标终端的页面加载请求为网络加载请求;
根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对所述初始骨架屏进行渲染,得到首屏骨架屏;
通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏;
将所述目标骨架屏传输至目标终端进行显示。


2.根据权利要求1所述的骨架屏的渲染方法,其特征在于,所述根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对所述初始骨架屏进行渲染,得到首屏骨架屏包括:
根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏;
判断所述初始骨架屏是否与目标终端的页面相匹配;
若所述初始骨架屏与所述目标终端的页面相匹配,则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染,得到首屏骨架屏。


3.根据权利要求2所述的骨架屏的渲染方法,其特征在于,所述判断所述初始骨架屏是否与目标终端的页面相匹配包括:
从所述初始骨架屏中读取初始骨架屏路由路径,并从目标终端的页面读取目标终端的页面路由路径;
判断所述目标终端的页面路由路径是否与所述初始骨架屏路由路径匹配;
若所述目标终端的页面路由路径与所述初始骨架屏路由路径匹配,则判定所述初始骨架屏与目标终端的页面相匹配。


4.根据权利要求2所述的骨架屏的渲染方法,其特征在于,所述若所述初始骨架屏与所述目标终端的页面相匹配,则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染,得到首屏骨架屏包括:
若所述初始骨架屏与所述目标终端的页面相匹配,则在所述目标项目入口对应的项目入口文件中挂载预置的内联标签,得到初始项目内联标签;
将所述初始骨架屏路由路径写入所述初始项目内联标签中,得到第一目标项目内联标签;
对所述第一目标项目内联标签添加层叠样式表和显示尺寸,得到首屏骨架屏,其中,所述显示尺寸与所述目标终端的显示尺寸相同。


5.根据权利要求1所述的骨架屏的渲染方法,其特征在于,所述通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏包括:
通过预置的监听函数监听哈希路由的哈希值;
当通过所述监...

【专利技术属性】
技术研发人员:周丽霞王超钟志清
申请(专利权)人:中国平安财产保险股份有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1