CN103279574A - 一种浏览器图片的加载方法、装置和终端设备 - Google Patents

Abstract

本发明实施例公开了一种浏览器图片的加载方法、装置和终端设备，该加载方法包括：获取网页数据，网页数据包括图片在网页中的位置信息；当存储有图片数据时，利用存储的图片数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；当未存储有图片数据时，获取图片数据，利用获取的图片数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，将图片的统一资源定位符与图片数据对应存储。该方案减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；不会出现缓存失效的状况，加载过程更加稳定，带来更好的用户体验，减轻了存放图片的服务器的带宽压力。

Description

一种浏览器图片的加载方法、装置和终端设备

技术领域

本发明涉及网页技术领域，尤其涉及一种浏览器图片的加载方法、装置和终端设备。

背景技术

随着互联网的行业发展，网页上图片的呈现数量变得越来越多，出现大量以图片内容为展示中心的网站。图片的增加，意味着网站内容的呈现需要更长的时间或者更高的带宽。与此同时如何加快网站打开的速度，尤其是当网站的页面中含有大量图片内容时，成为一个WEB站点优化的重要方向。

目前的一种方案是设置图片请求的HTTP HEADER(Hyper Text TransferProtocol Header，超文本传输协议请求头)中的过期时间(expires)，将该字段设置为未来的某一个时间点，当浏览器请求过一次图片时，再次请求会先检查浏览器的缓存之中是否存在该图片，若存在则直接返回该图片。该种方案的缺点是：当用户手动清空浏览器缓存或者强制刷新浏览器时，浏览器缓存会失效，浏览器会从服务器端重新获取数据。即使是从浏览器的缓存当中获取图片，浏览器也会发送一个HTTP返回码为304的请求，虽然该请求不会返回任何数据，而是直接从用户本地磁盘的缓存中获取数据，但是由于浏览器对于同一个HTTP域的并发请求数是有限的(通常为5-10个)，所以对于图片请求较多的网站，这种做法依然会导致网站的呈现速度不够理想。

目前的另一种方案是使用雪碧图和CSS(Cascading Style Sheet，样式表)方式显示图片，该方法将需要展示的多张图片合并为一张图片，从而减少网站显示过程中HTTP的请求数。通过合并请求的方式来实现图片展示加速。(因为每建立一个HTTP请求通常需要额外的时间开销，合并图片可以减少这部分时间损耗)。该种方案的缺点是：使用雪碧图可以减少HTTP请求数，但是依然无法避免缓存被清空和浏览器并发请求数限制的问题(不可能将一个网站中所有的图片都合并在一起，否则加载速度会反而更慢)。

发明人在实现本发明过程中发现目前的浏览器加载图片的技术容易出现缓存失效的状况，从而需要重复获取图片数据，存在使用不稳定的问题；并且受到浏览器并发请求数限制，当网站中图片数量较多的时候，加载图片的速度较慢。

发明内容

为了解决背景技术存在的问题，本发明实施例提供了一种浏览器图片的加载方法、装置和终端设备。

本发明实施例提供了一种浏览器图片的加载方法，包括：

从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断是否永久性的存储有所述图片的数据；

当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

其中，优选地，所述判断是否永久性的存储有所述图片的数据，包括：

根据所述图片的统一资源定位符，判断在预先对应永久性存储的网页图片统一资源定位符与网页图片数据中，是否存在所述图片的统一资源定位符对应的图片数据；

当存在时，确定存储有所述图片的数据；当不存在时，确定未存储有所述图片的数据。

其中，优选地，所述当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，包括：

当存储有所述图片的数据时，在所述图片在网页中的位置处添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

读取存储的所述图片的数据；

调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

将生成的所述图片显示于所述绘图文件对象模型节点。

其中，优选地，所述当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，将图片的统一资源定位符与图片的数据对应存储，包括：

当未存储有所述图片的数据时，在所述图片在网页中的位置处，添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

向图片服务器请求所述图片的数据；

调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

将生成的所述图片显示于所述绘图文件对象模型节点；

将所述图片的统一资源定位符与所述图片的数据对应存储。

其中，优选地，所述将所述图片的统一资源定位符与所述图片的数据对应存储，包括：

将所述图片的数据转换为所述图片的绘制数据，所述绘制数据的格式为浏览器支持的绘图工具的可用数据格式；

将所述图片的绘制数据与所述图片的统一资源定位符对应存储。

本发明实施例提供了一种浏览器图片的加载装置，包括：

网页获取模块，用于从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断模块，用于判断是否永久性的存储有所述图片的数据；

第一处理模块，用于当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

第二处理模块，用于当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

其中，优选地，所述加载装置还包括：

存储模块，用于对应永久性存储网页图片统一资源定位符与网页图片数据；

所述判断模块包括：

判断单元，用于根据所述图片的统一资源定位符，判断在所述存储模块中，是否存在所述图片的统一资源定位符对应的图片数据；

确定单元，用于当所述判断单元的判断结果为存在时，确定所述存储模块存储有所述图片的数据；当所述判断单元的判断结果为不存在时，确定所述存储模块未存储有所述图片的数据。

其中，优选地，所述第一处理模块包括：

第一添加单元，用于当存储有所述图片的数据时，在所述图片在网页中的位置处添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

读取单元，用于读取存储的所述图片的数据；

第一绘制单元，用于调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

第一显示单元，用于将所述第一绘制单元生成的所述图片显示于所述所述绘图文件对象模型节点。

其中，优选地，所述第二处理模块包括：

第二添加单元，用于当未存储有所述图片的数据时，在所述图片在网页中的位置处，添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

请求单元，用于向图片服务器请求所述图片的数据；

第二绘制单元，用于调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

第二显示单元，用于将生成的所述图片显示于所述绘图文件对象模型节点；

存储处理单元，用于将所述图片的统一资源定位符与所述图片的数据对应存储于所述存储模块中。

其中，优选地，所述存储处理单元包括：

转换子单元，用于将所述图片的数据转换为所述图片的绘制数据，所述绘制数据的格式为浏览器支持的绘图工具的可用数据格式；

处理子单元，用于将所述图片的绘制数据与所述图片的统一资源定位符对应存储于所述存储模块中。

本发明实施例提供了一种终端设备，终端设备包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：

从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断是否永久性的存储有所述图片的数据；

当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

本发明实施例提供的浏览器图片的加载方法、装置和终端设备中，当用户使用浏览器访问网站时，当需要加载该网站上的图片时，会首先检查本地终端中是否存储有该图片；如果本地终端中存储有该图片，则不向网页服务器请求图片，而是直接使用本地终端中存储的图片显示到网页上，从而减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；并且，不会出现缓存失效的状况，只要是在本地终端存储了网页的图片，便不需要重复获取图片数据，加载过程更加稳定，带来更好的用户体验，同时也减轻了存放图片的服务器的带宽压力。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中一种浏览器图片的加载方法流程图；

图2为本发明中具体实施例的方法流程图；

图3为本发明实施例中第一种浏览器图片的加载装置结构示意图；

图4为本发明实施例中第二种浏览器图片的加载装置结构示意图；

图5为图3或图4中第一处理模块的结构示意图；

图6为本发明实施例中第三种浏览器图片的加载装置结构示意图；

图7为本发明实施例中第四种浏览器图片的加载装置结构示意图；

图8为本发明实施例中一种终端设备结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

本发明实施例为支持绘图工具(如HTML5Canvas技术)和本地存储技术(如LocalStorage、IndexDB等)的浏览器(PC(personal computer，个人计算机)端或移动端)提供了一种浏览器图片的加载方法和装置。当用户使用浏览器访问网站时，当需要加载(这里的加载是指从网页服务器中获取图片并显示给用户的这个过程)该网站上的图片时，会首先检查本地终端中是否永久性的存储有该图片；如果本地终端中永久性的存储有该图片，则不向网页服务器请求图片，而是直接使用本地终端中永久性存储的图片显示到网页上，从而减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；并且，不会出现缓存失效的状况，只要是在本地终端永久性存储了网页的图片，便不需要重复获取图片数据，加载过程更加稳定，带来更好的用户体验，同时也减轻了存放图片的服务器的带宽压力。

需要说明的是，本发明实施例中的存储均指永久性的存储，是指存在硬盘、磁盘、永久性存储器等存储介质当中，当存储介质掉电之后，在存储介质中永久性存储的数据不会消失。而现有技术中的缓存是指存储介质掉电之后，在存储介质中缓存的数据会消失。

如图1所示，本发明实施例提供了一种浏览器图片的加载方法，包括以下步骤S11-S14：

S11、从网页服务器获取网页数据，网页数据中包括图片在网页中的位置信息。

S12、判断是否永久性的存储有图片的数据。

优选地，步骤S12包括以下步骤A1-A2：

步骤A1、根据图片的统一资源定位符，判断在预先对应永久性存储的网页图片统一资源定位符与网页图片数据中，是否存在图片的URL(UniformResource Locator，统一资源定位符)对应的图片数据；

步骤A2、当存在时，确定存储有图片的数据；当不存在时，确定未存储有图片的数据。

网页中图片的URL是唯一的，所以要预先对应存储网页图片的URL与网页图片的数据，这样，才能准确判断本地存储中是否存储有该网页中图片的数据。

S13、当存储有图片的数据时，利用存储的图片的数据生成图片，将生成的图片显示在网页中的图片位置处。

优选地，步骤S13包括以下步骤B1-B4：

步骤B1、当存储有图片的数据时，在网页中的图片位置处添加绘图DOM节点，绘图DOM节点的尺寸与图片的尺寸相同；

步骤B2、读取存储的图片的数据；

步骤B3、调用浏览器支持的绘图工具，利用图片的数据绘制图片；

步骤B4、将绘制而成的图片显示于绘图DOM节点。

S14、当未存储有图片的数据时，从图片服务器获取图片的数据，利用获取的图片的数据生成图片，将生成的图片显示在网页中的图片位置处，并将图片的URL与图片的数据对应存储。

本发明实施例中，网页数据所在的网页服务器与图片所在的图片服务器可以是同一个服务器，也可以是不同的服务器。

优选地，步骤S14包括以下步骤C1-C5：

步骤C1、当未存储有图片的数据时，在网页中的图片位置处，添加绘图DOM节点(如Canvas Dom节点)，绘图DOM节点的尺寸与图片的尺寸相同。

步骤C2、向图片服务器请求图片的数据。

步骤C3、调用浏览器支持的绘图工具，利用图片的数据绘制图片。

步骤C4、将绘制而成的图片显示于绘图DOM节点。

步骤C5、将图片的URL与图片的数据对应存储。

其中，步骤C5可包括以下步骤：

步骤C51、将图片的数据转换为图片的绘制数据，绘制数据的格式为浏览器支持的绘图工具的可用数据格式，如Canvas绘图支持的BASE64格式；

步骤C52、将图片的绘制数据与图片的URL对应存储。

本发明实施例提供的浏览器图片的加载方法中，当用户使用浏览器访问网站时，当需要加载该网站上的图片时，会首先检查本地终端中是否永久性的存储有该图片；如果本地终端中永久性存储有该图片，则不向网页服务器请求图片，而是直接使用本地终端中永久性存储的图片显示到网页上，从而减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；并且，不会出现缓存失效的状况，只要是在本地终端永久性存储了网页的图片，便不需要重复获取图片数据，加载过程更加稳定，带来更好的用户体验，同时也减轻了存放图片的服务器的带宽压力。

下面以一具体实施例来说明本发明实施例提供的上述浏览器图片的加载方法。本具体实施例基于浏览器的Canvas绘图和本地存储技术，适用于各个移动或者非移动平台下(包括ios、android、mac、pc等)支持Canvas绘图和本地存储技术的浏览器。如图2所示，该实施例包括以下步骤：

S21、当客户端使用浏览器访问一WEB网页时，WEB站点(即网页服务器)检查客户端的浏览器是否支持Canvas绘图技术和本地存储技术；若不支持，则执行步骤S20：使用目前的图片加载方法加载图片(如使用目前的IMG标签加载图片)；若支持，则执行步骤S22；

S22、客户端获取网页数据，其中包括图片在网页中的位置信息。

S23、客户端判断本地终端的磁盘中是否存储有该网页中图片的数据；当本地终端的磁盘中存储有该网页中图片的数据时，执行步骤S28；当本地终端的磁盘中未存储有该网页中图片的数据时，执行步骤S24。

S24、当本地终端的磁盘中存储有该网页中图片的数据时，客户端的浏览器的可执行脚本在网页中的图片位置处，动态添加Canvas DOM节点，并使得该Canvas DOM节点的宽高和需要显示的图片的宽高保持一致，继续步骤S25。

S25、浏览器的可执行脚本控制浏览器的Image接口创建一个图片请求对象给WEB站点，将需要显示的图片的流媒体数据请求回客户端，并监听图片的流媒体数据是否返回到客户端(例如监听事件可以由Image接口内部实现，几乎市面上所有的浏览器都支持这样的监听)，继续步骤S26。

S26、当监听到图片的流媒体数据已经返回到客户端后，浏览器的可执行脚本控制Canvas提供的DrawImage接口利用图片的流媒体数据绘制图片(触发Image接口的数据加载完成事件时，会开始绘制)，并将绘制而成的图片显示于Canvas DOM节点，继续步骤S27。

S27、当图片显示在Canvas DOM节点上后，使用Canvas的getImageData接口把图片的BASE64(使用这个格式的原因是这种格式被目前所有主流浏览器所支持，如果以后浏览器标准更新，实现其格式，可以参照这个方案)格式的数据写入到本地终端的磁盘中，结束。

S28、当本地终端的磁盘中未存储有该网页中图片的数据时，客户端的浏览器的可执行脚本在网页中的图片位置处，动态添加Canvas DOM节点，并使得该Canvas DOM节点的宽高和需要显示的图片的宽高保持一致，继续步骤S29。

S29、浏览器的可执行脚本控制Canvas提供的DrawImage接口利用存储的图片的数据(本具体实施例中存储的是图片的BASE64格式数据)绘制图片，并将绘制而成的图片显示于Canvas DOM节点，结束。

本具体实施例中，Canvas中的getImageData接口出于安全因素考虑，通常不能将非本域(图片所在域和WEB站点所在域是不同域)的图片转换为BASE64字符串(这种限制是浏览器底层控制的，不能通过编写浏览器端可执行脚本解决)，这时需要设置请求图片所在域服务器的HTTP响应头，将响应头中添加Access-Control-Allow-Origin：*(*表示所有域都可以访问，出于安全考虑一般设为用户访问的WEB站点所在的域)。

本具体实施例采用本发明实施例提供的方法来为浏览器加载图片，不仅减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；并且，不会出现缓存失效的状况，只要是在本地终端存储了网页的图片，便不需要重复获取图片数据，加载过程更加稳定，带来更好的用户体验，同时也减轻了存放图片的服务器的带宽压力。

对应上述浏览器图片的加载方法，如图3所示，本发明实施例还提供了一种浏览器图片的加载装置，包括：

网页获取模块31，用于从网页服务器获取网页数据，网页数据中包括图片在网页中的位置信息；

判断模块32，用于判断是否永久性的存储有图片的数据；

第一处理模块33，用于当存储有图片的数据时，利用存储的图片的数据生成图片，将生成的图片显示在网页中的图片位置处；

第二处理模块34，用于当未存储有图片的数据时，从图片服务器获取图片的数据，利用获取的图片的数据生成图片，将生成的图片显示在网页中的图片位置处，并将图片的URL与图片的数据对应存储。

如图4所示，优选地，上述加载装置还可包括：

存储模块41，用于对应永久性存储网页图片的URL与网页图片数据；

此时，上述判断模块32包括：

判断单元321，用于根据图片的URL，判断在存储模块41中，是否存在图片的URL对应的图片数据；

确定单元322，用于当判断单元321的判断结果为存在时，确定存储模块41存储有图片的数据；当判断单元321的判断结果为不存在时，确定存储模块41未存储有图片的数据。

如图5所示，优选地，上述第一处理模块33可包括：

第一添加单元331，用于当存储有图片的数据时，在网页中的图片位置处添加绘图DOM节点，绘图DOM节点的尺寸与图片的尺寸相同；

读取单元332，用于读取存储的图片的数据；

第一绘制单元333，用于调用浏览器支持的绘图工具，利用图片的数据生成图片；

第一显示单元334，用于将第一绘制单元生成的图片显示于绘图DOM节点。

如图6所示，优选地，图4所示的第二处理模块34包括：

第二添加单元341，用于当未存储有图片的数据时，在网页中的图片位置处，添加绘图DOM节点，绘图DOM节点的尺寸与图片的尺寸相同；

请求单元342，用于向图片服务器请求图片的数据；

第二绘制单元343，用于调用浏览器支持的绘图工具，利用图片的数据生成图片；

第二显示单元344，用于将生成的图片显示于绘图DOM节点；

存储处理单元345，用于将图片的URL与图片的数据对应存储于上述存储模块中。

如图7所示，优选地，上述存储处理单元345包括：

转换子单元71，用于将图片的数据转换为图片的绘制数据，绘制数据的格式为浏览器支持的绘图工具的可用数据格式；

处理子单元72，用于将图片的绘制数据与图片的URL对应存储于上述存储模块中。

本发明实施例提供的浏览器图片的加载装置，不仅减少了与网络侧的网络传输，不受并发请求数的限制，提高了图片的加载速度；并且，不会出现缓存失效的状况，只要是在本地终端存储了网页的图片，便不需要重复获取图片数据，加载过程更加稳定，带来更好的用户体验，同时也减轻了存放图片的服务器的带宽压力。

图8是本发明实施例提供的一种终端设备结构示意图。参见图8，该终端设备可以用于实施上述实施例中提供的浏览器图片的加载方法。优选的：

终端设备700可以包括通信单元110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi(wireless fidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图5中示出的终端设备结构并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

通信单元110可用于收发信息或通话过程中，信号的接收和发送，该通信单元110可以为RF(Radio Frequency，射频)电路、路由器、调制解调器、等网络通信设备。特别地，当通信单元110为RF电路时，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，作为通信单元的RF电路包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier，低噪声放大器)、双工器等。此外，通信单元110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(Code Division Multiple Access，码分多址)、WCDMA(Wideband CodeDivision Multiple Access，宽带码分多址)、LTE(Long Term Evolution，长期演进)、电子邮件、SMS(Short Messaging Service，短消息服务)等。存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端设备700的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。优选地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。优选地，其他输入设备132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端设备700的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-EmittingDiode，有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图5中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端设备700还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。优选地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端设备700移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端设备700还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端设备700之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端设备，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端设备700的通信。

为了实现无线通信，该终端设备上可以配置有无线通信单元170，该无线通信单元170可以为WiFi模块。WiFi属于短距离无线传输技术，终端设备700通过无线通信单元170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图5示出了无线通信单元170，但是可以理解的是，其并不属于终端设备700的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端设备700的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端设备700的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端设备700还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端设备700还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端设备的采用浏览器浏览网页上的图片，终端设备还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：

从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断是否永久性的存储有图片的数据；

当存储有图片的数据时，利用存储的图片的数据生成图片，将生成的图片显示在网页中的图片位置处；

当未存储有图片的数据时，从图片服务器获取图片的数据，利用获取的图片的数据生成图片，将生成的图片显示在网页中的图片位置处，并将图片的统一资源定位符与图片的数据对应存储。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

1.一种浏览器图片的加载方法，其特征在于，包括：

从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断是否永久性的存储有所述图片的数据；

当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

2.如权利要求1所述的加载方法，其特征在于，所述判断是否永久性的存储有所述图片的数据，包括：

根据所述图片的统一资源定位符，判断在预先对应永久性存储的网页图片统一资源定位符与网页图片数据中，是否存在所述图片的统一资源定位符对应的图片数据；

当存在时，确定存储有所述图片的数据；当不存在时，确定未存储有所述图片的数据。

3.如权利要求1所述的加载方法，其特征在于，所述当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，包括：

当存储有所述图片的数据时，在所述图片在网页中的位置处添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

读取存储的所述图片的数据；

调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

将生成的所述图片显示于所述绘图文件对象模型节点。

4.如权利要求1所述的加载方法，其特征在于，所述当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，将图片的统一资源定位符与图片的数据对应存储，包括：

当未存储有所述图片的数据时，在所述图片在网页中的位置处，添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

向图片服务器请求所述图片的数据；

调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

将生成的所述图片显示于所述绘图文件对象模型节点；

将所述图片的统一资源定位符与所述图片的数据对应存储。

5.如权利要求1至4中任一所述的加载方法，其特征在于，所述将所述图片的统一资源定位符与所述图片的数据对应存储，包括：

将所述图片的数据转换为所述图片的绘制数据，所述绘制数据的格式为浏览器支持的绘图工具的可用数据格式；

将所述图片的绘制数据与所述图片的统一资源定位符对应存储。

6.一种浏览器图片的加载装置，其特征在于，包括：

网页获取模块，用于从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断模块，用于判断是否永久性的存储有所述图片的数据；

第一处理模块，用于当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

第二处理模块，用于当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

7.如权利要求6所述的加载装置，其特征在于，所述加载装置还包括：

存储模块，用于对应永久性存储网页图片统一资源定位符与网页图片数据；

所述判断模块包括：

判断单元，用于根据所述图片的统一资源定位符，判断在所述存储模块中，是否存在所述图片的统一资源定位符对应的图片数据；

确定单元，用于当所述判断单元的判断结果为存在时，确定所述存储模块存储有所述图片的数据；当所述判断单元的判断结果为不存在时，确定所述存储模块未存储有所述图片的数据。

8.如权利要求6所述的加载装置，其特征在于，所述第一处理模块包括：

第一添加单元，用于当存储有所述图片的数据时，在所述图片在网页中的位置处添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

读取单元，用于读取存储的所述图片的数据；

第一绘制单元，用于调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

第一显示单元，用于将所述第一绘制单元生成的所述图片显示于所述绘图文件对象模型节点。

9.如权利要求7所述的加载装置，其特征在于，所述第二处理模块包括：

第二添加单元，用于当未存储有所述图片的数据时，在所述图片在网页中的位置处，添加绘图文件对象模型节点，所述绘图文件对象模型节点的尺寸与所述图片的尺寸相同；

请求单元，用于向图片服务器请求所述图片的数据；

第二绘制单元，用于调用所述浏览器支持的绘图工具，利用所述图片的数据生成所述图片；

第二显示单元，用于将生成的所述图片显示于所述绘图文件对象模型节点；

存储处理单元，用于将所述图片的统一资源定位符与所述图片的数据对应存储于所述存储模块中。

10.如权利要求7或9所述的加载装置，其特征在于，所述存储处理单元包括：

转换子单元，用于将所述图片的数据转换为所述图片的绘制数据，所述绘制数据的格式为浏览器支持的绘图工具的可用数据格式；

处理子单元，用于将所述图片的绘制数据与所述图片的统一资源定位符对应存储于所述存储模块中。

11.一种终端设备，其特征在于，终端设备包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：

从网页服务器获取网页数据，所述网页数据中包括图片在网页中的位置信息；

判断是否永久性的存储有所述图片的数据；

当存储有所述图片的数据时，利用存储的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处；

当未存储有所述图片的数据时，从图片服务器获取所述图片的数据，利用获取的所述图片的数据生成所述图片，将生成的所述图片显示在网页中的图片位置处，并将所述图片的统一资源定位符与所述图片的数据对应存储。

Images