[发明专利]资源加载方法、装置、电子设备及计算机存储介质

说明书

本申请公开了一种资源加载方法、装置、电子设备及计算机存储介质。其中，所述方法包括：展示当前页面；响应于进入可见展示区域，加载对应的骨架组件；其中，所述骨架组件用于在资源数据尚未加载前先给用户展示出页面结构；当所述骨架组件与所述可见展示区域满足预设条件时，加载所述可见展示区域内所述骨架组件对应的资源数据；根据渲染参数和所述骨架组件在所述可见展示区域内渲染加载的资源数据。本方案通过只加载可见展示区域内所述骨架组件对应的资源数据，可以减少加载资源数据量，减少资源加载时间，从而提高页面渲染效率。

技术领域

本申请涉及计算机技术领域，具体涉及一种资源加载方法、装置、电子设备及计算机存储介质。

背景技术

目前，很多电商网站在加载资源时都使用组件懒加载方案，例如，滚动加载，延迟动态加载组件等。以一个商品的详情页为例，一般商品详情页内容比较多，可能需要用户不断滑动才能查看完商品详情页的所有内容，因此商品详情页会存在首屏、二屏、三屏、四屏之分，如图1-4所示，分别为首屏、二屏、三屏、四屏对应的页面内容示意图。

现有电商网站的商品详情页渲染方案，通常将商品详情页中所有的资源都加载完毕后再开始渲染。随着电商业务的发展，商品详情页面越来越复杂，需要加载的资源也越来越多，这会造成了页面在打开的时候需要花费大量时间来加载资源，页面渲染时间加长。

发明内容

鉴于上述问题，提出了本申请以便提供一种克服上述问题或者至少部分地解决上述问题的资源加载方法、装置、电子设备及计算机存储介质。

根据本申请的一个方面，提供了一种资源加载方法，包括：

展示当前页面；

响应于进入可见展示区域，加载对应的骨架组件；其中，所述骨架组件用于在资源数据尚未加载前先给用户展示出页面结构；

当所述骨架组件与所述可见展示区域满足预设条件时，加载所述可见展示区域内所述骨架组件对应的资源数据；

根据渲染参数和所述骨架组件在所述可见展示区域内渲染加载的资源数据。

根据本申请的另一个方面，提供了一种资源加载装置，包括：

页面展示模块，用于展示当前页面；

加载模块，用于响应于进入可见展示区域，加载对应的骨架组件；其中，所述骨架组件用于在资源数据尚未加载前先给用户展示出页面结构；当所述骨架组件与所述可见展示区域满足预设条件时，加载所述可见展示区域内所述骨架组件对应的资源数据；

渲染模块，用于根据渲染参数和所述骨架组件在所述可见展示区域内渲染加载的资源数据。

根据本申请的另一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行本申请所述的资源加载方法对应的操作。

根据本申请的另一方面，提供了一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行本申请所述的资源加载方法对应的操作。

根据本申请公开的资源加载方法、电子设备及计算机存储介质，通过响应于进入可见展示区域，加载对应的骨架组件，当该骨架组件与可见展示区域满足预设条件时，只加载可见展示区域内所述骨架组件对应的资源数据，可以减少加载资源数据量，减少资源加载时间，从而提高页面渲染效率。并且，通过骨架组件提供基础占位，当资源数据加载完成，通过渲染恢复数据展示，这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。

进一步的，通过浏览器提供的IntersectionObserverAPI自动监测所述骨架组件是否进入所述可见展示区域，不需要频繁的计算。