[发明专利]数据加载方法、装置及存储介质

说明书

本发明实施例公开了一种数据加载方法、装置及存储介质。方法包括：当用户访问页面时，获取待加载图片的真实路径；将真实路径替换为指定路径；当待加载图片的图片元素出现在浏览器的可视区域内时，向数据库发起请求，并接收数据库根据所述请求得到的请求结果；根据真实路径，将请求结果渲染至可视区域内。实施本发明实施例，将真实路径替换为指定路径，只有当待加载图片的图片元素出现在浏览器的可视区域内时，才向数据库发起请求，并将数据库返回的请求结果渲染至可视区域；在上述方法中，只需要发起一次请求，从而减轻了服务器压力，可以让加载好的页面更快地呈现在用户面前，有效解决了现有技术中的页面卡顿问题，提升了用户体验。

技术领域

本发明涉及数据处理技术领域，具体涉及一种数据加载方法、装置及存储介质。

背景技术

随着社会发展，在实际工作中，开发人员会遇到一次性需要向页面插入成千上万条数据的情况。当数据量过大时，例如开发人员面对成千上万条记录需要显示的时候，页面渲染的时间就会增加，从而造成页面卡顿。其中，导致页面渲染时间增加的主要原因是：在JS的Event Loop中，当JS引擎所管理的执行栈中的事件以及所有任务全部执行完成后，才会触发渲染线程对页面进行渲染。

发明内容

针对上述技术缺陷，本发明实施例的目的在于提供一种数据加载方法、装置及存储介质。

为实现上述目的，第一方面，本发明实施例提供了一种数据加载方法，包括：

当用户访问页面时，获取待加载图片的真实路径；所述页面包括网页页面或APP页面；

将所述真实路径替换为指定路径；

当所述待加载图片的图片元素出现在浏览器的可视区域内时，向数据库发起请求，并接收所述数据库根据所述请求得到的请求结果；

根据所述真实路径，将所述请求结果渲染至所述可视区域内，以完成所述待加载图片的加载显示。

进一步地，将所述真实路径替换为指定路径之后，所述方法还包括：

获取实际页面的大小、可视区域的大小、图片元素的尺寸及图片元素在所述实际页面上的实际位置；

根据所述实际页面的大小、可视区域的大小、图片元素的尺寸及图片元素在所述实际页面上的实际位置，确定所述待加载图片的图片元素是否出现在浏览器的可视区域内。

作为本申请的一种具体实施方式，所述方法具体包括：

若垂直方向包括元素1～4，水平方向包括元素5～8；

在元素1的位置处，元素1上边界与实际页面下边界的偏移距离小于可视区域下边界与实际页面下边界的距离，判断元素1在可视区域外；

在元素2的位置处，元素2上边界与实际页面下边界的偏移距离大于可视区域下边界与实际页面下边界的距离，判断元素2在可视区域内；

在元素3的位置处，元素3下边界与实际页面上边界的偏移距离大于可视区域上边界与实际页面上边界的距离，判断元素3在可视区域内；

在元素4的位置处，元素4下边界与实际页面上边界的偏移距离小于可视区域上边界与实际页面上边界的距离，判断元素4在可视区域外；

在元素5的位置处，元素5右边界与实际页面左边界的偏移距离小于可视区域左边界与实际页面左边界的距离，判断元素5在可视区域外；

在元素6的位置处，元素6右边界与实际页面左边界的偏移距离大于可视区域左边界与实际页面左边界的距离，判断元素6在可视区域内；

在元素7的位置处，元素7左边界与实际页面左边界的偏移距离大于可视区域左边界与实际页面左边界的距离，判断元素7在可视区域内；