CN103914302B - 一种网页加载进度监控方法和装置 - Google Patents

Abstract

本发明公开了一种用于监控网页加载进度的方法，包括：确定网页脚本中含有图片的元素节点；将含有图片的元素节点中图片的现行状态值设置为第一参数；向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态设置为第二参数；向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；在网页加载过程中，根据所有图片的现行状态值，得到网页的当前加载进度。本发明还提供一种用于监控网页加载进度的装置。利用本发明可实现对浏览器中网页加载进度的监控。

Description

一种网页加载进度监控方法和装置

技术领域

本发明涉及网络技术领域，具体涉及一种网页加载进度监控方法和装置。

背景技术

人们通过浏览器打开网页进行浏览，通常，当网页中包含的图片较多时，需要较长时间加载这些图片，加载成功之后显示为完整的页面。目前，在网页加载过程中，如果有图片加载失败，浏览器后台并无特殊处理，也不会重新加载这些图片，而是仅在处理完成之后显示图片加载失败的信息，意味着在网页的加载过程中，用户只能等待网页的加载结果，对于加载进度是无从知晓的。然而，在某些情况下，用户希望掌握网页的加载进度，以帮助用户判断是否继续等待该网页加载，目前缺乏判断网页加载进度的解决方案。

发明内容

有鉴于此，本发明提供一种网页加载进度监控方法和装置，通过监控网页中图片的加载状态，实现对网页加载进度的监控。

一方面，本发明提供一种用于监控网页加载进度的方法，包括：步骤一，确定网页脚本中含有图片的元素节点；步骤二，将含有图片的元素节点中图片的现行状态值设置为第一参数；步骤三，向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态设置为第二参数；步骤四，向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；步骤五，在网页加载过程中，加载成功的图片调用onload事件，加载失败的图片调用onerror事件，根据所有图片的现行状态值，得到网页的当前加载进度。

优选地，当图片加载失败时，所述方法还包括：将图片的现行状态值设置为第一参数；并且，将图片的当前图片地址属性修改为图片的原始图片地址属性，以触发重新加载图片。

优选地，在所述将图片的现行状态值设置为第一参数之前，判断图片是否需要在页面上进行显示，如果判断结果为需要显示，执行下一步；如果判断结果为不需要显示，不计入该图片的现行状态值。

优选地，当重新加载图片的次数超过预定限值时，放弃加载图片，不计入该图片的现行状态值。

优选地，在步骤五中，根据网页脚本中含有图片的元素节点的数目以及当前所有图片的现行状态值，得到当前网页中的图片的加载进度，其中，网页的当前加载进度等于当前网页中的图片的加载进度。

优选地，在步骤一和步骤二完成之后执行步骤四，然后执行步骤三和步骤五。

另一方面，本发明还提供一种用于监控网页加载进度的装置，包括：元素节点处理模块，用于确定网页脚本中含有图片的元素节点；第一现行状态值处理模块，用于将含有图片的元素节点中图片的现行状态值设置为第一参数；第一事件处理模块，用于向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态设置为第二参数；第二事件处理模块，用于向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；加载进度处理模块，用于在网页加载过程中，令加载成功的图片调用onload事件，加载失败的图片调用onerror事件，根据所有图片的现行状态值，得到网页的当前加载进度。

本发明的有益效果：本发明通过动态修改网页的元素信息，实时得到当前所有图片的加载进度，通过获取所有图片的加载进度来判断浏览器的网页加载进度，对于加载失败的图片可设置自动重新加载。利用本发明，既能得到当前页面加载的进度，又能在确保显示所需图片的前提下，缩短页面加载时间，实现了网页加载进度的智能监控。

附图说明

图1是本发明实施例的网页加载进度监控方法流程图。

图2是本发明另一实施例的网页加载进度监控方法流程图。

图3是实施例的网页加载进度监控装置结构框图。

具体实施方式

以下结合附图以及具体实施例，对本发明的技术方案进行详细描述。

人们通过浏览器打开网页，通常网页中除了文本，最主要的资源是图片，网页在打开过程中，加载图片时所占用的网络资源最多，可以认为，一旦网页中所有的图片都加载完成，那么网页也加载完成。因此，等待网页加载完成转变为了等待网页内所有图片加载完成，可认为网页对图片的加载进度反映了网页的加载进度。图1示出了本发明实施例的网页加载进度监控方法的流程图，具体包括：

S101，确定网页脚本中含有图片的元素节点；

S102，将含有图片的元素节点中图片的现行状态值设置为第一参数；

S103，向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态设置为第二参数；

S104，向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；

S105，在网页加载过程中，图片加载成功（或者失败）时将调用对应的onload事件（或者onerror事件），根据所有图片的现行状态值，得到网页的当前加载进度。

在实际应用场合中，网页中插入的图片通常都使用了<img>标签，首先利用javascript确定目标网页脚本中含有<img>标签的元素节点有哪些，可利用document.getElementsByTagName(\"img\")，这些元素节点的总数目就是目标网页要加载的图片总数目。

其次，初始化全局变量g_page_imgs_current_status={}，将所有图片元素节点中图片的现行状态值都设置为0，即令g_page_imgs_current_status[imgsrc]=0，此处状态值为0表示图片未知或图片加载中。

然后，向图片元素节点中增加onload和onerror事件，同时设置全局变量g_page_imgs_current_status的状态值，在onload函数中设置g_page_imgs_current_status[imgsrc]=1，在onerror函数中设置g_page_imgs_current_status[imgsrc]=2，其中状态值为1表示图片加载成功，状态值为2表示图片加载失败。其中，onload和onerror事件是回调函数，对图片元素节点增加onload和onerror函数后，在网页加载图片成功或失败时将调用对应的函数。

经过上述一系列处理，在浏览目标网页时，浏览器实时检查全局变量中的图片加载状态，即检查所有图片的g_page_imgs_current_status状态值，可判断哪些图片正在加载，哪些图片加载成功，哪些图片加载失败。具体来讲，如果状态值为0，表示浏览器正在加载对应图片（未调用onload或onerror函数）；如果状态值为1，表示对应图片加载成功（调用了onload函数）；如果状态值为2，表示对应图片加载失败（调用了onerror函数）。

记录这些状态值，用加载成功的图片的数目比网页中包含的图片的总数目，可得到当前的图片加载进度，并认为图片的加载进度反映了网页的加载进度。举例来说，假设网页脚本中总共含有100张图片，当前成功加载图片数为80张，则当前的图片也即网页加载进度为80%，实现了对网页加载进度的监控。

在本发明的实施例中，还进行以下处理，在S103和S103之前，去掉图片元素节点中的图片地址属性，在S103和S103之后，恢复图片元素节点中的图片地址属性。在<img>标签中，图片地址属性（通常称“SRC地址”）用来指定图片地址，也就是图片文件的URL，是引用该图片文件的绝对路径或相对路径。

在本发明的实施例中，对于加载失败的图片，可令浏览器进行重新加载。具体地，需重新加载某图片时，先获得该图片的SRC地址，设置图片的g_page_imgs_current_status[imgsrc]=0，把图片元素节点中的SRC地址去掉，重新赋为加载之前的SRC地址，重新赋值可触发浏览器重新加载该图片。

在本发明的实施例中，有些图片可能不需要在页面显示，对于这些图片，加载失败之后就不需要重新加载。为此，在开始重新加载某图片之前，可先判断该图片是否需要在页面上显示，如果不需要显示，认为其后续状态不影响网页加载进度，因此不进行后续处理，对其状态值也不予计入；反之，如果需要显示，则按照前述方法开始重新加载，直至所有图片都成功加载完成，即所有g_page_imgs_current_status状态值都为1，认为网页100%加载完成。

在本发明的实施例中，如果针对某图片的加载失败、重新加载次数足够多，达到限制次数（例如3次或5次），可能是该图片已不存在或其它情况，此时不再加载，不计入其状态值。

本发明通过获取网页上图片的加载进度来判断网页的加载进度，实现了浏览器中的网页加载进度的监控，可用于当前各类浏览器（如IE、Firfox、Chrome等）的网页加载进度监控场合。

图2示出了本发明一个具体实施例的处理流程框图，在本实施例中，监控网页加载进度的目的是进行网页的兼容性测试。所谓兼容性测试是指，针对某个URL链接，在多个不同的浏览器中打开链接网页，对网页进行截图，通过检查截图差异判断不同浏览器对同一链接是否存在兼容性问题，可利用Selenium工具辅助测试。

其中，为保证兼容性测试结果可靠，需要截取网页加载完成后的页面，而不能截取尚未加载完成的页面，因此对网页的加载进度较为关心，需要对网页加载进度实施监控。

如图2所示，首先使用Selenium工具调用浏览器，获取网页接口，打开URL链接对应的网页，将浏览器窗口最大化，然后拖动网页滚动条，网页的文本、图片等开始加载。

其中，拖动网页滚动条通过执行javascript脚本的window.scroll函数执行，通常每向下拖动一百个像素等待0.05秒，网页高度通过javascript脚本的document.body.scrollHeight函数获得，当当前滚动位置等于网页的高度、且网页高度不再变化时停止拖动。

此时，可从网页脚本中找到全部含有图片的元素节点，然后对这些元素节点进行修改设置，令g_page_imgs_current_status[imgsrc]=0，添加onload和onerror回调函数，之后不断获取当前页面上的图片加载状态，对页面加载状态进行更新。其中，对于正在加载中的图片，继续等待其加载完成；对于加载失败的图片，将其SRC地址重新赋为原始值，触发浏览器重新加载；如果重新加载的次数超限，则放弃加载，将其状态数据过滤掉。如此不断更新网页的加载进度，实现对网页加载进度的监控。

除此之外，本发明还提供一种用于监控网页加载进度的装置1000，图3示出了该装置结构框图，具体包括：

元素节点处理模块1001，用于确定网页脚本中含有图片的元素节点；

第一现行状态值处理模块1002，用于将含有图片的元素节点中图片的现行状态值设置为0；

第一事件处理模块1003，用于向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态设置为1；

第二事件处理模块1004，用于向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为2；

加载进度处理模块1005，用于在网页加载过程中，根据所有图片的现行状态值，得到网页的当前加载进度。

进一步地，该装置1000还可包括第二现行状态值处理模块1006，用于当某图片加载失败时，将该图片的现行状态值设置为0；以及，图片地址属性处理模块1007，用于当图片加载失败时，将该图片的当前SRC地址修改为该图片的原始SRC地址，以触发重新加载该图片。

进一步地，该装置1000还可包括显示判断处理模块1008，用于在第二现行状态值处理模块1006将加载失败的图片的现行状态值设置为0之前，判断该图片是否需要在页面上进行显示，如果判断结果为需要显示，第二现行状态值处理模块1006将该图片的现行状态值设置为0，SRC地址处理模块1007将该图片的当前SRC地址修改为其原始SRC地址，以触发重新加载该图片；如果判断结果为不需要显示，加载进度处理模块1005对该图片的现行状态值不予计入。

以上，结合具体实施例对本发明的技术方案进行了详细介绍，所描述的具体实施例用于帮助理解本发明的思想。本领域技术人员在本发明具体实施例的基础上做出的推导和变型也属于本发明保护范围之内。

Claims (8)

1.一种用于监控网页加载进度的方法，其特征在于，包括：

步骤一，确定网页脚本中含有图片的元素节点；

步骤二，将含有图片的元素节点中图片的现行状态值设置为第一参数；

步骤三，向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态值设置为第二参数；

步骤四，向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；

步骤五，在网页加载过程中，加载成功的图片调用onload事件，加载失败的图片调用onerror事件，根据所有图片的现行状态值，得到网页的当前加载进度；当图片加载失败时，将图片的现行状态值设置为第一参数；并且，将图片的当前图片地址属性修改为图片的原始图片地址属性，以触发重新加载图片。

2.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在所述步骤五中，将图片的现行状态值设置为第一参数之前，所述方法还包括：

判断图片是否需要在页面上进行显示，如果判断结果为需要显示，执行下一步；如果判断结果为不需要显示，不计入该图片的现行状态值。

3.如权利要求1或2所述的用于监控网页加载进度的方法，其特征在于，所述方法还包括：当重新加载图片的次数超过预定限值时，放弃加载图片，不计入该图片的现行状态值。

4.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在步骤五中，根据网页脚本中含有图片的元素节点的数目以及当前所有图片的现行状态值，得到当前网页中的图片的加载进度，其中，网页的当前加载进度等于当前网页中的图片的加载进度。

5.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在步骤一和步骤二完成之后执行步骤四，然后执行步骤三和步骤五。

6.一种用于监控网页加载进度的装置，其特征在于，包括：

元素节点处理模块，用于确定网页脚本中含有图片的元素节点；

第一现行状态值处理模块，用于将含有图片的元素节点中图片的现行状态值设置为第一参数；

第一事件处理模块，用于向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态值设置为第二参数；

第二事件处理模块，用于向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；

加载进度处理模块，用于在网页加载过程中，令加载成功的图片调用onload事件，加载失败的图片调用onerror事件，根据所有图片的现行状态值，得到网页的当前加载进度；

第二现行状态值处理模块，用于当图片加载失败时，将图片的现行状态值设置为第一参数；

图片地址属性处理模块，用于当图片加载失败时，将图片的当前图片地址属性修改为图片的原始图片地址属性，以触发重新加载图片。

7.如权利要求6所述的用于监控网页加载进度的装置，其特征在于，还包括：

显示判断处理模块，用于在所述第二现行状态值处理模块将图片的现行状态值设置为第一参数之前，判断图片是否需要在页面上进行显示，如果判断结果为需要显示，触发所述第二现行状态值处理模块；如果判断结果为不需要显示，令所述加载进度处理模块不计入该图片的现行状态值。

8.如权利要求6所述的用于监控网页加载进度的装置，其特征在于，所述加载进度处理模块根据网页脚本中含有图片的元素节点的数目以及当前所有图片的现行状态值，得到当前网页中的图片的加载进度，其中，网页的当前加载进度等于当前网页中的图片的加载进度。