CN103617165A - 一种加载图片的方法、装置及终端 - Google Patents

Abstract

本发明实施例公开了一种加载图片的方法、装置及终端，属于互联网领域。该方法包括：检测到加载待加载图片的指令时，在缓存目录中查找待加载图片的图片资源；当缓存目录中保存待加载图片的图片资源时，从缓存目录中加载待加载图片；当缓存目录中未保存待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为待加载图片的URL的异步请求对象；通过异步请求对象异步，从服务器中加载待加载图片。该装置包括：查找模块、第一加载模块、获取模块、创建模块和第二加载模块。本发明提供的加载图片的方法能够提高加载图片的速度。并且，不会影响用户对网站页面的正常操作，大大提高了网站的可用性和易用性。而且，可以避免阻塞UI进程。

Description

一种加载图片的方法、装置及终端

技术领域

本发明涉及互联网领域，特别涉及一种加载图片的方法、装置及终端。

背景技术

随着互联网行业的发展，出现了越来越多以图片展示为主体的网站和应用，例如，网络相册或图库等，终端可以从网络相册或图库中获取并加载图片，然后显示加载的图片给用户。

其中，加载图片的方法为：服务器根据用户浏览器的分辨率和客户端的请求参数，将用户请求的图片动态压缩为一个适合用户浏览器的分辨率大小的图片。服务器将压缩后的图片返回给终端。

在实现本发明的过程中，发明人发现上述技术至少存在以下问题：

图片压缩过程会消耗大量的服务器计算资源。并且，如果终端请求获取原始尺寸的图片和/或用户使用的浏览器的分辨率非常高时，服务器将加载的图片压缩成适合用户浏览器的分辨率的图片和原始的加载的图片的大小基本相同，该过程并没有压缩图片，因此，该过程并不能提高图片加载速度。

发明内容

本发明提供了一种加载图片的方法、装置及终端。所述技术方案如下：

一方面，本发明提供了一种加载图片的方法，所述方法包括：

检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为所述待加载图片的URL的异步请求对象；通过所述异步请求对象异步，从服务器中加载所述待加载图片。

进一步地，所述获取待加载图片的统一资源定位符URL，包括：

向所述服务器发送加载请求，所述加载请求携带所述待加载图片的标识，使所述服务器根据图片的标识和图片的URL的对应关系，获取所述待加载图片的URL；

接收所述服务器发送的所述待加载图片的URL。

进一步地，所述创建请求地址为所述待加载图片的URL的异步请求对象，包括：

创建多线程工作对象；

在所述多线程工作对象中创建所述异步请求对象；

将所述异步请求对象的请求地址设置为所述待加载图片的URL。

进一步地，当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过所述异步请求对象异步，从服务器中加载所述待加载图片。

进一步地，将从服务器获得的所述待加载图片的图片资源存储在缓存目录中。

进一步地，当所述缓存目录中保存所述待加载图片的图片资源时，还包括：

向服务器发送验证请求，所述验证请求携带所述待加载图片的标识，使所述服务器根据所述验证请求判断所述缓存目录中存储的所述待加载图片是否有效；

接收所述服务器发送的验证响应，并确定所述验证响应是否携带用于提示所述待加载图片有效的标识；

如果是，执行从所述缓存目录中加载所述待加载图片的操作；

如果否，执行所述从服务器中加载所述待加载图片的操作。

另一方面，本发明提供了一种加载图片的装置，所述装置包括：

查找模块，用于检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

第一加载模块，用于当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

获取模块，用于当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；

创建模块，用于创建请求地址为所述待加载的图片的URL的异步请求对象；

第二加载模块，用于通过所述异步请求对象异步，从服务器中加载所述待加载图片。

进一步地，所述获取模块，包括：

发送单元，用于向所述服务器发送加载请求，所述加载请求携带所述待加载图片的标识，使所述服务器根据图片的标识和图片的URL的对应关系，获取所述待加载图片的URL；

接收单元，用于接收所述服务器发送的所述待加载图片的URL。

进一步地，所述创建模块，包括：

第一创建单元，用于创建多线程工作对象；

第二创建单元，用于在所述多线程工作对象中创建所述异步请求对象；

设置单元，用于将所述异步请求对象的请求地址设置为所述待加载图片的URL。

进一步地，所述装置还包括：

设置模块，用于当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过所述异步请求对象异步，从服务器中加载所述待加载图片。

进一步地，所述装置还包括：

存储模块，用于将从服务器获得的所述待加载图片的图片资源存储在缓存目录中。

进一步地，所述装置还包括：

验证模块，用于向服务器发送验证请求，所述验证请求携带所述待加载图片的标识，使所述服务器根据所述验证请求判断所述缓存目录中存储的所述待加载图片是否有效；接收所述服务器发送的验证响应，并确定所述验证响应是否携带用于提示所述待加载图片有效的标识，如果是，执行从所述缓存目录中加载所述待加载图片的操作，如果否，执行所述从服务器中加载所述待加载图片的操作。

另一方面，本发明提供了一种终端，所述终端包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，所述一个或多个模块具有如下功能：

检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为所述待加载图片的URL的异步请求对象；通过所述异步请求对象异步，从服务器中加载所述待加载图片。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

附图说明

图1是本实施例提供的一种加载图片的方法流程图；

图2是本实施例提供的待加载图片的显示界面图；

图3是本实施例提供的一种加载图片的方法流程图；

图4是本实施例提供的一种加载图片的方法流程图；

图5是本实施例提供的一种加载图片的方法流程图；

图6是本实施例提供的一种加载图片的装置结构示意图；

图7是本实施例提供的一种加载图片的另一装置结构示意图；

图8是本实施例提供的一种终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本实施例提供了一种加载图片的方法，此方法可以应用到终端设备中。参见图1，其中，该方法包括：

在步骤101中，检测到加载待加载图片的指令时，在缓存目录中查找待加载图片的图片资源；

在步骤102中，当缓存目录中保存所述待加载图片的图片资源时，从缓存目录中加载待加载图片。

在步骤103中，当缓存目录中未保存待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为待加载图片的URL的异步请求对象；通过异步请求对象异步，从服务器中加载待加载图片。

其中，终端设备可以使用HTML5的webworker实现了在浏览器的非UI进程内加载图片过程，这样可以不影响用户对网站页面的正常操作，大大提高了网站的可用性和易用性。而且，可以避免阻塞UI进程。

在一个实施例中，待加载图片为图片册中的任一或多个图片。该待加载图片可以为当前正在被显示的图片，也可以为当前显示图片的相邻图片等。例如，如图2所示，浏览网页中的图片1时，其相邻图片2、图片3等被视为待加载图片。

确定检测到加载待加载图片的指令时，先在缓存目录中查找待加载图片的图片资源。若之前已经在缓存目录中存储了相应的图片资源，则可以无需再向服务器获取，提高了加载图片的速度。但是，为了确保缓存目录中的图片资源是可用的，还可以向服务器发送验证请求。在另一实施例中，终端设备向服务器发送验证请求，该验证请求携带待加载图片的标识，使服务器根据验证请求判断缓存目录中存储的待加载图片是否有效；接收服务器发送的验证响应，并确定验证响应是否携带用于提示待加载图片有效的标识；如果是，执行从缓存目录中加载待加载图片的操作；如果否，执行从服务器中加载待加载图片的操作。

当缓存目录中未保存待加载图片的图片资源，或者保存的图片资源无效了，那么，需要向服务器获取有效的该待加载图片的图片资源。在一个实施例中，获取待加载的图片的统一资源定位符URL，包括：向服务器发送加载请求，加载请求携带待加载图片的标识，使服务器根据图片的标识和图片的URL的对应关系，获取待加载图片的URL；接收服务器发送的待加载图片的URL。

在一个实施例中，创建请求地址为待加载的图片的URL的异步请求对象，包括：创建多线程工作对象；在多线程工作对象中创建异步请求对象；将异步请求对象的请求地址设置为待加载图片的URL。

在一个实施例中，当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过异步请求对象异步，从服务器中加载待加载图片。

最后，将从服务器获得的待加载图片的图片资源存储在缓存目录中。

通过上述描述可见，本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

下面通过具体实施例对该加载图片的方法进行详细说明。参见图3，当缓存目录中未保存待加载图片的图片资源时，该方法包括：

在步骤301中，终端设备获取待加载图片的URL；

在一个实施例中，终端设备向服务器发送加载请求，该加载请求携带待加载图片的标识。服务器接收终端设备发送的该加载请求后，根据该加载请求携带的待加载图片的标识，从图片的标识和图片的URL的对应关系中获取待加载图片的URL。然后，服务器向终端设备发送待加载图片的URL。终端设备接收服务器发送的待加载图片的URL。

其中，待加载图片的标识为任一可以标识待加载图片的标识，可以为待加载图片的名称，或者，待加载图片的MD5（Message Digest Algorithm 5，消息摘要算法第五版）值等。需要说明的是，服务器中预先存储有图片的标识和图片的URL的对应关系。

在另一实施例中，当终端设备接收到触发预加载图片的操作时，终端设备获取待加载的图片的URL。其中，触发预加载图片的操作可以为：点击浏览相册中的某张图片时，触发预加载图片的操作；或者，浏览图片时的翻页操作，触发预加载图片的操作。

上述待加载图片为浏览相册中的任一图片。在本实施例中，待加载图片为在浏览相册中位于该被点击图片之后的预设数值张图片，或者待加载图片为该浏览相册中未被加载的图片，或者当前屏幕可视区域欲展示出来的图片。

其中，预设数值可以根据系统进行设置并更改，本实施例中对预设数值不做具体限定。

在步骤302中，终端设备创建请求地址为待加载的图片的URL的异步请求对象；

在另一实施例中，终端创建多线程工作对象；并在多线程工作对象中创建异步请求对象；将异步请求对象的请求地址设置为待加载图片的URL。

其中，线程是程序中一个单一的顺序控制流程，在单个程序中同时运行多个线程完成不同的工作，称为多线程。在本实施例中，是在浏览器端运行多个线程来加载待加载的图片，该多线程可以为HTML5（Hyper Text Mark-upLanguage，超文本标记语言）支持的多线程。工作对象可以为web worker工作对象。

web worker是HTML5支持的一个基于终端脚本语言javascript的多线程工作对象。web worker的基本原理是在当前正加载图片的javascript的主线程中，使用web worker工作对象创建一个新的javascript线程，在新的javascript线程中创建异步请求对象，并将该异步请求对象的请求地址设置为待加载的图片的URL，通过该异步请求对象异步加载待加载的图片。新的线程和主线程互不阻塞，从而能够实现在终端的使用HTML5的webworker实现了在浏览器的非UI进程内加载图片。

其中，在本实施例中，异步请求对象可以为XML（eXtensible MarkupLanguage，可扩展标记语言）HttpRequest对象。

其中，当访问一个网站时，在打开一个图片较多的网站前，终端设备先创建一个浏览器端多线程工作对象。当终端设备接收到触发预加载图片的操作时，终端设备创建异步请求对象。

其中，终端设备每加载一张待加载图片，均需要创建一个异步请求对象。

进一步地，异步请求对象通常受到跨域请求限制，如果待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下，终端设备通过异步请求对象将不能正常加载待加载图片。因此，终端设备加载待加载图片之前，需要设置待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。

当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，终端可以设置待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。终端设置服务器返回图片的头信息参数http header，并设置响应头跨域请求码Access-Control-Allow-Origin：*，*表示所有域都可以访问。出于安全考虑，在本发明实施例中，*一般设置为用户访问的Web站点所在的域。

其中，*表示所有域都可以访问，设置Access-Control-Allow-Origin：*，则发送获取请求可以访问待加载图片的图片资源所在的域；因此，待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。

在步骤303中，终端设备通过异步请求对象异步加载待加载图片；

其中，多线程工作对象中新创建的javascript线程和主线程互不阻塞，将异步请求对象的请求地址设置为待加载的图片的URL，可以实现在终端设备使用HTML5的webworker实现了在浏览器的非UI进程内加载图片。

其中，通过异步请求对象异步加载待加载图片的操作，可以为：终端设备向服务器发送异步请求，该异步请求的请求地址为待加载图片的URL；服务器接收终端设备发送的异步请求，并根据该异步请求的请求地址获取该待加载图片的URL。然后，服务器根据该待加载图片的URL获取待加载图片，并发送待加载图片的图片资源给终端设备。

在步骤304中，终端设备将待加载的图片存储在缓存目录中；

较佳地，终端设备接收服务器发送的待加载图片，并利用浏览器自身的静态资源缓存机制将从服务器获得的待加载图片的图片资源存储在缓存目录中。

其中，静态资源缓存机制是浏览器内部实现的一种功能，默认设置下会缓存网络上已经加载过的图片。

其中，在一个实施例中，终端将硬盘或者闪存划分出一定的存储空间，并将该存储空间作为缓存目录。

在步骤305中，终端设备加载显示该待加载图片。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

参见图4，当缓存目录中保存待加载图片的图片资源时，该方法包括：

在步骤401中，终端设备向服务器发送验证请求，该验证请求携带待加载图片的标识，使服务器根据该验证请求判断缓存目录中存储的待加载图片是否有效；

在一个实施例中，终端设备向服务器发送验证请求，该验证请求携带待加载图片的标识。服务器接收终端设备发送的该验证请求后，根据该验证请求携带的待加载图片的标识，判断缓存目录中存储的待加载图片是否有效。

其中，服务器判断缓存目录中存储的待加载图片是否有效的操作，可以为：

服务器根据终端设备发送的验证请求获取待加载图片的标识，根据待加载图片的标识获取待加载图片在缓存目录中存储的时间，判断待加载图片在缓存目录中存储的时间是否大于第一预设时间，如果是，服务器确定出缓存目录中存储的待加载图片无效；如果否，服务器确定出缓存目录中存储的待加载图片有效。

其中，服务器判断缓存目录中存储的待加载图片是否有效的操作，还可以为：

服务器获取待加载图片当前的MD5值，并获取待加载图片存储的MD5值，判断待加载图片当前的MD5值和待加载图片存储的MD5值是否相等，如果相等，则缓存目录中存储的待加载图片没有被篡改，服务器确定出缓存目录中存储的待加载图片有效；如果不相等，则缓存目录中存储的待加载图片已被篡改，服务器确定出缓存目录中存储的待加载图片无效。

在一个实施例中，终端设备验证待加载图片是否有效的操作，还可以为：终端设备设置待加载图片对应的页面为监控区域，每隔第二预设时间抓取该监控区域的内容，然后将当前抓取的监控区域的内容与本地保存的或最近一次抓取的监控区域内容比较，如果有差异就确定出待浏览的图片对应的页面发生了变化，终端设备进一步确定出待加载图片无效；如果无差异确定出待浏览的图片对应的页面没有发生变化，终端设备进一步确定出待加载图片有效。

在一个实施例中，当终端设备接收到预触发加载图片的操作时，终端设备向服务器发送验证请求。其中，触发预加载图片的操作可以为：点击浏览相册中的某张图片时，触发预加载图片的操作；或者，浏览图片时的翻页操作，触发预加载图片的操作。

上述待加载图片为浏览相册中的任一图片。在本实施例中，待加载图片为在浏览相册中位于该被点击图片之后的预设数值张图片，或者待加载图片为该浏览相册中未被加载的图片，或者当前屏幕可视区域欲展示出来的图片。待加载图片的标识为任一可以标识待加载图片的标识，可以为待加载图片的名称，或者，待加载图片的MD5值等。

其中，第一预设时间、第二预设时间和预设数值可以根据系统进行设置并更改，本实施例中对第一预设时间、第二预设时间和预设数值不做具体限定。

进一步地，当服务器判断出缓存目录中存储的待加载图片是否有效后，服务器向终端设备发送验证响应；当缓存目录中存储的待加载图片有效时，该验证响应携带用于提示待加载图片有效的标识；当缓存目录中存储的待加载图片无效时，该验证响应携带用于提示待加载图片无效的标识。

其中，用于提示待加载图片有效的标识可以为状态码304，例如，终端设备向服务器发送http请求，该http请求携带待加载图片的标识。服务器接收终端设备发送的http请求，并根据该http请求携带的待加载图片的标识判断缓存目录中存储的待加载图片是否有效，如果有效，服务器向终端设备发送http响应，该http响应的状态码为304；如果无效，服务器向终端设备发送http响应，该http响应的状态码为除304之外的其他状态码，以提示待加载图片无效。

在步骤402中，终端设备接收服务器发送的验证响应，并确定该验证响应是否携带用于提示待加载图片有效的标识，如果是，执行步骤403；如果否，执行步骤404；

在步骤403中，终端设备从缓存目录中加载待加载图片，执行步骤405；

在一个实施例中，终端设备确定出服务器发送的验证响应携带用于提示待加载图片有效的标识时，根据待加载图片的标识，从缓存目录中加载待加载图片。

其中，在一个实施例中，终端将硬盘或者闪存划分出一定的存储空间，并将该存储空间作为缓存目录。

在步骤404中，终端设备从服务器中加载待加载图片；

在一个实施例中，终端设备确定出服务器发送的验证响应携带用于提示待加载图片无效的标识时，获取待加载图片的URL，创建请求地址为待加载图片的URL的异步请求对象，通过异步请求对象异步，从服务器中加载待加载图片。

在步骤405中，终端设备加载显示该待加载图片。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。并且，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

本实施例提供了一种加载图片的方法，此方法可以应用到终端设备中。参见图5，其中，该方法包括：

在步骤501中，终端设备检测到加载待加载图片的指令时，在缓存目录中查找待加载图片的图片资源；

其中，加载待加载图片的指令可以为点击浏览相册中的某张图片，或者，浏览图片时的翻页操作等。

上述待加载图片为浏览相册中的任一图片。在本实施例中，待加载图片为在浏览相册中位于该被点击图片之后的预设数值张图片，或者待加载图片为该浏览相册中未被加载的图片，或者当前屏幕可视区域欲展示出来的图片。

其中，预设数值可以根据系统进行设置并更改，本实施例中对预设数值不做具体限定。

进一步地，当缓存目录中保存了待加载图片的图片资源时，则可以查找到图片资源，执行步骤502；当缓存目录中未保存待加载图片的图片资源时，无法查找到，则执行步骤505。

在步骤502中，终端设备向服务器发送验证请求，该验证请求携带待加载图片的标识，使服务器根据该验证请求判断缓存目录中存储的待加载图片是否有效；

在一个实施例中，终端设备向服务器发送验证请求，该验证请求携带待加载图片的标识。服务器接收终端设备发送的该验证请求后，根据该验证请求携带的待加载图片的标识，判断缓存目录中存储的待加载图片是否有效。

其中，服务器判断缓存目录中存储的待加载图片是否有效的操作，可以为：

服务器根据终端设备发送的验证请求获取待加载图片的标识，根据待加载图片的标识获取待加载图片在缓存目录中存储的时间，判断待加载图片在缓存目录中存储的时间是否大于第一预设时间，如果是，服务器确定出缓存目录中存储的待加载图片无效；如果否，服务器确定出缓存目录中存储的待加载图片有效。

其中，服务器判断缓存目录中存储的待加载图片是否有效的操作，还可以为：

服务器获取待加载图片当前的MD5值，并获取待加载图片存储的MD5值，判断待加载图片当前的MD5值和待加载图片存储的MD5值是否相等，如果相等，则缓存目录中存储的待加载图片没有被篡改，服务器确定出缓存目录中存储的待加载图片有效；如果不相等，则缓存目录中存储的待加载图片已被篡改，服务器确定出缓存目录中存储的待加载图片无效。

在一个实施例中，终端设备验证待加载图片是否有效的操作，还可以为：终端设备设置待加载图片对应的页面为监控区域，每隔第二预设时间抓取该监控区域的内容，然后将当前抓取的监控区域的内容与本地保存的或最近一次抓取的监控区域内容比较，如果有差异就确定出待浏览的图片对应的页面发生了变化，终端设备进一步确定出待加载图片无效；如果无差异确定出待浏览的图片对应的页面没有发生变化，终端设备进一步确定出待加载图片有效。

在一个实施例中，当终端设备接收到预触发加载图片的操作时，终端设备向服务器发送验证请求。其中，触发预加载图片的操作可以为：点击浏览相册中的某张图片时，触发预加载图片的操作；或者，浏览图片时的翻页操作，触发预加载图片的操作。

上述待加载图片为浏览相册中的任一图片。在本实施例中，待加载图片为在浏览相册中位于该被点击图片之后的预设数值张图片，或者待加载图片为该浏览相册中未被加载的图片，或者当前屏幕可视区域欲展示出来的图片。待加载图片的标识为任一可以标识待加载图片的标识，可以为待加载图片的名称，或者，待加载图片的MD5值等。

其中，第一预设时间、第二预设时间和预设数值可以根据系统进行设置并更改，本实施例中对第一预设时间、第二预设时间和预设数值不做具体限定。

进一步地，当服务器判断出缓存目录中存储的待加载图片是否有效后，服务器向终端设备发送验证响应；当缓存目录中存储的待加载图片有效时，该验证响应携带用于提示待加载图片有效的标识；当缓存目录中存储的待加载图片无效时，该验证响应携带用于提示待加载图片无效的标识。

在步骤503中，终端设备接收服务器发送的验证响应，并确定该验证响应是否携带用于提示待加载图片有效的标识，如果是，执行步骤504；如果否，执行步骤505；

在步骤504中，终端设备从缓存目录中加载待加载图片，执行步骤509；

在一个实施例中，终端设备确定出服务器发送的验证响应携带用于提示待加载图片有效的标识时，根据待加载图片的标识，从缓存目录中加载待加载图片。

在步骤505中，终端设备获取待加载图片的URL；

在一个实施例中，终端设备向服务器发送加载请求，该加载请求携带待加载图片的标识。服务器接收终端设备发送的该加载请求后，根据该加载请求携带的待加载图片的标识，从图片的标识和图片的URL的对应关系中获取待加载图片的URL。然后，服务器向终端设备发送待加载图片的URL。终端设备接收服务器发送的待加载图片的URL。

其中，需要说明的是，服务器中预先存储有图片的标识和图片的URL的对应关系。

在另一实施例中，当终端设备接收到触发预加载图片的操作时，终端设备获取待加载的图片的URL。其中，触发预加载图片的操作可以为：点击浏览相册中的某张图片时，触发预加载图片的操作；或者，浏览图片时的翻页操作，触发预加载图片的操作。

上述待加载图片为浏览相册中的任一图片。在本实施例中，待加载图片为在浏览相册中位于该被点击图片之后的预设数值张图片，或者待加载图片为该浏览相册中未被加载的图片，或者当前屏幕可视区域欲展示出来的图片。

其中，预设数值可以根据系统进行设置并更改，本实施例中对预设数值不做具体限定。

在步骤506中，终端设备创建请求地址为待加载的图片的URL的异步请求对象；

在另一实施例中，终端创建多线程工作对象；并在多线程工作对象中创建异步请求对象；将异步请求对象的请求地址设置为待加载图片的URL。

其中，线程是程序中一个单一的顺序控制流程，在单个程序中同时运行多个线程完成不同的工作，称为多线程。在本实施例中，是在浏览器端运行多个线程来加载待加载的图片，该多线程可以为HTML5（Hyper Text Mark-upLanguage，超文本标记语言）支持的多线程。工作对象可以为web worker工作对象。

web worker是HTML5支持的一个基于终端脚本语言javascript的多线程工作对象。web worker的基本原理是在当前正加载图片的javascript的主线程中，使用web worker工作对象创建一个新的javascript线程，在新的javascript线程中创建异步请求对象，并将该异步请求对象的请求地址设置为待加载的图片的URL，通过该异步请求对象异步加载待加载的图片。新的线程和主线程互不阻塞，从而能够实现在终端使用HTML5的webworker实现了在浏览器的非UI进程内加载图片。

其中，在本实施例中，异步请求对象可以为XML（eXtensible MarkupLanguage，可扩展标记语言）HttpRequest对象。

其中，当访问一个网站时，在打开一个图片较多的网站前，终端设备先创建一个浏览器端多线程工作对象。当终端设备接收到触发预加载图片的操作时，终端设备创建异步请求对象。

其中，终端设备每加载一张待加载图片，均需要创建一个异步请求对象。

进一步地，异步请求对象通常受到跨域请求限制，如果待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下，终端设备通过异步请求对象将不能正常加载待加载图片。因此，终端设备加载待加载图片之前，需要设置待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。

当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，终端可以设置待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。终端设置服务器返回图片的头信息参数http header，并设置响应头跨域请求码Access-Control-Allow-Origin：*，*表示所有域都可以访问。出于安全考虑，在本发明实施例中，*一般设置为用户访问的Web站点所在的域。

其中，*表示所有域都可以访问，设置Access-Control-Allow-Origin：*，则发送获取请求可以访问待加载图片的图片资源所在的域；因此，待加载图片的图片资源所在的域和发起获取请求的域在同一个域名下。

在步骤507中，终端设备通过异步请求对象异步加载待加载图片；

其中，多线程工作对象中新创建的javascript线程和主线程互不阻塞，将异步请求对象的请求地址设置为待加载的图片的URL，可以实现在终端设备的使用HTML5的webworker实现了在浏览器的非UI进程内加载图片。

其中，通过异步请求对象异步加载待加载图片的操作，可以为：终端设备向服务器发送异步请求，该异步请求的请求地址为待加载图片的URL；服务器接收终端设备发送的异步请求，并根据该异步请求的请求地址获取该待加载图片的URL。然后，服务器根据该待加载图片的URL获取待加载图片，并发送待加载图片的图片资源给终端设备。

在步骤508中，终端设备将待加载的图片存储在缓存目录中；

较佳地，终端设备接收服务器发送的待加载图片，并利用浏览器自身的静态资源缓存机制将从服务器获得的待加载图片的图片资源存储在缓存目录中。

其中，静态资源缓存机制是浏览器内部实现的一种功能，默认设置下会缓存网络上已经加载过的图片。

其中，在一个实施例中，终端将硬盘或者闪存划分出一定的存储空间，并将该存储空间作为缓存目录。

在步骤509中，终端设备加载显示该待加载图片。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

本实施例提供了一种加载图片的装置。参见图6，其中，该装置包括：

查找模块601，用于检测到加载待加载图片的指令时，在缓存目录中查找待加载图片的图片资源；

第一加载模块602，用于当缓存目录中保存待加载图片的图片资源时，从缓存目录中加载待加载图片；

获取模块603，用于当缓存目录中未保存待加载图片的图片资源，获取待加载图片的统一资源定位符URL；

创建模块604，用于创建请求地址为待加载的图片的URL的异步请求对象；

第二加载模块605，用于通过异步请求对象异步，从服务器中加载待加载图片。

进一步地，获取模块603，包括：

发送单元，用于向服务器发送加载请求，该加载请求携带待加载图片的标识，使服务器根据图片的标识和图片的URL的对应关系，获取待加载图片的URL；

接收单元，用于接收服务器发送的待加载图片的URL。

进一步地，创建模块604，包括：

第一创建单元，用于创建多线程工作对象；

第二创建单元，用于在多线程工作对象中创建异步请求对象；

设置单元，用于将异步请求对象的请求地址设置为待加载图片的URL。

进一步地，参见图7，该装置还包括：

设置模块606，用于当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过异步请求对象异步，从服务器中加载待加载图片。

进一步地，该装置还包括：

存储模块607，用于将从服务器获得的待加载图片的图片资源存储在缓存目录中。

进一步地，该装置还包括：

验证模块608，用于向服务器发送验证请求，该验证请求携带待加载图片的标识，使服务器根据该验证请求判断缓存目录中存储的待加载图片是否有效；接收服务器发送的验证响应，并确定该验证响应是否携带用于提示待加载图片有效的标识，如果是，执行从缓存目录中加载待加载图片的操作，如果否，执行从服务器中加载待加载图片的操作。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

本发明实施例提供了一种终端，该终端可以包括一个或多个如下组成部分：用于执行计算机程序指令以完成各种流程和方法的处理器，用于信息和存储程序指令随机接入存储器（RAM）和只读存储器（ROM），用于存储数据和信息的存储器，I/O设备，界面，天线等。

作为一种举例，参见图8所示，其示出了本发明实施例四提供的终端的结构方框图，该终端用于实施上述实施例中提示用户的方法。终端400可以包括RF（Radio Frequency，射频）电路410、存储器420、输入单元430、显示单元440、传感器450、音频电路460、WiFi(wireless fidelity，无线保真)模块470、处理器480、电源482、摄像头490等部件。本领域技术人员可以理解，图8中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图8对终端400的各个构成部件进行具体的介绍：

RF电路410可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器480处理；另外，将设计上行的数据发送给基站。通常，RF电路包括但不限于天线、至少一个放大器、收发信机、耦合器、LNA（Low Noise Amplifier，低噪声放大器）、双工器等。此外，RF电路410还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于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，短消息服务)等。

存储器420可用于存储软件程序以及模块，处理器480通过运行存储在存储器420的软件程序以及模块，从而执行终端400的各种功能应用以及数据处理。存储器420可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据终端400的使用所创建的数据（比如音频数据、电话本等）等。此外，存储器420可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

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

显示单元440可用于显示由用户输入的信息或提供给用户的信息以及终端400的各种菜单。显示单元440可包括显示面板441，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板441。进一步的，触控面板431可覆盖显示面板441，当触控面板431检测到在其上或附近的触摸操作后，传送给处理器480以确定触摸事件的类型，随后处理器480根据触摸事件的类型在显示面板441上提供相应的视觉输出。虽然在图8中，触控面板431与显示面板441是作为两个独立的部件来实现终端400的输入和输入功能，但是在某些实施例中，可以将触控面板431与显示面板441集成而实现终端400的输入和输出功能。

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

音频电路460、扬声器461，传声器462可提供用户与终端400之间的音频接口。音频电路460可将接收到的音频数据转换后的电信号，传输到扬声器461，由扬声器461转换为声音信号输出；另一方面，传声器462将收集的声音信号转换为电信号，由音频电路460接收后转换为音频数据，再将音频数据输出处理器480处理后，经RF电路410以发送给比如另一终端，或者将音频数据输出至存储器420以便进一步处理。

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

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

终端400还包括给各个部件供电的电源482（比如电池），优选的，电源可以通过电源管理系统与处理器482逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

摄像头490一般由镜头、图像传感器、接口、数字信号处理器、CPU、显示屏幕等组成。其中，镜头固定在图像传感器的上方，可以通过手动调节镜头来改变聚焦；图像传感器相当于传统相机的“胶卷”，是摄像头采集图像的心脏；接口用于把摄像头利用排线、板对板连接器、弹簧式连接方式与终端主板连接，将采集的图像发送给所述存储器420；数字信号处理器通过数学运算对采集的图像进行处理，将采集的模拟图像转换为数字图像并通过接口发送给存储器420。

尽管未示出，终端400还可以包括蓝牙模块等，在此不再赘述。

为了实施前文中的加载图片的方法，本发明实施例中的终端包括：

检测到加载待加载图片的指令时，在缓存目录中查找待加载图片的图片资源；

当缓存目录中保存待加载图片的图片资源时，从缓存目录中加载待加载图片；

当缓存目录中未保存待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为待加载图片的URL的异步请求对象；通过异步请求对象异步，从服务器中加载待加载图片。

进一步地，获取待加载图片的统一资源定位符URL，包括：

向服务器发送加载请求，该加载请求携带待加载图片的标识，使服务器根据图片的标识和图片的URL的对应关系，获取待加载图片的URL；

接收服务器发送的待加载图片的URL。

进一步地，创建请求地址为待加载图片的URL的异步请求对象，包括：

创建多线程工作对象；

在多线程工作对象中创建异步请求对象；

将异步请求对象的请求地址设置为待加载图片的URL。

进一步地，当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过异步请求对象异步，从服务器中加载待加载图片。

进一步地，将从服务器获得的待加载图片的图片资源存储在缓存目录中。

进一步地，当缓存目录中保存待加载图片的图片资源时，还包括：

向服务器发送验证请求，该验证请求携带待加载图片的标识，使服务器根据该验证请求判断缓存目录中存储的待加载图片是否有效；

接收服务器发送的验证响应，并确定验证响应是否携带用于提示待加载图片有效的标识；

如果是，执行从缓存目录中加载待加载图片的操作；如果否，执行从服务器中加载待加载图片的操作。

本实施例中提供的加载图片的方法可以为用户提前加载好待浏览的图片，从而大大的减少了用户的等待时间。尤其是使用web worker和AJAX技术（异步数据请求），在不阻塞浏览器UI进程的情况下，可以实现大批量（200张以上）图片的预加载。加载后的图片使用浏览器自身的缓存机制保存在用户磁盘上，当用户访问被预加载过图片资源时，可以通过发送一个304请求在几十毫秒内（速度取决于用户设备的IO读写速度）返回并展示图片。这样使用户在使用诸如网络相册这样的功能时，不需要长时间等待图片资源的加载。

需要说明的是：上述实施例提供的加载图片的装置在加载图片时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的加载图片的装置与加载图片的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (13)

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

检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为所述待加载图片的URL的异步请求对象；通过所述异步请求对象异步，从服务器中加载所述待加载图片。

2.如权利要求1所述的方法，其特征在于，所述获取待加载图片的统一资源定位符URL，包括：

向所述服务器发送加载请求，所述加载请求携带所述待加载图片的标识，使所述服务器根据图片的标识和图片的URL的对应关系，获取所述待加载图片的URL；

接收所述服务器发送的所述待加载图片的URL。

3.如权利要求1所述的方法，其特征在于，所述创建请求地址为所述待加载图片的URL的异步请求对象，包括：

创建多线程工作对象；

在所述多线程工作对象中创建所述异步请求对象；

将所述异步请求对象的请求地址设置为所述待加载图片的URL。

4.如权利要求1所述的方法，其特征在于，当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过所述异步请求对象异步，从服务器中加载所述待加载图片。

5.如权利要求1至4任一所述的方法，其特征在于，将从服务器获得的所述待加载图片的图片资源存储在缓存目录中。

6.如权利要求1所述的方法，其特征在于，当所述缓存目录中保存所述待加载图片的图片资源时，还包括：

向服务器发送验证请求，所述验证请求携带所述待加载图片的标识，使所述服务器根据所述验证请求判断所述缓存目录中存储的所述待加载图片是否有效；

接收所述服务器发送的验证响应，并确定所述验证响应是否携带用于提示所述待加载图片有效的标识；

如果是，执行从所述缓存目录中加载所述待加载图片的操作；如果否，执行所述从服务器中加载所述待加载图片的操作。

7.一种加载图片的装置，其特征在于，所述装置包括：

查找模块，用于检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

第一加载模块，用于当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

获取模块，用于当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；

创建模块，用于创建请求地址为所述待加载的图片的URL的异步请求对象；

第二加载模块，用于通过所述异步请求对象异步，从服务器中加载所述待加载图片。

8.如权利要求7所述的装置，其特征在于，所述获取模块，包括：

发送单元，用于向所述服务器发送加载请求，所述加载请求携带所述待加载图片的标识，使所述服务器根据图片的标识和图片的URL的对应关系，获取所述待加载图片的URL；

接收单元，用于接收所述服务器发送的所述待加载图片的URL。

9.如权利要求7所述的装置，其特征在于，所述创建模块，包括：

第一创建单元，用于创建多线程工作对象；

第二创建单元，用于在所述多线程工作对象中创建所述异步请求对象；

设置单元，用于将所述异步请求对象的请求地址设置为所述待加载图片的URL。

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

设置模块，用于当待加载图片的图片资源所在的域和发起获取请求的域不在同一个域名下时，设置服务器返回图片的头信息参数和响应头跨域请求码后，再通过所述异步请求对象异步，从服务器中加载所述待加载图片。

11.如权利要求7-10任一所述的装置，其特征在于，所述装置还包括：

存储模块，用于将从服务器获得的所述待加载图片的图片资源存储在缓存目录中。

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

验证模块，用于向服务器发送验证请求，所述验证请求携带所述待加载图片的标识，使所述服务器根据所述验证请求判断所述缓存目录中存储的所述待加载图片是否有效；接收所述服务器发送的验证响应，并确定所述验证响应是否携带用于提示所述待加载图片有效的标识，如果是，执行从所述缓存目录中加载所述待加载图片的操作，如果否，执行所述从服务器中加载所述待加载图片的操作。

13.一种终端，其特征在于，所述终端包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，所述一个或多个模块具有如下功能：

检测到加载待加载图片的指令时，在缓存目录中查找所述待加载图片的图片资源；

当所述缓存目录中保存所述待加载图片的图片资源时，从所述缓存目录中加载所述待加载图片；

当所述缓存目录中未保存所述待加载图片的图片资源，获取待加载图片的统一资源定位符URL；创建请求地址为所述待加载图片的URL的异步请求对象；通过所述异步请求对象异步，从服务器中加载所述待加载图片。

Images