页面加载方法和装置、电子设备及计算机可读存储介质制造方法及图纸

本申请公开了一种页面加载方法和装置、电子设备及计算机可读存储介质。该方法包括：针对当前页面中的目标元素创建观察实例，其中，所述观察实例包含有针对所述目标元素的可见性变化的回调函数；在所述观察实例确定所述目标元素的可见性发生变化时，触发所述回调函数的执行以加载新页面数据；根据加载的所述新页面数据进行渲染处理，以展示新页面；将所述目标元素设置在所述新页面的底部。本申请实施例当目标元素的可见性发生变化时，触发执行回调函数来加载新的页面数据，因此页面的主线程不需要再为了监听元素相交而频繁调用，可以通过可见性的变化来触发新页面数据的记载，简化了滚动检测方案，实现了简单且高性能的页面加载方案。方案。方案。

【技术实现步骤摘要】
页面加载方法和装置、电子设备及计算机可读存储介质


[0001]本申请涉及数据处理
，尤其涉及一种页面加载方法和装置、电子设备及计算机可读存储介质。

技术介绍

[0002]互联网技术已经成为人们日常生活中重要的技术之一，人们可以通过使用基于互联网的各种应用来进行日常的生活和工作。尤其是随着互联网技术的发展，人们可以将大量的数据存储在专门的服务器上，并且通过互联网来在各种终端上浏览这些数据。例如，人们可以通过网页浏览器来浏览大量图片或商品构成的页面，并且可以通过滚动该页面来查看更多的图片或商品。在这样的数据浏览过程中，当前页面的数据加载到用户的终端中，并且随着用户浏览进度而为用户从云端的数据库继续加载数据，来实现用户在自己的终端上的持续浏览。这样的持续浏览方案也被称为无限滚动方案，即用户只需要滚动显示页面就可以实现持续的数据浏览。
[0003]无限滚动方案需要随着用户对于当前显示页面的浏览进度而及时为用户从云端数据库加载后续的数据，因此，在现有技术中，检测到用户的页面滚动操作时，需要检测预先设置的页面参考点的当前坐标，以判断该参考点是否处于显示窗口的坐标范围内，并且当判断参考点已经处于显示窗口的坐标范围内，即参考点已经由于用户的滚动操作而进入到显示范围，则从云端服务器加载预定量的后续数据以便于显示给用户。但是，这样的方案需要响应于滚动操作使用主线程不断地检测参考点是否位于显示窗口内，因此占用了大量的资源，而这样的频繁占用也会导致终端的性能下降，影响用户的浏览体验。

技术实现思路

[0004]本申请实施例提供一种页面加载方法和装置、电子设备及计算机可读存储介质，以解决现有技术中需要使用主线程对于目标元素的持续监听而导致终端性能下降的缺陷。
[0005]为达到上述目的，本申请实施例提供了一种页面加载方法，包括：
[0006]针对当前页面中的目标元素创建观察实例，其中，所述观察实例包含有针对所述目标元素的可见性变化的回调函数；
[0007]在所述观察实例确定所述目标元素的可见性发生变化时，触发所述回调函数的执行以加载新页面数据；
[0008]根据加载的所述新页面数据进行渲染处理，以展示新页面；
[0009]将所述目标元素设置在所述新页面的底部。
[0010]本申请实施例还提供了一种页面加载装置，包括：
[0011]创建模块，用于针对当前页面中的目标元素创建观察实例，其中，所述观察实例包含有针对所述目标元素的可见性变化的回调函数；
[0012]触发模块，用于在所述观察实例确定所述目标元素的可见性发生变化时，触发所述回调函数的执行以加载新页面数据；
[0013]渲染模块，用于根据加载的所述新页面数据进行渲染处理，以展示新页面；
[0014]设置模块，用于将所述目标元素设置在所述新页面的底部。
[0015]本申请实施例还提供了一种电子设备，包括：
[0016]存储器，用于存储程序；
[0017]处理器，用于运行所述存储器中存储的所述程序，所述程序运行时执行本申请实施例提供的页面加载方法。
[0018]本申请实施例还提供了一种计算机可读存储介质，其上存储有可被处理器执行的计算机程序，其中，该程序被处理器执行时实现如本申请实施例提供的页面加载方法。
[0019]本申请实施例提供的页面加载方法和装置、电子设备及计算机可读存储介质，针对当前页面中的目标元素创建包含有目标元素的可见性变化的回调函数，当该目标元素的可见性发生变化时，触发执行回调函数来加载新的页面数据，因此页面的主线程不需要再为了监听元素相交而频繁调用，可以通过可见性的变化来触发新页面数据的记载，简化了滚动检测方案，实现了简单且高性能的页面加载方案。
[0020]上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
[0021]通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
[0022]图1为本申请实施例提供的页面加载方案的原理示意图；
[0023]图2为本申请提供的页面加载方法的一个实施例的流程图；
[0024]图3为本申请提供的页面加载方法的另一个实施例的流程图；
[0025]图4为本申请提供的页面加载装置的实施例的结构示意图；
[0026]图5为本申请提供的电子设备实施例的结构示意图。
具体实施方式
[0027]下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0028]实施例一
[0029]本申请实施例提供的方案可应用于任何具有网络通信和显示功能的设备或系统，例如包括有网络通信和显示功能的芯片以及相关组件的终端等等。图1为本申请实施例提供的页面加载方案的原理示意图，图1所示的原理仅仅是本申请的技术方案的原理的示例之一。
[0030]在人们通过互联网浏览大量图片或商品构成的页面，并且可以通过滚动该页面来查看更多的图片或商品。在这样的数据浏览过程中，当前页面的数据加载到用户的终端中，
并且随着用户浏览进度而为用户从云端的数据库继续加载数据，来实现用户在自己的终端上的持续浏览。这样的持续浏览方案也被称为无限滚动方案，即用户只需要滚动显示页面就可以实现持续的数据浏览。
[0031]无限滚动方案需要随着用户对于当前显示页面的浏览进度而及时为用户从云端数据库加载后续的数据，例如，如图1中所示，用户在其终端的屏幕上浏览包含有元素1
‑
4的四个元素的页面数据，对应于用户所使用的屏幕，页面数据中的一部分可以显示在视口内，即对于用户是可见的。换言之，在页面数据浏览过程中，从服务器加载到本地的页面数据，即多个元素，可以具有可见性的属性，其可以表示该元素能够被用户看到的程度。例如，在如图1中所示的场景中，当前的页面数据所包含的元素1
‑
4中，当根据用户的滚动操作，在某一时刻元素1处于视口上方，与视口区域完全没有重叠区域，因此可见性为零，而元素2则其下半部分与视口区域交叠，因此意味着其下半部分对于用户来说是可见的，因此可见性为75％，而元素3的整体都处于视口区域中，这意味着用户可以完整地看到元素3的全部，因此该元素3的可见性为100％，而元素4则只有一部分处于视口区域内，该元素4的可见性为15％。而随着用户的继续滚动操作，上述元素1
‑
4的可见性也会随之发生变化。而当用户例如持续向上滚动页面本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面加载方法，包括：针对当前页面中的目标元素创建观察实例，其中，所述观察实例包含有针对所述目标元素的可见性变化的回调函数；在所述观察实例确定所述目标元素的可见性发生变化时，触发所述回调函数的执行以加载新页面数据；根据加载的所述新页面数据进行渲染处理，以展示新页面；将所述目标元素设置在所述新页面的底部。2.根据权利要求1所述的页面加载方法，其中，在所述针对当前页面中的目标元素创建观察实例之前，所述方法还包括：将所述目标元素设置在所述当前页面的底部。3.根据权利要求1所述的页面加载方法，其中，所述方法还包括：当所述目标元素与所述当前页面的可视窗口的相交部分发生变化时，所述观察实例确定所述目标元素的可见性发生变化。4.根据权利要求1所述的页面加载方法，其中，所述方法还包括：当所述目标元素与预先设置的参考元素的相交部分发生变化时，所述观察实例确定所述目标元素的可见性发生变化。5.根据权利要求1至4中任一权利要求所述的页面加载方法，其中，所述方法还包括：当所述新页面数据全部加载完毕后，关闭所述观察实例。6.一种页面加载装置，包括：创建模块...

【专利技术属性】
技术研发人员：曹晋，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：