一种网页加载进度监控方法和装置制造方法及图纸

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

【技术实现步骤摘要】
一种网页加载进度监控方法和装置
本专利技术涉及网络
，具体涉及一种网页加载进度监控方法和装置。
技术介绍
人们通过浏览器打开网页进行浏览，通常，当网页中包含的图片较多时，需要较长时间加载这些图片，加载成功之后显示为完整的页面。目前，在网页加载过程中，如果有图片加载失败，浏览器后台并无特殊处理，也不会重新加载这些图片，而是仅在处理完成之后显示图片加载失败的信息，意味着在网页的加载过程中，用户只能等待网页的加载结果，对于加载进度是无从知晓的。然而，在某些情况下，用户希望掌握网页的加载进度，以帮助用户判断是否继续等待该网页加载，目前缺乏判断网页加载进度的解决方案。
技术实现思路
有鉴于此，本专利技术提供一种网页加载进度监控方法和装置，通过监控网页中图片的加载状态，实现对网页加载进度的监控。一方面，本专利技术提供一种用于监控网页加载进度的方法，包括：步骤一，确定网页脚本中含有图片的元素节点；步骤二，将含有图片的元素节点中图片的现行状态值设置为第一参数；步骤三，向含有图片的元素节点中增加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，是引用该图片文件的绝对路径或相对路径。在本专利技术的实施例中，对于加载失败的图片，可令浏览器进行重新加载本文档来自技高网...

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

【技术特征摘要】
1.一种用于监控网页加载进度的方法，其特征在于，包括：步骤一，确定网页脚本中含有图片的元素节点；步骤二，将含有图片的元素节点中图片的现行状态值设置为第一参数；步骤三，向含有图片的元素节点中增加onload事件，并将onload事件中图片的现行状态值设置为第二参数；步骤四，向含有图片的元素节点中增加onerror事件，并将onerror事件中图片的现行状态值设置为第三参数；步骤五，在网页加载过程中，加载成功的图片调用onload事件，加载失败的图片调用onerror事件，根据所有图片的现行状态值，得到网页的当前加载进度；当图片加载失败时，将图片的现行状态值设置为第一参数；并且，将图片的当前图片地址属性修改为图片的原始图片地址属性，以触发重新加载图片。2.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在所述步骤五中，将图片的现行状态值设置为第一参数之前，所述方法还包括：判断图片是否需要在页面上进行显示，如果判断结果为需要显示，执行下一步；如果判断结果为不需要显示，不计入该图片的现行状态值。3.如权利要求1或2所述的用于监控网页加载进度的方法，其特征在于，所述方法还包括：当重新加载图片的次数超过预定限值时，放弃加载图片，不计入该图片的现行状态值。4.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在步骤五中，根据网页脚本中含有图片的元素节点的数目以及当前所有图片的现行状态值，得到当前网页中的图片的加载进度，其中，网页的当前加载进度等于当前网页中的图片的加载进度。5.如权利要求1所述的用于监控网页加载进度的方法，其特征在于，在步骤一和步骤二完成之后执行步...

【专利技术属性】
技术研发人员：刘佳，
申请(专利权)人：北京京东尚科信息技术有限公司，北京京东世纪贸易有限公司，
类型：发明
国别省市：北京;11