一种页面元素加载方法、装置、设备及存储介质与流程

本发明涉及计算机，特别涉及一种页面元素加载方法、装置、设备及存储介质。

背景技术：

1、目前使用的virtual list(虚拟列表)技术能够在滚动加载时实现虚拟列表的效果，但是实现virtual list技术需要复杂的算法和逻辑，需要对业务逻辑和ui(userinterface design，用户界面设计)层进行重新设计，不适合所有的项目和场景。拟列表技术更适用于数据量较大、列表项较多的情况，能够有效减少页面加载时间和提升滚动性能。对于数据量较小、列表项较少的情况，虚拟列表可能带来不必要的复杂性和开发成本。

2、ajax infinite scroll(无限的ajax滚动)技术是一种使用ajax技术实现滚动加载的方案，可以实现快速的异步加载和无限滚动的效果，但它存在如页面跳转、历史记录、seo(search engine optimization，搜索引擎优化)优化等方面的问题，例如：传统的滚动加载使用ajax技术时由于数据为异步加载，滚动加载的过程中并不会触发完整的页面跳转，导致用户无法通过浏览器的后退按钮返回上一个滚动位置，或者无法通过分享链接或书签直接访问特定滚动位置的页面；滚动加载使用ajax技术时，页面滚动加载的每个步骤不会生成独立的历史记录条目，降低用户体验和导航的灵活性。

3、传统的滚动加载方法中，通过监听页面的滚动事件动态计算元素的位置来实现元素的加载，这种方式容易引起页面的重绘和回流，影响页面的性能和用户体验；由于页面元素的异步加载，容易引起页面的闪烁、跳动等问题；由于网络等原因，可能会出现重复请求和数据错位的情况。

技术实现思路

1、有鉴于此，本发明的目的在于提供一种页面元素加载方法、装置、设备和存储介质，能够减少请求次数和资源消耗，提高页面的加载速度。其具体方案如下：

2、第一方面，本发明公开了一种页面元素加载方法，包括：

3、获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；

4、实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；

5、若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。

6、可选的，所述获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间之前，还包括：

7、在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数。

8、可选的，所述在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之前，还包括：

9、根据用户操作执行需求预先设置所述回调函数的执行次数；所述执行次数包含单次执行以及持续执行。

10、可选的，所述在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之后，还包括：

11、将所述待加载元素与所述交叉观察器对象关联；

12、实时监听所述待加载元素对应的所述元素位置信息，当所述元素位置信息与所述展示位置区间的边界位置信息重合时，触发所述回调函数执行所述预设加载操作。

13、可选的，所述触发所述回调函数执行所述预设加载操作之后，还包括：

14、通过异步请求加载方式获取所述待加载元素。

15、可选的，所述判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件，包括：

16、获取所述展示位置区间的加载位置信息，并基于所述元素位置信息判断所述待加载元素是否到达所述加载位置信息对应的开始加载位置；

17、若所述待加载元素已到达所述加载位置信息对应的所述开始加载位置，则获取所述元素位置信息与所述展示位置区间之间的交叉比例；

18、判断所述交叉比例是否大于预设交叉阈值；

19、若所述交叉比例大于所述预设交叉阈值，则判定所述交叉状态为已交叉，并判定所述交叉状态满足所述预设元素加载条件；

20、若所述交叉比例小于或等于所述预设交叉阈值，则判定所述交叉状态为未交叉，并判定所述交叉状态不满足所述预设元素加载条件。

21、可选的，所述对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示，包括：

22、对所述待加载元素执行所述预设加载操作，得到所述加载后元素，并获取基于用户展示需求生成的展示页面；

23、将所述加载后元素动态插入至所述展示页面，以得到更新后页面，并将所述更新后页面在所述展示位置区间中进行展示。

24、第二方面，本发明公开了一种页面元素加载装置，包括：

25、元素位置信息获取模块，用于获取滚动区域中每个待加载元素以及对应的元素位置信息；

26、展示位置区间获取模块，用于获取进入页面可视区域的展示位置区间；

27、交叉状态判断模块，用于实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；

28、元素加载模块，用于若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。

29、第三方面，本发明公开了一种电子设备，包括：

30、存储器，用于保存计算机程序；

31、处理器，用于执行所述计算机程序，以实现如前述公开的页面元素加载方法的步骤。

32、第四方面，本发明公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如前述公开的页面元素加载方法。

33、可见，本发明提供了一种页面元素加载方法，包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。由此可见，本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，在滚动加载时，只有当元素进入页面可视区域时才会被加载，减少了请求次数和资源消耗，提高了页面的加载速度。

技术特征：

1.一种页面元素加载方法，其特征在于，包括：

2.根据权利要求1所述的页面元素加载方法，其特征在于，所述获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间之前，还包括：

3.根据权利要求2所述的页面元素加载方法，其特征在于，所述在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之前，还包括：

4.根据权利要求2所述的页面元素加载方法，其特征在于，所述在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之后，还包括：

5.根据权利要求4所述的页面元素加载方法，其特征在于，所述触发所述回调函数执行所述预设加载操作之后，还包括：

6.根据权利要求1所述的页面元素加载方法，其特征在于，所述判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件，包括：

7.根据权利要求1至6任一项所述的页面元素加载方法，其特征在于，所述对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示，包括：

8.一种页面元素加载装置，其特征在于，包括：

9.一种电子设备，其特征在于，包括：

10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的页面元素加载方法。

技术总结
本发明公开了一种页面元素加载方法、装置、设备及存储介质，涉及计算机技术领域，包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，减少了请求次数和资源消耗，提高了页面的加载速度。

技术研发人员：石浩栋
受保护的技术使用者：上海微盟企业发展有限公司
技术研发日：
技术公布日：2024/1/22