CN117389611A - 一种页面元素加载方法、装置、设备及存储介质 - Google Patents
一种页面元素加载方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN117389611A CN117389611A CN202311451031.4A CN202311451031A CN117389611A CN 117389611 A CN117389611 A CN 117389611A CN 202311451031 A CN202311451031 A CN 202311451031A CN 117389611 A CN117389611 A CN 117389611A
- Authority
- CN
- China
- Prior art keywords
- loading
- loaded
- page
- position information
- preset
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 177
- 238000003860 storage Methods 0.000 title claims abstract description 13
- 238000005096 rolling process Methods 0.000 claims abstract description 32
- 230000000007 visual effect Effects 0.000 claims abstract description 28
- 238000012544 monitoring process Methods 0.000 claims abstract description 25
- 230000006870 function Effects 0.000 claims description 30
- 238000000034 method Methods 0.000 claims description 29
- 238000004590 computer program Methods 0.000 claims description 16
- 238000005516 engineering process Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000009877 rendering Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 238000005457 optimization Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000009191 jumping Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004540 process dynamic Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3058—Monitoring arrangements for monitoring environmental properties or parameters of the computing system or of the computing system component, e.g. monitoring of power, currents, temperature, humidity, position, vibrations
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本发明公开了一种页面元素加载方法、装置、设备及存储介质，涉及计算机技术领域，包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，减少了请求次数和资源消耗，提高了页面的加载速度。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种页面元素加载方法、装置、设备及存储介质。
背景技术
目前使用的Virtual List(虚拟列表)技术能够在滚动加载时实现虚拟列表的效果，但是实现Virtual List技术需要复杂的算法和逻辑，需要对业务逻辑和UI(UserInterface Design，用户界面设计)层进行重新设计，不适合所有的项目和场景。拟列表技术更适用于数据量较大、列表项较多的情况，能够有效减少页面加载时间和提升滚动性能。对于数据量较小、列表项较少的情况，虚拟列表可能带来不必要的复杂性和开发成本。
Ajax Infinite Scroll(无限的Ajax滚动)技术是一种使用Ajax技术实现滚动加载的方案，可以实现快速的异步加载和无限滚动的效果，但它存在如页面跳转、历史记录、SEO(Search Engine Optimization，搜索引擎优化)优化等方面的问题，例如：传统的滚动加载使用Ajax技术时由于数据为异步加载，滚动加载的过程中并不会触发完整的页面跳转，导致用户无法通过浏览器的后退按钮返回上一个滚动位置，或者无法通过分享链接或书签直接访问特定滚动位置的页面；滚动加载使用Ajax技术时，页面滚动加载的每个步骤不会生成独立的历史记录条目，降低用户体验和导航的灵活性。
传统的滚动加载方法中，通过监听页面的滚动事件动态计算元素的位置来实现元素的加载，这种方式容易引起页面的重绘和回流，影响页面的性能和用户体验；由于页面元素的异步加载，容易引起页面的闪烁、跳动等问题；由于网络等原因，可能会出现重复请求和数据错位的情况。
发明内容
有鉴于此，本发明的目的在于提供一种页面元素加载方法、装置、设备和存储介质，能够减少请求次数和资源消耗，提高页面的加载速度。其具体方案如下：
第一方面，本发明公开了一种页面元素加载方法，包括：
获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；
实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；
若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
可选的，所述获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间之前，还包括：
在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数。
可选的，所述在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之前，还包括：
根据用户操作执行需求预先设置所述回调函数的执行次数；所述执行次数包含单次执行以及持续执行。
可选的，所述在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之后，还包括：
将所述待加载元素与所述交叉观察器对象关联；
实时监听所述待加载元素对应的所述元素位置信息，当所述元素位置信息与所述展示位置区间的边界位置信息重合时，触发所述回调函数执行所述预设加载操作。
可选的，所述触发所述回调函数执行所述预设加载操作之后，还包括：
通过异步请求加载方式获取所述待加载元素。
可选的，所述判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件，包括：
获取所述展示位置区间的加载位置信息，并基于所述元素位置信息判断所述待加载元素是否到达所述加载位置信息对应的开始加载位置；
若所述待加载元素已到达所述加载位置信息对应的所述开始加载位置，则获取所述元素位置信息与所述展示位置区间之间的交叉比例；
判断所述交叉比例是否大于预设交叉阈值；
若所述交叉比例大于所述预设交叉阈值，则判定所述交叉状态为已交叉，并判定所述交叉状态满足所述预设元素加载条件；
若所述交叉比例小于或等于所述预设交叉阈值，则判定所述交叉状态为未交叉，并判定所述交叉状态不满足所述预设元素加载条件。
可选的，所述对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示，包括：
对所述待加载元素执行所述预设加载操作，得到所述加载后元素，并获取基于用户展示需求生成的展示页面；
将所述加载后元素动态插入至所述展示页面，以得到更新后页面，并将所述更新后页面在所述展示位置区间中进行展示。
第二方面，本发明公开了一种页面元素加载装置，包括：
元素位置信息获取模块，用于获取滚动区域中每个待加载元素以及对应的元素位置信息；
展示位置区间获取模块，用于获取进入页面可视区域的展示位置区间；
交叉状态判断模块，用于实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；
元素加载模块，用于若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
第三方面，本发明公开了一种电子设备，包括：
存储器，用于保存计算机程序；
处理器，用于执行所述计算机程序，以实现如前述公开的页面元素加载方法的步骤。
第四方面，本发明公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如前述公开的页面元素加载方法。
可见，本发明提供了一种页面元素加载方法，包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。由此可见，本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，在滚动加载时，只有当元素进入页面可视区域时才会被加载，减少了请求次数和资源消耗，提高了页面的加载速度。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本发明公开的一种页面元素加载方法流程图；
图2为本发明公开的页面元素加载页面的列表示意图；
图3为本发明公开的虚拟滚动列表实现例图；
图4为本发明公开的一种具体的页面元素加载方法流程图；
图5为本发明提供的页面元素加载装置结构示意图；
图6为本发明提供的一种电子设备结构图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
目前，传统的滚动加载方法中，通过监听页面的滚动事件动态计算元素的位置来实现元素的加载，这种方式容易引起页面的重绘和回流，影响页面的性能和用户体验；由于页面元素的异步加载，容易引起页面的闪烁、跳动等问题；由于网络等原因，可能会出现重复请求和数据错位的情况。为此，本发明提供了一种页面元素加载方法，能够减少请求次数和资源消耗，提高页面的加载速度。
本发明实施例公开了一种页面元素加载方法，参见图1所示，该方法包括：
步骤S11：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间。
本实施例中，获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间。可以理解的是，例如图2所示，本发明依靠元素的位置判断元素加载的时机，页面中包含可滚动区域以及可视区域等，也即页面并不全部都是展示区域，因此需要确定展示位置区间在页面中的具体位置，并且获取滚动区域中每个待加载元素以及对应的元素位置信息，这里的元素位置信息可以为所述待加载元素出现在所述可滚动区域中时的初始元素位置信息。
步骤S12：实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件。
本实施例中，获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间之后，实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件。具体的，获取所述展示位置区间的加载位置信息，并基于所述元素位置信息判断所述待加载元素是否到达所述加载位置信息对应的开始加载位置；若所述待加载元素已到达所述加载位置信息对应的所述开始加载位置，则获取所述元素位置信息与所述展示位置区间之间的交叉比例；判断所述交叉比例是否大于预设交叉阈值；若所述交叉比例大于所述预设交叉阈值，则判定所述交叉状态为已交叉，并判定所述交叉状态满足所述预设元素加载条件；若所述交叉比例小于或等于所述预设交叉阈值，则判定所述交叉状态为未交叉，并判定所述交叉状态不满足所述预设元素加载条件。
可以理解的是，现有的技术方案中，虚拟列表技术的核心在于动态渲染可见区域的列表项，而不是一次性渲染整个列表，如图3所示，虚拟列表技术中包含可视区域和滚动空白区域，在可视区域中设置有startindex(可视元素开始索引)以及endindex(可视元素结束索引)。虚拟列表技术具有复杂的算法和逻辑，通常需要进行算法优化，还需要考虑滚动事件的处理、异步加载数据、列表项的复用等问题，增加了实现虚拟列表的复杂性；使用虚拟列表技术时需要重新设计业务逻辑，以处理可见区域的动态渲染和数据加载，同时用户界面设计也需要考虑列表项的复用、滚动条的正确显示等因素。Ajax Infinite Scroll技术需要进行一些额外的处理，比如处理页面元素的状态、缓存数据、处理错误等问题，对用户体验和导航性能有一定的影响，例如页面滚动加载的每个步骤可能不会生成独立的历史记录条目，使得用户在返回上一个页面时无法直接恢复到之前滚动的位置，而是回到了滚动加载的初始状态。降低用户体验和导航的灵活性；传统的滚动加载使用Ajax技术时由于数据的异步加载，搜索引擎无法获取到滚动加载的内容，从而无法有效地索引和分析页面内容，影响网站的SEO效果；滚动加载过程中可能会遇到各种错误，如网络错误、数据解析错误等。
如上述图2所示，本发明获取待加载元素与展示位置区间(即可视区域)之间的交叉区域大小，并根据交叉区域大小确定待加载元素与所述展示位置区间之间的交叉状态，并根据交叉转台判断是否对待加载元素执行预设加载操作。
步骤S13：若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
本实施例中，判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件之后，若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。具体的，对所述待加载元素执行所述预设加载操作，得到所述加载后元素，并获取基于用户展示需求生成的展示页面；将所述加载后元素动态插入至所述展示页面，以得到更新后页面，并将所述更新后页面在所述展示位置区间中进行展示。本发明只在满足所述预设元素加载条件时才加载元素，避免了不必要的资源浪费，减少网络流量消耗，同时也降低了服务器负载，还实现页面元素的实时加载，避免用户需要等待页面加载完毕后才能查看内容，从而提高了用户的体验和满意度。可以理解的是，数据加载完成后，根据业务需求更新页面内容，可以动态插入加载的数据，更新列表或其他页面元素。
本发明通过动态地控制页面资源的加载和渲染，提升页面的滚动加载速度和用户体验。应用程序包括一个客户端JavaScript库和一个服务器端组件，能够自动地管理页面资源的加载和渲染，同时根据用户的滚动行为进行调整，提高了多端开发的效率和用户的满意度。本发明的方案基于现有的intersectionObserver技术实现，可以支持更多的浏览器，不需要依赖第三方库或插件，提高了方案的可移植性和兼容性。
可见，本发明提供了一种页面元素加载方法，包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。由此可见，本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，在滚动加载时，只有当元素进入页面可视区域时才会被加载，减少了请求次数和资源消耗，提高了页面的加载速度。
参见图4所示，本发明实施例公开了一种页面元素加载方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。
步骤S21：在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数。
本实施例中，在系统初始化时创建交叉观察器对象(IntersectionObserver对象)在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数。并且在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之前，根据用户操作执行需求预先设置所述回调函数的执行次数；所述执行次数包含单次执行以及持续执行。可以理解的是，预先定义一个回调函数，用于处理待加载元素与页面可视区域的交叉状态变化的检测，在待加载元素进入或离开可视区域时触发所述回调函数。回调函数根据待加载元素与展示位置区间的交叉状态，判断是否需要加载相关数据。当待加载元素进入展示位置区间时触发数据加载操作。
在待加载元素加载完成后，回调函数根据需要决定是否继续监听目标元素的可见性变化，回调函数中可以设置只加载一次数据，或者设置持续监听目标元素的可见性等，监听次数由用户自定义，以实现滚动加载的效果。
步骤S22：将所述待加载元素与所述交叉观察器对象关联，实时监听所述待加载元素对应的所述元素位置信息。
本实施例中，在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之后，将所述待加载元素与所述交叉观察器对象关联，实时监听所述待加载元素对应的所述元素位置信息。具体的，实时监听所述待加载元素对应的所述元素位置信息，当所述元素位置信息与所述展示位置区间的边界位置信息重合时，触发所述回调函数执行所述预设加载操作。可以理解的是，将待加载元素与IntersectionObserver对象进行关联，以便监听待加载元素的可见性变化，当待加载元素进入或离开页面可视区域时触发事先定义的回调函数。
假如设置交叉容器唯一id为orderlistObserver，当前编码场景为React框架，具体代码如下：
在html页面滚动容器下方添加固定且唯一的className(类名)或Id的dom容器；页面初始化函数内通过IntersectionObserver API监听当前容器与视窗交叉区域；若视窗交叉区域值大于0，则表示当前容易开始与视窗容器交叉，则可以进行数据加载请求等操作。
步骤S23：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间。
本实施例中，获取滚动区域中每个待加载元素以及对应的元素位置信息时，可以通过异步请求加载方式或其他数据加载方式获取所述待加载元素所需的数据，实现页面元素的异步加载，只加载当前可见的元素，避免不必要的资源加载，从而大幅度减少页面加载时间，提高用户体验。
步骤S24：实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件。
步骤S25：若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
关于上述步骤S24、S25的具体内容可以参考前述实施例中公开的相应内容，在此不再进行赘述。
可见，本申请实施例通过在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数；将所述待加载元素与所述交叉观察器对象关联，实时监听所述待加载元素对应的所述元素位置信息；获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示，减少了请求次数和资源消耗，提高了页面的加载速度。
参见图5所示，本发明实施例还相应公开了一种页面元素加载装置，包括：
元素位置信息获取模块11，用于获取滚动区域中每个待加载元素以及对应的元素位置信息；
展示位置区间获取模块12，用于获取进入页面可视区域的展示位置区间；
交叉状态判断模块13，用于实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；
元素加载模块14，用于若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
可见，本发明包括：获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。由此可见，本发明通过观察元素与页面可视区域的交叉状态来动态控制元素的加载时机，在滚动加载时，只有当元素进入页面可视区域时才会被加载，减少了请求次数和资源消耗，提高了页面的加载速度。
在一些具体实施例中，所述元素位置信息获取模块11之前，具体还包括：
交叉观察器对象创建单元，用于在系统初始化时创建交叉观察器对象；
执行次数设置单元，用于根据用户操作执行需求预先设置所述回调函数的执行次数；所述执行次数包含单次执行以及持续执行；
指定单元，用于在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数；
关联单元，用于将所述待加载元素与所述交叉观察器对象关联；
元素位置监听单元，用于实时监听所述待加载元素对应的所述元素位置信息；
回调函数触发单元，用于当所述元素位置信息与所述展示位置区间的边界位置信息重合时，触发所述回调函数执行所述预设加载操作。
在一些具体实施例中，所述元素位置信息获取模块11，具体包括：
元素位置信息获取单元，用于通过异步请求加载方式获取所述待加载元素以及对应的元素位置信息。
在一些具体实施例中，所述展示位置区间获取模块12，具体包括：
展示位置区间获取单元，用于获取进入页面可视区域的展示位置区间。
在一些具体实施例中，所述交叉状态判断模块13，具体包括：
元素位置信息监听单元，用于实时监听所述元素位置信息；
加载位置信息获取单元，用于获取所述展示位置区间的加载位置信息；
待加载元素位置判断单元，用于基于所述元素位置信息判断所述待加载元素是否到达所述加载位置信息对应的开始加载位置；
交叉比例获取单元，用于若所述待加载元素已到达所述加载位置信息对应的所述开始加载位置，则获取所述元素位置信息与所述展示位置区间之间的交叉比例；
交叉比例判断单元，用于判断所述交叉比例是否大于预设交叉阈值；
已交叉判定单元，用于若所述交叉比例大于所述预设交叉阈值，则判定所述交叉状态为已交叉；
条件满足判定单元，用于判定所述交叉状态满足所述预设元素加载条件；
未交叉判定单元，用于若所述交叉比例小于或等于所述预设交叉阈值，则判定所述交叉状态为未交叉；
条件不满足判定单元，用于判定所述交叉状态不满足所述预设元素加载条件。
在一些具体实施例中，所述元素加载模块14，具体包括：
加载单元，用于若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作，得到所述加载后元素；
展示页面获取单元，用于获取基于用户展示需求生成的展示页面；
元素插入单元，用于将所述加载后元素动态插入至所述展示页面，以得到更新后页面；
更新后页面展示单元，用于将所述更新后页面在所述展示位置区间中进行展示。
进一步的，本发明实施例还提供了一种电子设备。图6是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本发明的使用范围的任何限制。
图6为本发明实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的页面元素加载方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。
本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本发明技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。
其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的页面元素加载方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
进一步的，本发明实施例还公开了一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现前述任一实施例公开的页面元素加载方法步骤。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上对本发明所提供的一种页面元素加载方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
Claims (10)
1.一种页面元素加载方法，其特征在于，包括：
获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间；
实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；
若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
2.根据权利要求1所述的页面元素加载方法，其特征在于，所述获取滚动区域中每个待加载元素以及对应的元素位置信息，获取进入页面可视区域的展示位置区间之前，还包括：
在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数。
3.根据权利要求2所述的页面元素加载方法，其特征在于，所述在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之前，还包括：
根据用户操作执行需求预先设置所述回调函数的执行次数；所述执行次数包含单次执行以及持续执行。
4.根据权利要求2所述的页面元素加载方法，其特征在于，所述在系统初始化时创建交叉观察器对象，并在所述交叉观察器对象中指定待观察的所述待加载元素以及回调函数之后，还包括：
将所述待加载元素与所述交叉观察器对象关联；
实时监听所述待加载元素对应的所述元素位置信息，当所述元素位置信息与所述展示位置区间的边界位置信息重合时，触发所述回调函数执行所述预设加载操作。
5.根据权利要求4所述的页面元素加载方法，其特征在于，所述触发所述回调函数执行所述预设加载操作之后，还包括：
通过异步请求加载方式获取所述待加载元素。
6.根据权利要求1所述的页面元素加载方法，其特征在于，所述判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件，包括：
获取所述展示位置区间的加载位置信息，并基于所述元素位置信息判断所述待加载元素是否到达所述加载位置信息对应的开始加载位置；
若所述待加载元素已到达所述加载位置信息对应的所述开始加载位置，则获取所述元素位置信息与所述展示位置区间之间的交叉比例；
判断所述交叉比例是否大于预设交叉阈值；
若所述交叉比例大于所述预设交叉阈值，则判定所述交叉状态为已交叉，并判定所述交叉状态满足所述预设元素加载条件；
若所述交叉比例小于或等于所述预设交叉阈值，则判定所述交叉状态为未交叉，并判定所述交叉状态不满足所述预设元素加载条件。
7.根据权利要求1至6任一项所述的页面元素加载方法，其特征在于，所述对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示，包括：
对所述待加载元素执行所述预设加载操作，得到所述加载后元素，并获取基于用户展示需求生成的展示页面；
将所述加载后元素动态插入至所述展示页面，以得到更新后页面，并将所述更新后页面在所述展示位置区间中进行展示。
8.一种页面元素加载装置，其特征在于，包括：
元素位置信息获取模块，用于获取滚动区域中每个待加载元素以及对应的元素位置信息；
展示位置区间获取模块，用于获取进入页面可视区域的展示位置区间；
交叉状态判断模块，用于实时监听所述元素位置信息，并判断所述元素位置信息与所述展示位置区间之间的交叉状态是否满足预设元素加载条件；
元素加载模块，用于若所述元素位置信息与所述展示位置区间之间的所述交叉状态满足所述预设元素加载条件，则对所述待加载元素执行预设加载操作并将加载后元素在所述展示位置区间中进行展示。
9.一种电子设备，其特征在于，包括：
存储器，用于保存计算机程序；
处理器，用于执行所述计算机程序，以实现如权利要求1至7任一项所述的页面元素加载方法的步骤。
10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的页面元素加载方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311451031.4A CN117389611A (zh) | 2023-11-02 | 2023-11-02 | 一种页面元素加载方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311451031.4A CN117389611A (zh) | 2023-11-02 | 2023-11-02 | 一种页面元素加载方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117389611A true CN117389611A (zh) | 2024-01-12 |
Family
ID=89466489
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311451031.4A Pending CN117389611A (zh) | 2023-11-02 | 2023-11-02 | 一种页面元素加载方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117389611A (zh) |
-
2023
- 2023-11-02 CN CN202311451031.4A patent/CN117389611A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10013502B1 (en) | Preloading resources of a web page | |
| US8949739B2 (en) | Creating and maintaining images of browsed documents | |
| US10936795B2 (en) | Techniques for use of snapshots with browsing transitions | |
| US8910070B2 (en) | Tab pages and bookmark toolbars in a browser | |
| US20120060083A1 (en) | Method for Use in Association With A Multi-Tab Interpretation and Rendering Function | |
| CN106716351B (zh) | 显示网页的方法和电子设备 | |
| EP2755145A1 (en) | Webpage browsing method and device, and storage medium | |
| US20120240063A1 (en) | Web site sectioning for mobile web browser usability | |
| CN107045546B (zh) | 一种网页处理方法、装置及智能终端 | |
| US11113455B2 (en) | Web page rendering on wireless devices | |
| CN112612546A (zh) | 页面加载方法、装置、电子设备和存储介质 | |
| CN107391534B (zh) | 页面显示、页面文件返回方法及装置、计算机存储介质 | |
| CN110781427A (zh) | 一种首屏时间的计算方法、装置、设备和存储介质 | |
| CN111698365A (zh) | 一种信息展示的方法和装置 | |
| CN108664191B (zh) | 系统访问方法及装置 | |
| WO2015014262A1 (en) | Method, system and terminal for performing search in browser | |
| CN113626113B (zh) | 一种页面渲染方法和装置 | |
| EP2998885A1 (en) | Method and device for information search | |
| CN116521629A (zh) | 文件可视化方法、装置及设备 | |
| CN117389611A (zh) | 一种页面元素加载方法、装置、设备及存储介质 | |
| CN112541140A (zh) | 一种列表加载方法、终端设备、电子设备及存储介质 | |
| CN112130908A (zh) | 设置用户引导的方法及装置 | |
| CN110622135B (zh) | 在涉及欠佳网络条件的情形下提供内容项的系统和方法 | |
| KR101132220B1 (ko) | 캐쉬(ｃａｃｈｅ)를 이용하여 웹 페이지를 제공하기 위한 방법, 시스템 및 컴퓨터 판독 가능한 기록 매체 | |
| CN113961298A (zh) | 一种页面切换方法、装置、设备及介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |