[发明专利]一种网页加载进度监控方法和装置

说明书

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

附图说明

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

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

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

具体实施方式

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

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

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

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

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