CN115982498A - 一种组件加载方法、装置及介质 - Google Patents

Abstract

本申请公开了一种组件加载方法、装置及介质，涉及web前端开发技术领域。当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

Description

一种组件加载方法、装置及介质

技术领域

本申请涉及web前端开发技术领域，特别是涉及一种组件加载方法、装置及介质。

背景技术

Web前端开发技术包括三个要素：超文本标记语言(Hyper Text MarkupLanguage，HTML)、层叠样式表单(Cascading Style Sheet，CSS)和直译式脚本语言(JavaScript，JS)。随着互联网技术的普及，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于JavaScript为标志的前端技术实现的。

目前针对一些定制的网站页面，需要根据用户需求实现页面中的多个交互效果。然而现有的方式是结合前端框架，即如果前端主流框架中存在某个交互组件，则需要引入整个框架的JS和CSS，这样容易资源浪费，影响加载效率，加大了服务器的开销；同时主流框架中都不包含特殊的交互效果，不能满足开发的需要。此外，若结合第三方插件实现页面中的多个交互效果，则需要引入多个第三方插件，这样会影响加载效率，造成代码冗余，也不便于维护。

鉴于上述问题，如何更好地实现网站页面中的多个交互效果，是该领域技术人员亟待解决的问题。

发明内容

本申请的目的是提供一种组件加载方法、装置及介质，以更好地实现网站页面中的多个交互效果。

为解决上述技术问题，本申请提供一种组件加载方法，包括：

当用户通过浏览器访问web网站的页面时，监测所述页面的文档对象模型元素；

判断所述文档对象模型元素是否在所述浏览器的可视区域内；

若是，则加载组件库中所述文档对象模型元素对应的组件；

其中，所述组件库中预先封装多个具有交互功能的所述组件，并分别定义了各所述组件对应的open属性。

优选地，所述判断所述文档对象模型元素是否在所述浏览器的可视区域内包括：

获取所述页面的滚动条的滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离；

根据所述滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离判断所述文档对象模型元素是否在所述浏览器的可视区域内。

优选地，所述根据所述滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离判断所述文档对象模型元素是否在所述浏览器的可视区域内包括：

判断是否所述文档对象模型元素到所述页面顶部的距离与所述文档对象模型元素的高度的和大于所述滚动距离，且所述滚动距离与所述可视区域的高度的和大于所述文档对象模型元素到所述页面顶部的距离；

若是，则确定所述文档对象模型元素在所述浏览器的所述可视区域内。

优选地，所述加载组件库中所述文档对象模型元素对应的组件包括：

将所述组件的所述open属性设置为true，以加载所述组件。

优选地，在所述判断所述文档对象模型元素是否在所述浏览器的可视区域内之前，在所述监测所述页面的文档对象模型元素之后，还包括：

判断所述文档对象模型元素是否在所述页面内；

若是，则进入所述判断所述文档对象模型元素是否在所述浏览器的可视区域内的步骤；

若否，则在所述页面中点击所述组件对应的事件后，进入所述判断所述文档对象模型元素是否在所述浏览器的可视区域内的步骤。

优选地，在所述加载组件库中所述文档对象模型元素对应的组件之后，还包括：

生成所述组件的加载日志。

优选地，在所述生成所述组件的加载日志之后，还包括：

当所述浏览器被关闭时，删除所述加载日志。

为解决上述技术问题，本申请还提供一种组件加载装置，包括：

监测模块，用于当用户通过浏览器访问web网站的页面时，监测所述页面的文档对象模型元素；

判断模块，用于判断所述文档对象模型元素是否在所述浏览器的可视区域内；若是，则触发加载模块；

所述加载模块，用于加载组件库中所述文档对象模型元素对应的组件；

其中，所述组件库中预先封装多个具有交互功能的所述组件，并分别定义了各所述组件对应的open属性。

为解决上述技术问题，本申请还提供另一种组件加载装置，包括：

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

处理器，用于执行所述计算机程序时实现上述的组件加载方法的步骤。

为解决上述技术问题，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的组件加载方法的步骤。

本申请所提供的组件加载方法，当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

此外，本申请实施例还提供了一种组件加载装置及介质，效果同上。

附图说明

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

图1为本申请实施例提供的一种组件加载方法的流程图；

图2为本申请实施例提供的一种组件加载装置的示意图；

图3为本申请实施例提供的另一种组件加载装置的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本申请保护范围。

本申请的核心是提供一种组件加载方法、装置及介质，以更好地实现网站页面中的多个交互效果。

为了使本技术领域的人员更好地理解本申请方案，下面结合附图和具体实施方式对本申请作进一步的详细说明。

World Wide Web(简称WEB)是随着因特网(Internet)的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。Web前端开发技术包括三个要素：HTML、CSS和JavaScript。随着互联网技术的普及，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于JavaScript为标志的前端技术实现的。现在web前端开发出令用户体验很好的网站页面，不仅仅需要实现静态页面，页面上的交互效果也很重要；而现在前端能够实现的交互效果越来越丰富，也越来越复杂，因此使用封装原生JavaScript方法和属性的文件的第三方插件，能够让开发者的使用更为方便，提高开发者的工作效率。

目前，定制的网站页面，需要根据用户需求在页面中设置多个交互效果。现有的交互效果设置方式需要结合前端框架，即如果前端主流框架中存在某个交互组件，则需要引入整个框架的JS和CSS,这样容易资源浪费，影响加载效率，加大了服务器的开销；同时主流框架中都不包含特殊的交互效果，例如在线编辑、绘图工具、excel表格编辑等，而这些特殊交互效果是客户的需求，这样需再引入其他插件。然而一些插件样式并不灵活，不能满足开发的需要。

当页面结合第三方插件时，会影响页面的加载效率。一般来说一个页面的加载顺序是从上往下，虽然把JS文件放在head标签里解决了浏览器可能会出现的短暂的“白板”现象，但是多个JS文件引入容易造成代码冗余，也不便于维护。因此，本申请实施例提供了一种交互组件的加载方法，以满足用户对于页面交互效果的需求，同时降低代码冗余和维护复杂度，更好地实现网站页面中的多个交互效果。图1为本申请实施例提供的一种组件加载方法的流程图。如图1所示，方法包括：

S10：当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素。

具体地，当用户通过浏览器访问web网站的页面，打开页面或者在页面上下或左右滑动时，监测页面的文档对象模型(Document Object Model，DOM)元素。文档对象模型是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(Application Programming Interface，API)，可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。在本实施例中，文档对象模型元素与具有交互功能的组件相对应。因此为了实现组件的加载，则需要对文档对象模型元素进行监测。

S11：判断文档对象模型元素是否在浏览器的可视区域内；若是，则进入步骤S12。

浏览器的可视区域即用户浏览的页面的可见范围。可以理解的是，一个网站页面的大小一般大于浏览器的可视区域大小，用户需通过滚动页面的方式才能在浏览器的可视区域内查看整个页面。而在一个页面中，其文档对象模型元素不一定在浏览器的可视区域内，因此需要进一步判断文档对象模型元素是否在浏览器的可视区域内。本实施例中对于判断文档对象模型元素是否在浏览器的可视区域的具体过程不做限制，根据具体的实施情况而定。以下给出一种优选的实施例：

在具体实施中，判断文档对象模型元素是否在浏览器的可视区域内，可通过获取页面的滚动条的滚动距离(scrollTop)、可视区域的高度(clientHeight)、文档对象模型元素的高度(content.offsetHeight)和文档对象模型元素到页面顶部的距离(content.offsetTop)；进一步根据滚动距离、可视区域的高度、文档对象模型元素的高度和文档对象模型元素到页面顶部的距离判断文档对象模型元素是否在浏览器的可视区域内。

具体地，可通过window.addEventListener监听(content.offsetTop+content.offsetHeight>scrollTop)&&(content.offsetTop<scrollTop+clientHeight)的值；即判断是否文档对象模型元素到页面顶部的距离与文档对象模型元素的高度的和大于滚动距离，且滚动距离与可视区域的高度的和大于文档对象模型元素到页面顶部的距离；若是，则确定文档对象模型元素在浏览器的可视区域内。若否，则确定文档对象模型元素不在浏览器的可视区域内。

S12：加载组件库中文档对象模型元素对应的组件。

其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。

进一步地，当确定文档对象模型元素在浏览器的可视区域内时，加载组件库中文档对象模型元素对应的组件。

需要注意的是，组件库中预先封装多个具有交互功能的组件。在组件库的封装过程中，将各个组件，包括静态页面，页面样式，逻辑功能封装到不同JS中，以组件名命名。组件可包括轮播图、日期选择器、下拉框、分页、弹出框、三级联动、树状结构等，可以直接与用户交互，可以直接渲染；对于文档、绘图可在线编辑，可动态编辑页面。

具体地，对于轮播图，通过HTML与CSS实现轮播图的静态页面及组件样式，通过JS实现轮播图的分页及向前和向后的轮播，然后封装到swiper.js文件中。对于日期选择器，通过HTML与CSS实现日期组件的布局与样式，通过JS实现日期组件的年月日选择功能，然后封装到date.js文件中。对于下拉框，通过HTML/CSS实现下拉框的布局与样式，通过JS实现下拉框选中单个、多个和搜素选中功能，然后封装到select.js文件中。对于弹出框，通过HTML/CSS实现弹出框的布局与样式，通过JS实现弹出框的弹出与退出功能，然后封装到model.js文件中。对于三级联动，通过HTML/CSS实现三级联动的布局与样式，JS通过接口文档实现省市县三级联动功能，然后封装到dispicker.js文件中。对于树状结构，通过HTML/CSS实现三级联动的布局与样式，JS通过接口文档返回数据，实现tree树状结构，然后封装到tree.js文件中。对于文档在线编辑，通过HTML/CSS实现布局与样式，通过JS实现在线编辑功能，然后封装到word.js文件中。对于绘图，通过HTML/CSS实现布局与样式，通过JS实现流程图等拖拽功能，然后封装到canvas.js文件中。

此外，在组件库中还分别定义了各组件对应的open属性。HTML中的open属性用于指示是否在页面加载时显示详细信息。这是一个布尔属性。如果指定了该属性，即说明对话窗口是可用的，用户可以与它进行交互。具体地，在组件库基础文件index.js中定义一个变量，用于定义各个组件的open属性，并根据属性值true或false判断是否加载组件。如果为true，则动态引入加载对应的组件，如果为false，则不需要加载组件。因此，加载组件库中文档对象模型元素对应的组件，具体将组件的open属性设置为true，以加载组件，从而实现了组件的按需加载。

本实施例中，当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

在具体实施中，当用户访问网站页面时，可能会存在页面中并不包含文档对象模型元素的情况。因此在上述实施例的基础上，作为一种优选的实施例，在判断文档对象模型元素是否在浏览器的可视区域内之前，在监测页面的文档对象模型元素之后，还包括：

判断文档对象模型元素是否在页面内；

若是，则进入判断文档对象模型元素是否在浏览器的可视区域内的步骤；

若否，则在页面中点击组件对应的事件后，进入判断文档对象模型元素是否在浏览器的可视区域内的步骤。

具体地，当确定文档对象模型元素在页面内时，进入判断文档对象模型元素是否在浏览器的可视区域内的步骤，以进行上述实施例中组件加载的全部过程。而当确定文档对象模型元素不在页面内时，需在页面中点击组件对应的事件后，进入判断文档对象模型元素是否在浏览器的可视区域内的步骤。例如需要点击“弹出框”组件按钮后才进一步展示交互效果，交互效果的展示需进行上述组件的加载过程，进一步实现了组件的按需加载。

此外，为了提高页面中组件的加载速度，在加载组件库中文档对象模型元素对应的组件之后，还包括：

生成组件的加载日志。

在具体实施中，在加载组件库中文档对象模型元素对应的组件之后，进一步生成组件的加载日志。加载日志中可记录组件在页面中的加载位置和加载过程，当用户在访问页面中再次滚动页面至组件对应的加载位置时，可根据加载日志直接对组件进行加载，提高了组件的加载速度。

同时，为了释放浏览器所占用的缓存空间，在生成组件的加载日志之后，当浏览器被关闭时，删除加载日志，以释放缓存空间。

在上述实施例中，对于组件加载方法进行了详细描述，本申请还提供组件加载装置对应的实施例。需要说明的是，本申请从两个角度对装置部分的实施例进行描述，一种是基于功能模块的角度，另一种是基于硬件结构的角度。

图2为本申请实施例提供的一种组件加载装置的示意图。如图2所示，组件加载装置包括：

监测模块10，用于当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素。

判断模块11，用于判断文档对象模型元素是否在浏览器的可视区域内；若是，则触发加载模块。

加载模块12，用于加载组件库中文档对象模型元素对应的组件。

其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。

本实施例中，组件加载装置包括监测模块、判断模块和加载模块。组件加载装置能够实现的方法与上述组件加载方法相同。当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

图3为本申请实施例提供的另一种组件加载装置的示意图。如图3所示，组件加载装置包括：

存储器20，用于存储计算机程序。

处理器21，用于执行计算机程序时实现如上述实施例中所提到的组件加载的方法的步骤。

本实施例提供的组件加载装置可以包括但不限于智能手机、平板电脑、笔记本电脑或台式电脑等。

其中，处理器21可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(Digital Signal Processor，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称中央处理器(CentralProcessing Unit，CPU)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以在集成有图形处理器(Graphics Processing Unit，GPU)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器21还可以包括人工智能(Artificial Intelligence，AI)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器20可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器20至少用于存储以下计算机程序201，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例公开的组件加载方法的相关步骤。另外，存储器20所存储的资源还可以包括操作系统202和数据203等，存储方式可以是短暂存储或者永久存储。其中，操作系统202可以包括Windows、Unix、Linux等。数据203可以包括但不限于组件加载方法涉及到的数据。

在一些实施例中，组件加载装置还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。

本领域技术人员可以理解，图3中示出的结构并不构成对组件加载装置的限定，可以包括比图示更多或更少的组件。

本实施例中，组件加载装置包括存储器和处理器。存储器用于存储计算机程序。处理器用于执行计算机程序时实现如上述实施例中所提到的组件加载的方法的步骤。当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

最后，本申请还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。

可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本实施例中，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。当用户通过浏览器访问web网站的页面时，监测页面的文档对象模型元素；判断文档对象模型元素是否在浏览器的可视区域内；若是，则加载组件库中文档对象模型元素对应的组件；其中，组件库中预先封装多个具有交互功能的组件，并分别定义了各组件对应的open属性。由此可知，上述方案通过预先构建了包含多个交互组件的组件库，当用户访问页面时，若web前端页面的文档对象模型元素在可视区域内，则加载组件库中相对应的组件模块，否则不加载。实现了按需加载组件，提高了页面访问的性能，减少了代码冗余，提高了代码可维护性。

以上对本申请所提供的组件加载方法、装置及介质进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (10)

1.一种组件加载方法，其特征在于，包括：

当用户通过浏览器访问web网站的页面时，监测所述页面的文档对象模型元素；

判断所述文档对象模型元素是否在所述浏览器的可视区域内；

若是，则加载组件库中所述文档对象模型元素对应的组件；

其中，所述组件库中预先封装多个具有交互功能的所述组件，并分别定义了各所述组件对应的open属性。

2.根据权利要求1所述的组件加载方法，其特征在于，所述判断所述文档对象模型元素是否在所述浏览器的可视区域内包括：

获取所述页面的滚动条的滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离；

根据所述滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离判断所述文档对象模型元素是否在所述浏览器的可视区域内。

3.根据权利要求2所述的组件加载方法，其特征在于，所述根据所述滚动距离、所述可视区域的高度、所述文档对象模型元素的高度和所述文档对象模型元素到所述页面顶部的距离判断所述文档对象模型元素是否在所述浏览器的可视区域内包括：

判断是否所述文档对象模型元素到所述页面顶部的距离与所述文档对象模型元素的高度的和大于所述滚动距离，且所述滚动距离与所述可视区域的高度的和大于所述文档对象模型元素到所述页面顶部的距离；

若是，则确定所述文档对象模型元素在所述浏览器的所述可视区域内。

4.根据权利要求1所述的组件加载方法，其特征在于，所述加载组件库中所述文档对象模型元素对应的组件包括：

将所述组件的所述open属性设置为true，以加载所述组件。

5.根据权利要求1所述的组件加载方法，其特征在于，在所述判断所述文档对象模型元素是否在所述浏览器的可视区域内之前，在所述监测所述页面的文档对象模型元素之后，还包括：

判断所述文档对象模型元素是否在所述页面内；

若是，则进入所述判断所述文档对象模型元素是否在所述浏览器的可视区域内的步骤；

若否，则在所述页面中点击所述组件对应的事件后，进入所述判断所述文档对象模型元素是否在所述浏览器的可视区域内的步骤。

6.根据权利要求1至5任意一项所述的组件加载方法，其特征在于，在所述加载组件库中所述文档对象模型元素对应的组件之后，还包括：

生成所述组件的加载日志。

7.根据权利要求6所述的组件加载方法，其特征在于，在所述生成所述组件的加载日志之后，还包括：

当所述浏览器被关闭时，删除所述加载日志。

8.一种组件加载装置，其特征在于，包括：

监测模块，用于当用户通过浏览器访问web网站的页面时，监测所述页面的文档对象模型元素；

判断模块，用于判断所述文档对象模型元素是否在所述浏览器的可视区域内；若是，则触发加载模块；

所述加载模块，用于加载组件库中所述文档对象模型元素对应的组件；

其中，所述组件库中预先封装多个具有交互功能的所述组件，并分别定义了各所述组件对应的open属性。

9.一种组件加载装置，其特征在于，包括：

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

处理器，用于执行所述计算机程序时实现如权利要求1至7任一项所述的组件加载方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的组件加载方法的步骤。

Images