在用户终端浏览器上按需显示图片的方法及装置.pdf

《在用户终端浏览器上按需显示图片的方法及装置.pdf》由会员分享，可在线阅读，更多相关《在用户终端浏览器上按需显示图片的方法及装置.pdf（7页珍藏版）》请在专利查询网上搜索。

1、10申请公布号CN102346782A43申请公布日20120208CN102346782ACN102346782A21申请号201110327238122申请日20111025G06F17/3020060171申请人中兴通讯股份有限公司地址518057广东省深圳市南山区高新技术产业园科技南路中兴通讯大厦法务部72发明人李红波周涌寿永艳于峰74专利代理机构工业和信息化部电子专利中心11010代理人马东伟54发明名称在用户终端浏览器上按需显示图片的方法及装置57摘要本发明公开了一种在用户终端浏览器上按需显示图片的方法及装置，其中方法包括当用户终端通过浏览器访问网页时，浏览器对接收到的HTML文本。

2、进行解析，并根据解析结果以默认图片的方式对该网页进行排版；计算该网页的可视区域并获取该可视区域内的控件；在判定可视区域的控件中包含有图像控件并且所有图像控件都获得相应的图片后，绘制可视区域；在用户只想看WEB页的一部分区域时，本发明通过只下载屏幕范围内的WEB页图片，减少了等待WEB页显示的时间以及数据流量消耗。51INTCL19中华人民共和国国家知识产权局12发明专利申请权利要求书1页说明书4页附图1页CN102346802A1/1页21一种在用户终端浏览器上按需显示图片的方法，其特征在于，包括步骤A当用户终端通过浏览器访问网页时，浏览器对接收到的HTML文本进行解析，并根据解析结果以默认图。

3、片的方式对该网页进行排版；步骤B计算该网页的可视区域并获取该可视区域内的控件；步骤C在判定可视区域的控件中包含有图像控件并且所有图像控件都获得相应的图片后，绘制可视区域。2根据权利要求1所述的方法，其特征在于，还包括在该网页发生移动后，重新执行步骤B和步骤C。3根据权利要求1或2所述的方法，其特征在于，所述步骤C具体包括判断该可视区域内是否存在图像控件，如果是，对该可视区域内存在的图像控件获取相应的图片，加入该图片并对该网页重新进行排版，直到该可视区域内存在的所有图像控件都获得相应的图片后绘制可视区域；如果否，直接绘制可视区域。4一种在用户终端浏览器上按需显示图片的装置，其特征在于，包括解析模。

4、块，用于当用户终端通过浏览器访问网页时，对接收到的HTML文本进行解析，并根据解析结果以默认图片的方式对该网页进行排版；计算获取模块，用于计算该网页的可视区域并获取该可视区域内的控件；判断绘制模块，用于在判定可视区域的控件中包含有图像控件并且所有图像控件都获得相应的图片后，绘制可视区域。5根据权利要求1或2所述的方法，其特征在于，所述判断绘制模块具体用于，判断该可视区域内是否存在图像控件，如果是，对该可视区域内存在的图像控件获取相应的图片，加入该图片并对该网页重新进行排版，直到该可视区域内存在的所有图像控件都获得相应的图片后绘制可视区域；如果否，直接绘制可视区域。权利要求书CN10234678。

5、2ACN102346802A1/4页3在用户终端浏览器上按需显示图片的方法及装置技术领域0001本发明涉及通信技术领域，尤其涉及一种在用户终端浏览器上按需显示图片的方法及装置。背景技术0002WEB页是为适合PC屏幕设计的，通过手机上网浏览WEB页时屏幕上通常在某一时刻只能显示屏幕区域内的一部分区域，其他区域则要通过移动滚动条后才能显示。0003在手机浏览器打开WEB页的过程中，受制于无线网络的速度，文件下载占用了大部分时间，尤其是图片下载占用了下载过程的大部分时间；而现有手机上显示WEB页时采用的是一次性排版后再显示的方法，即手机首先HTML文本以及图片全部下载下来，排版形成完整的页面后再计。

6、算页面的可视区域并显示，这样，如果用户只想看WEB页的一部分区域，也不得不同时将其他区域的图片同时下载下来，从而造成下载时间的延长以及数据流量的浪费。发明内容0004鉴于上述的分析，本发明旨在提供一种在用户终端浏览器上按需显示图片的方法及装置，用于解决传统浏览器采用一次性排版后显示所带来的下载时间延长以及数据流量浪费的问题。0005本发明的目的主要是通过以下技术方案实现的0006本发明提供了一种在用户终端浏览器上按需显示图片的方法，包括0007步骤A当用户终端通过浏览器访问网页时，浏览器对接收到的HTML文本进行解析，并根据解析结果以默认图片的方式对该网页进行排版；0008步骤B计算该网页的可。

7、视区域并获取该可视区域内的控件；0009步骤C在判定可视区域的控件中包含有图像控件并且所有图像控件都获得相应的图片后，绘制可视区域。0010进一步地，还包括0011在该网页发生移动后，重新执行步骤B和步骤C。0012进一步地，所述步骤C具体包括0013判断该可视区域内是否存在图像控件，如果是，对该可视区域内存在的图像控件获取相应的图片，加入该图片并对该网页重新进行排版，直到该可视区域内存在的所有图像控件都获得相应的图片后绘制可视区域；如果否，直接绘制可视区域。0014本发明还提供了一种在用户终端浏览器上按需显示图片的装置，包括0015解析模块，用于当用户终端通过浏览器访问网页时，对接收到的HT。

8、ML文本进行解析，并根据解析结果以默认图片的方式对该网页进行排版；0016计算获取模块，用于计算该网页的可视区域并获取该可视区域内的控件；0017判断绘制模块，用于在判定可视区域的控件中包含有图像控件并且所有图像控件说明书CN102346782ACN102346802A2/4页4都获得相应的图片后，绘制可视区域。0018进一步地，所述判断绘制模块具体用于，判断该可视区域内是否存在图像控件，如果是，对该可视区域内存在的图像控件获取相应的图片，加入该图片并对该网页重新进行排版，直到该可视区域内存在的所有图像控件都获得相应的图片后绘制可视区域；如果否，直接绘制可视区域。0019本发明有益效果如下00。

9、20在用户只想看WEB页的一部分区域时，本发明通过只下载屏幕范围内的WEB页图片，减少了等待WEB页显示的时间以及数据流量消耗。0021本发明的其他特征和优点将在随后的说明书中阐述，并且，部分的从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。附图说明0022图1为本发明实施例所述方法的流程示意图；0023图2为本发明实施例所述装置的流程示意图。具体实施方式0024下面结合附图来具体描述本发明的优选实施例，其中，附图构成本申请一部分，并与本发明的实施例一起用于阐释本发明的原理。0025首先结合附图1。

10、对本发明实施例所述方法进行详细说明。0026为了有助于理解本发明实施例，这里先简单介绍下现有技术中WEB页的形成原理以及手机上显示显示WEB页的原理。0027网页形成的原理是，浏览器解析HTML文本，形成若干控件和容器。控件用来显示内容，例如文本控件显示文字，图像控件显示图片。控件放置在容器内，由容器来计算各个控件的显示位置，即容器是用来控制排版的。浏览器若要显示某图片，必须要从图像控件中获取图片URL，向该图片URL发出HTTP请求，将图片下载回来，然后解码，解码后的内容写入图像控件。在图片还没有获取到的情况下，图像控件显示为默认图片默认图片为排版时需要给其设定的特殊标识图片，例如可以为“”。

11、形状的图片，这类图片占用的数据流量非常小，可以忽略不计。0028手机屏幕上显示网页的原理是，浏览器设置屏幕左上角点在网页上的绝对坐标，然后根据屏幕的长度和宽度计算出可视区域坐标。页面容器将各个控件坐标与可视区域坐标进行比较，让处于可视区域内的控件绘制自身，从而将可视区域内的网页内容显示给用户。当浏览器收到页面移动的信息后，会重新设置屏幕左上角点在网页上的坐标，从而重新计算可视区域。0029如图1所示，图1为本发明实施例所述方法的流程示意图，具体包括0030步骤101在手机上网浏览WEB页时，浏览器向服务器发出HTTP请求，请求由URL指定的WEB页对应的HTML文本；其中，HTML文本中包括了。

12、整个WEB页的布局和文字内容，但不包括图片内容；图片信息是通过HTML中的IMG标签中来描述，IMG标签中指定了的图片URL，即IMG标签告诉浏览器从哪里可以获取图片；说明书CN102346782ACN102346802A3/4页50031步骤102浏览器对接收到的HTML文本进行解析，然后根据解析结果按照不显示图片的方式对WEB页进行排版；也就是说，对HTML解析形成若干控件和容器，然后由容器来计算各个控件的显示位置，但是对于其中的图像控件的下载标识设置为未下载，这样排版后生成的WEB页并不包含图像控件对应的图片；0032步骤103计算页面的可视区域，获取可视区域内的控件；0033步骤104。

13、判断该可视区域内控件中是否包含有图像控件，如果包含，则执行步骤106，否则执行步骤105；0034步骤105在屏幕绘制该可视区域，即浏览器设置屏幕左上角点在WEB页上的绝对坐标，然后根据屏幕的长度和宽度计算出该可视区域坐标；0035步骤106根据可视区域内图像控件的下载标志判断各个图像控件是否都已取得相应的图片，若至少有一个未获取，则执行步骤107；若都已获取到相应的图片，则转到步骤105；0036步骤107浏览器请求下载上述未获取的图片，下载后将该图片的内容写入到对应的图像控件，并将对应的图像控件的下载标识设置为已下载；0037步骤108加入该图片并对该WEB页重新进行排版，然后转到步骤10。

14、4，直到该可视区域内的所有图像控件都获取到相应的图片。0038下面用一个具体的场景说明按需显示图片的过程，这个场景是某用户到新浪网上浏览英超联赛的新闻。00391用户首先输入手机浏览器上输入WWWSINACOMCN，打开新浪首页，这时显示在手机屏幕上的是WEB页左上角的一小块区域，此时浏览器只下载了这一小块区域内的图片，而WEB页右部和下部的图片都没有被下载。00402用户按右方向键移动WEB页，在WEB页的导航区域中寻找到“英超”链接。在这个过程中，WEB页上部的一部分图片逐渐进入屏幕范围，这些图片在WEB页移动的过程中被下载并显示出来。但WEB页下部的图片仍然不会被下载。00413用户点击。

15、“英超”链接，浏览器打开英超联赛板块首页，如果该用户只是在该页面的上部浏览一些英超重要新闻，则页面中部和下部的图片在用户浏览过程中始终不会下载。0042从上面的过程可以看出，用户在浏览WEB页过程中，完全地获得了他感兴趣的部分WEB页上部的内容，而大部分该用户不关心的WEB页图片WEB页下部的图片都没有下载，这样，那些用户不需要的图片就不会占用用户的下载时间和流量。0043接下来结合附图2对本发明实施例所述装置进行详细说明。0044如图2所示，图2为本发明实施例所述装置的结构示意图，具体可以包括解析模块、计算获取模块和判断绘制模块，其中，0045解析模块，当用户终端通过浏览器访问网页时，解析模。

16、块对接收到的HTML文本进行解析，并根据解析结果以默认图片的方式对该网页进行排版；0046计算获取模块，负责计算该网页的可视区域并获取该可视区域内的控件；0047判断绘制模块，负责在判定可视区域的控件中包含有图像控件并且所有图像控件都获得相应的图片后，绘制可视区域；具体的说就是，判断绘制模块判断该可视区域内是否存在图像控件，如果是，对该可视区域内存在的图像控件获取相应的图片，加入该图片并对说明书CN102346782ACN102346802A4/4页6该网页重新进行排版，直到该可视区域内存在的所有图像控件都获得相应的图片后绘制可视区域；如果否，直接绘制可视区域。0048对于本发明实施例所述装置。

17、的具体实施过程，由于上述方法中已有详细说明，故此处不再赘述。0049综述，本发明实施提供了一种在用户终端浏览器上按需显示图片的方法及装置，以上仅以手机为例进行了说明，但本领域技术人员都应该知道，本发明实施例同样可以适用于其他具有访问WEB页功能且不能全屏显示WEB页的其他用户终端，原理相同。0050本发明实施例的浏览器只下载屏幕范围内的WEB页图片，若用户只浏览了WEB页的一部分，等待WEB页显示的时间和消耗的数据流量都比传统的方式少得多；并且随着WEB页的移动，落到屏幕范围内的图片会自动下载和显示，整个过程不需要用户干预。0051以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。说明书CN102346782ACN102346802A1/1页7图1图2说明书附图CN102346782A。