基于Intersection Observer的页面多形式懒加载方法、系统

摘要

本公开实施例公开了一种基于IntersectionObserver的页面多形式懒加载方法、系统；其中方法包括：建立多形式模式，并进行配置分发，其中，多形式模式包括水平滚动模式、垂直滚动模式和混合滚动模式；水平滚动模式的标识属性配置为horizontal；垂直滚动模式的标识属性配置为vertical；混合滚动模式的标识属性配置为mixins；基于三种标识属性，动态生成三种可视区域，并创建对应的滚动方向监测；创建IntersectionObserver实例；开启模块元素监听；基于监听信息进行逻辑中断处理或销毁处理；该方法能够实现可配置生成对应不同场景下以及独特混合交互区域场景下的使用需求，更加方便简易；同时更优化实现页面的懒加载，减少传统实现方法的一些繁琐的监听滚动以及防抖节流操作。

说明书

技术领域

本公开涉及数据加载技术领域，尤其涉及一种基于Intersection Observer的页面多形式懒加载方法、系统。

背景技术

项目页面中存在可视区域设计划分有限的情况下，且静态数据或者接口请求的CDN数据较大进行渲染加载图片页面列表较长(即长列表)的场景中，初始化将对应数据全部进行渲染加载，不在可视区域内的资源会进行不必要的加载，造成性能的浪费、初始白屏问题、首屏初始化加载的速度缓慢。因此为了给客户更好的客户体验，通常使用懒加载进行懒加载，简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载来进行解决这些问题。在滚动屏幕之前，可视区域之外的图片不会进行加载，在滚动屏幕时才加载；这样使得网页的加载速度更快，减少了服务器的负载。

此外通常情况下，适配懒加载的可视区域设计为垂直方向，即在页面进行向上滑动查看更多数据资源，而水平方向下也会产生数据资源过多的情况，即通过可视区域的左右滑动进行查看。当同时设计垂直方向和水平方向两部分可视区域需要实现懒加载的情况下，如何更好的进行是当下缺乏的。

发明内容

有鉴于此，本公开实施例提供了一种基于Intersection Observer的页面多形式懒加载方法、系统，能够实现可配置生成对应不同场景下以及独特混合交互区域场景下的使用需求，更加方便简易；同时更优化实现页面的懒加载，减少传统实现方法的一些繁琐的监听滚动以及防抖节流操作。

第一方面，本公开实施例提供了一种基于Intersection Observer的页面多形式懒加载方法，包括：

建立多形式模式，并进行配置分发；

所述多形式模式包括水平滚动模式、垂直滚动模式和混合滚动模式；所述水平滚动模式的标识属性配置为horizontal；所述垂直滚动模式的标识属性配置为vertical；所述混合滚动模式的标识属性配置为mixins；

基于三种标识属性，动态生成三种可视区域，并创建对应的滚动方向监测；

创建Intersection Observer实例；

开启模块元素监听；

基于监听信息进行逻辑中断处理或销毁处理。

可选的，创建的所述滚动方向监测包括第一监测模块、第二监测模块和第三监测模块；

所述第一监测模块配置为对默认常规下的垂直方向滚动进行监测；

所述第二监测模块配置为通过预设可视区容器进行flex布局配置，对水平分布滚动进行监测；

所述第三监测模块配置为进行垂直方向DOM结构监测，当垂直方向单项结构进入可视区域后进行懒加载，当垂直项进行完整展示后，自动进行横向滑动以展示隐藏的水平方向子元素。

可选的，所述混合滚动模式中包括垂直方向子目标元素以及所述水平方向子元素，且所述垂直方向子目标元素、所述水平方向子元素均为与可视区域交叉汇合后触发具体单向资源的加载。

可选的，基于三种标识属性，动态生成Horizontal基础属性合集、vertical基础属性合集和mixins基础属性合集。

可选的，所述Horizontal基础属性集合包括与水平滚动匹配的root、rootMargin和thresholds；

所述vertical基础属性集合包括与垂直滚动匹配的root、rootMargin和thresholds；

所述mixins基础属性集合包括与混合滚动匹配的root、rootMargin和thresholds。

可选的，所述Intersection Observer实例的参数配置有回调函数和配置属性；

所述配置属性由所述Horizontal基础属性集合、所述vertical基础属性集合以及所述mixins基础属性集合构成。

可选的，所述模块元素的监听方法为：

基于所述Intersection Observer实例，调用observe方法，传入目标DOM节点对象参数，开启对模块元素的监听；

所述模块元素包括若干目标元素，所述目标元素为带src属性的DOM元素的onload事件。

第二方面，本公开实施例还提供了一种基于Intersection Observer的页面多形式懒加载系统，包括：

创建模块，配置为进行多形式模式建立；所述多形式模式包括水平滚动模式、垂直滚动模式和混合滚动模式；所述水平滚动模式的标识属性配置为horizontal；所述垂直滚动模式的标识属性配置为vertical；所述混合滚动模式的标识属性配置为mixins；

动态生成模块，配置为动态生成三种可视区域，并创建对应的滚动方向监测；

实例化模块，配置为创建Intersection Observer实例；

监听模块，配置为对模块元素进行监听；

处理模块，配置为基于监听信息进行逻辑中断处理或销毁处理。

第三方面，本公开实施例还提供了一种电子设备，采用如下技术方案：

所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行以上任一所述的基于IntersectionObserver的页面多形式懒加载方法。

第四方面，本公开实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行以上任一所述的基于IntersectionObserver的页面多形式懒加载方法。

本公开实施例提供的基于Intersection Observer的页面多形式懒加载方法，实现可配置生成对应不同场景下以及独特混合交互区域场景下的使用需求，更加方便简易；同时更优化实现页面的懒加载，减少传统实现方法的一些繁琐的监听滚动以及防抖节流操作。

上述说明仅是本公开技术方案的概述，为了能更清楚了解本公开的技术手段，而可依照说明书的内容予以实施，并且为让本公开的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图，详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本公开实施例提供的基于Intersection Observer的页面多形式懒加载方法的逻辑流程图。

图2为本公开实施例提供的垂直滚动模式下的显示示意图。

图3为本公开实施例提供的水平滚动模式下的显示示意图。

图4为本公开实施例提供的混合滚动模式下的显示示意图。

图5为本公开实施例提供的一种电子设备的原理框图。

具体实施方式

下面结合附图对本公开实施例进行详细描述。

应当明确，以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目各方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。

还需要说明的是，以下实施例中所提供的图示仅以示意方式说明本公开的基本构想，图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

参照图1，本申请的第一方面提供了一种基于Intersection Observer的页面多形式懒加载方法，具体包括以下步骤：

S100，建立多形式模式；具体地，在API兼容的当前环境中配置多形式模式以供用户选择，并获得对应标识属性，然后配置分布并进行调试。

其中，多形式模式包括水平滚动模式、垂直滚动模式和混合滚动模式，即为水平滚动、垂直滚动、混合滚动这三种基础展示形式。

水平滚动模式的标识属性配置为horizontal，即通过水平方向滑动可以查看更多内容。

垂直滚动模式的标识属性配置为vertical，即通过常规垂直方向滑动可以查看更多内容。

混合滚动模式的标识属性配置为mixins，即可以实现垂直滚动区域与横向滚动区域混合懒加载。

基于三种标识属性，动态生成Horizontal基础属性合集、vertical基础属性合集和mixins基础属性合集；Horizontal基础属性集合包括与水平滚动匹配的root、rootMargin和thresholds。

vertical基础属性集合包括与垂直滚动匹配的root、rootMargin和thresholds。

mixins基础属性集合包括与混合滚动匹配的root、rootMargin和thresholds。

以mixins基础属性集合为例进行详细说明，基于三种标识属性，动态配置生成option对象中root属性，创建所监听对象的具体祖先元素(element)，该属性配置可通过业务场景进行传递，当没有具体指定的可视区域时,则会默认使用顶级文档的视窗。

另option对象中，除可配置root关键属性外，仍可支持配置rootMargin和thresholds两个属性，其中rootMargin属性形式与css margin属性相似，包含默认值”0px0px 0px 0px”，顾名思义，即在根边界盒与目标元素边界交叉区域会进行添加配置的偏移量属性，可以有效的缩小或扩大根的判定范围从而满足计算需要。实际关键应用为:当配置边距之后，目标元素与边距临界进行交叉汇合，但此时虽然还未进入可视区域时，即完成了加载，实现了预加载的效果。

Thresholds，一个包含阈值的列表,按升序排列,列表中的每个阈值都是监听对象的交叉区域与边界区域的比率，取值范围为[0,1],表示触发前应可见的百分比，也可以是一个数字数组，以创建多个触发点，也被称之为阈值。

S200，创建三种可视区域以及对应的滚动方向监测。

具体地，基于三种标识属性，动态生成三种可视区域，并创建对应的滚动方向监测。

创建的滚动方向监测包括第一监测模块、第二监测模块和第三监测模块；第一监测模块配置为对默认常规下的垂直方向滚动进行监测；第二监测模块配置为通过预设可视区容器进行flex布局配置，对水平分布滚动进行监测。

第三监测模块配置为进行垂直方向DOM结构监测，当垂直方向单项结构进入可视区域后进行懒加载，当垂直项进行完整展示后，自动进行横向滑动以展示隐藏的水平方向子元素。

混合滚动模式中包括垂直方向子目标元素以及水平方向子元素，且垂直方向子目标元素、水平方向子元素均为与可视区域交叉汇合后触发具体单向资源的加载。

即通过mixins的属性配置进行分发基础结构展示框架，实现了对其它两种配置的融合；混合滚动模式即为混合滚动交互区域懒加载，具体为垂直方向首先进行滚动展现出目前元素DOM结构后，垂直方向单项结构进入可视区域后即进行懒加载获取CDN资源元素,垂直项进行完整展示后，此时可进行横向滑动进行查看更多水平隐藏子元素；其中，混合结构下，垂直方向、水平方向下子目标元素都是与可视窗区域进行交叉汇合后开始具体单项资源的加载。

这个过程也可能会发生所需资源未找到的情况，那么此时便会依次向其上一级缓存服务器继续请求查询，直至追溯到网站的根服务器并将资源拉取到本地。

S300，创建Intersection Observer实例，具体为对Intersection Observer进行实例化，获得该Intersection Observerr实例。

Intersection Observer实例的参数配置有回调函数和配置属性，封装抽离定义当元素的可见性变化时候回调函数。

配置属性由Horizontal基础属性集合、vertical基础属性集合以及mixins基础属性集合构成。

S400，开启模块元素监听。

模块元素的监听方法为：基于Intersection Observer实例，调用observe方法，传入目标DOM节点对象参数，开启对模块元素的监听，封装定义的回调函数中对entries进行循环遍历，获取到目标元素。

模块元素包括若干目标元素，目标元素为带src属性的DOM元素的onload事件。

例如img标签元素，获取观察者返回的对象，根据该对象当中的isIntersecting是否为true进行判断是否进入了可视区域，对应离开可视区域时该属性会更新为false。

S500，基于监听信息进行逻辑中断处理或销毁处理。

通过isIntersecting为true时，触发目标元素进入可视区域的相关逻辑操作处理。当目标元素进入可视区域，例如将目标元素img标签的src属性进行填充更新，以及对应dom的渲染，操作完成时，通过unobserve中断观察节省性能，以及页面生命周期销毁时，断开所有观察。

具体地，参照图2，图示为垂直滚动模式下的显示示意图，以非可视区位于可视区域下侧为例，垂直滚动模式下的懒加载是通过可视区加载，即仅加载用户可以看到的区域；根据位于非可视区域的目标元素向上滑动至与可视区域的边距临界进行交叉汇合时的交叉区域所占的百分比达到阈值时，动态触发加载。

参照图3，图示为水平滚动模式下的显示示意图，以非可视区位于可视区域右侧为例，根据位于非可视区域的目标元素向左滑动至与可视区域的边距临界进行交叉汇合时的交叉区域所占的百分比达到阈值时，动态触发加载。

参照图4，图示为混合滚动模式下的显示示意图，具体为垂直方向首先进行向上滚动展现出目前元素DOM结构后，垂直方向单项结构进入可视区域后即进行懒加载获取CDN资源元素，垂直项进行完整展示后，此时可进行横向向左滑动进行查看更多水平隐藏子元素。

本申请的懒加载方式是通过可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离便开始加载，这样能保证用户拉下时正好能看到图片。

具体地，在HTML页面将img元素的src属性先用占位图替换；当图片出现在可视区域时，再为img的src属性赋予真正路径，在本申请中，是进行src属性的填充更新以及对应dom的渲染。

通过本申请公开的基于Intersection Observer的页面多形式懒加载方法，1)可配置化，具体地通过模块自主决定可配置不同形式懒加载区域；2)懒加载基于Intersection Observer实现方式基础上结合可配置化融合匹配分发机制，实现形式更加优雅且杜绝了性能的浪费；3)可视区域在满足基础垂直方向以及横向滑动加载更多内容外，增加支持独有混合交互滚动区域场景下的懒加载，功能更全，页面懒加载更加优化，提高监听效率。

本申请的第二方面提供了一种基于Intersection Observer的页面多形式懒加载系统，包括：

创建模块，配置为进行多形式模式建立；所述多形式模式包括水平滚动模式、垂直滚动模式和混合滚动模式；所述水平滚动模式的标识属性配置为horizontal；所述垂直滚动模式的标识属性配置为vertical；所述混合滚动模式的标识属性配置为mixins；

动态生成模块，配置为动态生成三种可视区域，并创建对应的滚动方向监测；

实例化模块，配置为创建Intersection Observer实例；

监听模块，配置为对模块元素进行监听；

处理模块，配置为基于监听信息进行逻辑中断处理或销毁处理。

通过本申请公开的方法可以实现通过Intersection ObserverAPI进行懒加载实现方法的优化；实现动态配置不同方向形式可视区域的展示，本申请中增加了独有设计可支持混合滚动区域的懒加载，垂直方向上进行滚动加载更多的同时，横向区域也可以进行对应懒加载设计，这样垂直和水平方向上都可以进行滚动；交叉混合的形式可以使得内容加载区域形式更加的新颖和更多的空间进行承载内容元素。

本发明通过使用Intersection ObserverAPI，提供了一种异步检测目标元素与祖先元素或viewport相交情况变化的方法。在此基础上进行封装配置适配不同场景下设计可视区域展示的形式，封装完成之后，在页面模块端进行使用即可通过配置属性horizontal/vertica/mixins实现调用。可满足纵向可视区上下滑动、水平方向可视区左右滑动以及混合垂直、水平方向可滚动区域展示懒加载实现不同设计形式下内容无限滚动的效果。

根据本公开实施例的电子设备包括存储器和处理器。该存储器用于存储非暂时性计算机可读指令。具体地，存储器可以包括一个或多个计算机程序产品，该计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。该易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。该非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。

该处理器可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其它形式的处理单元，并且可以控制电子设备中的其它组件以执行期望的功能。在本公开的一个实施例中，该处理器用于运行该存储器中存储的该计算机可读指令，使得该电子设备执行前述的本公开各实施例的基于Intersection Observer的页面多形式懒加载方法全部或部分步骤。

本领域技术人员应能理解，为了解决如何获得良好用户体验效果的技术问题，本实施例中也可以包括诸如通信总线、接口等公知的结构，这些公知的结构也应包含在本公开的保护范围之内。

如图5为本公开实施例提供的一种电子设备的结构示意图。其示出了适于用来实现本公开实施例中的电子设备的结构示意图。图5示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图5所示，电子设备可以包括处理装置(例如中央处理器、图形处理器等)，其可以根据存储在只读存储器(ROM)中的程序或者从存储装置加载到随机访问存储器(RAM)中的程序而执行各种适当的动作和处理。在RAM中，还存储有电子设备操作所需的各种程序和数据。处理装置、ROM以及RAM通过总线彼此相连。输入/输出(I/O)接口也连接至总线。

通常，以下装置可以连接至I/O接口：包括例如传感器或者视觉信息采集设备等的输入装置；包括例如显示屏等的输出装置；包括例如磁带、硬盘等的存储装置；以及通信装置。通信装置可以允许电子设备与其他设备(比如边缘计算设备)进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置从网络上被下载和安装，或者从存储装置被安装，或者从ROM被安装。在该计算机程序被处理装置执行时，执行本公开实施例的基于Intersection Observer的页面多形式懒加载方法的全部或部分步骤。

有关本实施例的详细说明可以参考前述各实施例中的相应说明，在此不再赘述。

根据本公开实施例的计算机可读存储介质，其上存储有非暂时性计算机可读指令。当该非暂时性计算机可读指令由处理器运行时，执行前述的本公开各实施例的基于Intersection Observer的页面多形式懒加载方法的全部或部分步骤。

上述计算机可读存储介质包括但不限于：光存储介质(例如：CD－ROM和DVD)、磁光存储介质(例如：MO)、磁存储介质(例如：磁带或移动硬盘)、具有内置的可重写非易失性存储器的媒体(例如：存储卡)和具有内置ROM的媒体(例如：ROM盒)。

有关本实施例的详细说明可以参考前述各实施例中的相应说明，在此不再赘述。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

在本公开中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序，本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

另外，如在此使用的，在以“至少一个”开始的项的列举中使用的“或”指示分离的列举，以便例如“A、B或C的至少一个”的列举意味着A或B或C，或AB或AC或BC，或ABC(即A和B和C)。此外，措辞“示例的”不意味着描述的例子是优选的或者比其他例子更好。

还需要指出的是，在本公开的系统和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

可以不脱离由所附权利要求定义的教导的技术而进行对在此所述的技术的各种改变、替换和更改。此外，本公开的权利要求的范围不限于以上所述的处理、机器、制造、事件的组成、手段、方法和动作的具体方面。可以利用与在此所述的相应方面进行基本相同的功能或者实现基本相同的结果的当前存在的或者稍后要开发的处理、机器、制造、事件的组成、手段、方法或动作。因而，所附权利要求包括在其范围内的这样的处理、机器、制造、事件的组成、手段、方法或动作。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。