CN110929197A - 一种网页图片的预览加载方法和装置 - Google Patents

Abstract

本发明提供了一种网页图片的预览加载方法和装置，涉及图片处理的技术领域，包括：确定用于显示在显示界面的当前显示区域内的目标图片；向服务器发送第一异步请求，并获取服务器反馈的目标图片的压缩图片和压缩图片的标识信息；将压缩图片显示在当前显示区域内，并向服务器发送基于标识信息生成的第二异步请求，并获取服务器反馈的目标图片的原始图片；将目标图片的原始图片存储至第一数据库中；若检测到用户在当前显示区域中执行的第一操作，则从第一数据库中获取目标原始图片，并将目标原始图片显示在显示界面，目标原始图片为目标图片的原始图片中的任意图片，解决了现有技术中在加载高清图片时加载速度较慢的技术问题。

Description

一种网页图片的预览加载方法和装置

技术领域

本发明涉及图片处理技术领域，尤其是涉及一种网页图片的预览加载方法和装置。

背景技术

现在网页上会有大量各式各样的图片，用户浏览图片时需要等待图片加载且产生流量费用，尤其在现在的图片越来越清晰越来越大的情况下，很多用户自主上传图片类博客网站因用户手机像素动辄4000万像素，甚至有1亿像素的手机，像素提高而导致图片质量很大，有的甚至达到30M-50M。而这样的用户自主上传图片类的网站网页如果要保证其他用户看到的图片也是上传时的质量大小的话，用户在获取图片时图片加载速度慢，甚至页面卡顿，导致体验不好。

针对上述问题，还未提出有效的解决方案。

发明内容

有鉴于此，本发明的目的在于提供一种网页图片的预览加载方法和装置，以缓解了现有技术中的终端设备在加载高清图片时加载速度较慢的技术问题。

第一方面，本发明实施例提供了一种网页图片的预览加载方法，包括：确定用于显示在显示界面的当前显示区域内的目标图片；向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；将所述目标图片的原始图片存储至第一数据库中；其中，若检测到用户在所述当前显示区域中执行的第一操作，则从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

进一步地，从所述第一数据库中获取目标原始图片包括：向所述第一数据库发送第一获取请求；获取所述第一数据库基于所述第一获取请求所反馈的目标原始图片。

进一步地，在获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息之后，所述方法还包括：将所述压缩图片存储在第二数据库中。

进一步地，在将所述压缩图片显示在所述当前显示区域内之后，所述方法还包括：若检测到用户在所述显示界面中执行的第二操作，则基于所述第二操作向第二数据库发送第二获取请求，并获取所述第二数据库基于所述第二获取请求反馈的压缩图片；将所述第二数据库反馈的压缩图片再次显示在所述当前显示区域中。

进一步地，所述第一异步请求携带有所述目标图片的压缩参数；所述目标图片的压缩图片为所述服务器基于所述压缩参数对所述目标图片进行压缩之后得到的图片。

进一步地，在确定用于显示在显示界面的当前显示区域内的目标图片之前，所述方法还包括：获取所述显示界面中滚动条的属性信息，其中，所述属性信息包括以下至少之一：所述滚动条的高度，所述滚动条与所述滚动条移动范围的顶部之间的距离；基于所述属性信息，确定出所述当前显示区域。

进一步地，确定用于显示在显示界面的当前显示区域内的目标图片，包括：获取所述当前显示区域的高度信息，以及获取目标网页所显示图片的图片参数，其中，所述图片参数包括：图片DOM节点img元素的高度图片DOM节点img元素的宽度，所述显示界面为所述目标网页的界面；基于所述高度信息和所述图片参数，确定出所述目标图片。

第二方面，本发明实施例还提供了一种网页图片的预览加载装置，包括：确定单元，第一获取单元，第二获取单元，第一存储单元和第一执行单元，其中，所述确定单元用于确定用于显示在显示界面的当前显示区域内的目标图片；所述第一获取单元用于向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；所述第二获取单元用于将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；所述第一存储单元将所述目标图片的原始图片存储至第一数据库中；所述第一执行单元用于在检测到用户在所述当前显示区域中执行的第一操作的情况下，从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

第三方面，本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行第一方面所述的网页图片的预览加载方法。

第四方面，本发明实施例还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面中所述的网页图片的预览加载方法。

在本发明实施例中，首先，确定用于显示在显示界面的当前显示区域内的目标图片；接着，向服务器发送第一异步请求，并获取服务器反馈的目标图片的压缩图片和压缩图片的标识信息，其中，标识信息表示压缩图片的原始图片在服务器中的存储位置；然后，将压缩图片显示在当前显示区域内，并向服务器发送基于标识信息生成的第二异步请求，并获取服务器反馈的目标图片的原始图片；最后，将目标图片的原始图片存储至第一数据库中，其中，若检测到用户在当前显示区域中执行的第一操作，则从第一数据库中获取目标原始图片，并将目标原始图片显示在显示界面，目标原始图片为目标图片的原始图片中的任意图片。

在本申请实施例中，通过向服务器发送第一异步请求获取目标图片的用于预览的压缩图片和压缩图片的标识信息，然后根据标识信息向服务器发送用于加载的目标图片的原始图片，并将原始图片分别存储至第一数据库，当用户需要加载任意一张目标图片的原始图片时，从第一数据库获取该目标图片的原始图片显示在显示界面中，达到了快速高效的加载原始图片的目的，进而解决了现有技术中在加载高清图片时加载速度较慢的技术问题，从而实现了能够快速高效的加载原始图片的技术效果。

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

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种网页图片的预览加载方法的流程图；

图2为本发明实施例提供的另一种网页图片的预览加载方法的流程图；

图3为本发明实施例提供的一种网页图片的预览加载装置的示意图；

图4为本发明实施例提供的一种服务器的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

当前现有的技术方案分为解决网页图片加载速度，和网页图片预览方法两大方向技术方案。

A类方法瀑布流加载形式，这种一般基于浏览器滚动轴的滑动(移动端监听触摸滑动)去分布加载可视区范围内的图片，不需要全部加载整个页面的图片。

B类方法是硬件存储形式，提前存储到硬件设备中，用时再获取。

C类方法是本地存好图片，判断图片大于如200k情况就直接获取本地的文件。

D类方法是将图片转化成其它占用内存较小的格式图片，进行展示。

但是上述方法存在以下确定缺点：

A类方法的缺点是瀑布流方案虽然解决了不需要一次性把所有图片全部加载完的问题，但是他还是会加载当前页面的所有原图，跟本申请的技术方案比还是会消耗成倍的流量和加载时间。且滚动鼠标或者滑动屏幕后还是要等待下一屏的图片加载，还是会大量消耗时间和不好的用户体验。

B类方案缺点很明显，需要有存储的硬件设备，不适用于所有用户，入门门槛高，费用高。

C类方案缺点也很明显，因为是提前本地存好的图片，如果是动态图片，本地没有的提前存好那么就失去了意义。所以只适合于静态网页网站，不需要更新图。

D类方案，转化成其他格式的图片，会严重影响用户体验，比如用户如果需要下载图片下的不是原图，甚至图片格式都变了。并且即使转化成其他格式缩小的内存也不明显，无法达到快速加载提升用户体验。

本申请通过以下实施例解决上述缺点，具体实施例如下所述：

实施例一：

根据本发明实施例，提供了一种网页图片的预览加载方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种网页图片的预览加载方法的流程图，如图1所示，该方法应用于终端设备，包括如下步骤：

步骤S102，确定用于显示在显示界面的当前显示区域内的目标图片；

步骤S104，向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；

具体的，第一异步请求携带有目标图片的压缩参数，目标图片的压缩图片为所述服务器基于所述压缩参数对所述目标图片进行压缩之后得到的图片。

步骤S106，将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；

步骤S108，将所述目标图片的原始图片存储至第一数据库中；

步骤S110，若检测到用户在所述当前显示区域中执行的第一操作，则从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

具体的，在检测到用户在当前显示区域中执行的第一操作，向第一数据库发送第一获取请求，获取第一数据库基于所述第一获取请求所反馈的目标原始图片。

需要说明的是，上述第一操作可以为单击或双击显示在显示界面上的任意一张目标图片的压缩图片，当检测到用户单击或双击显示在显示界面上的任意一张目标图片的压缩图片时，终端设备将生成第一获取请求，并将第一获取请求发送给第一数据库，使得第一数据库基于第一获取请求将上述的任意一张目标图片的原始图片(即，目标原始图片)发送给终端设备，并显示在显示界面中。

在本申请实施例中，通过向服务器发送第一异步请求获取目标图片的用于预览的压缩图片和压缩图片的标识信息，然后根据标识信息向服务器发送用于加载的目标图片的原始图片，并将原始图片分别存储至第一数据库，当用户需要加载任意一张目标图片的原始图片时，从第一数据库获取该目标图片的原始图片显示在显示界面中，达到了快速高效的加载原始图片的目的，进而解决了现有技术中在加载高清图片时加载速度较慢的技术问题，从而实现了能够快速高效的加载原始图片的技术效果。

需要说明的是，上述的第一数据库可以采用indexedDb数据库，indexedDb数据库的优点是存储量极大，不小于250M，针对大多数浏览器indexedDb数据库的存储量已经上不封顶，并且保存时间久的特点。关闭页面关闭浏览器后也不会删除indexedDb数据库中存储数据。

上述的终端设备可以为手机，平板电脑，PC等能够加载浏览器的终端设备，在本申请实施例中不做具体限定。

另外，还需要说明的是，在本申请实施例中，当服务器获取到终端设备发送的携带压缩参数的第一异步请求时，通过以下方式对目标图片进行压缩：

服务器在获取到终端设备发送的携带压缩参数的第一异步请求之后，首先，创建一个空白图片对象并存于变量d中，将目标图片添加图片的二进制文件流base64，目标图片地址加载完成后执行操作，具体操作方法如下：

变量d挂载onload方法当图片地址加载完成后创建两个变量，变量Width和变量Height，即将要设置需要压缩图片的宽度Width和高度Height。这两个值可以是前端发起ajax请求是传给服务器的也可以设置默认值，也可以传输需要的像素尺寸大小等参数。

按照，压缩参数开始对目标图片进行画压缩图。

此时创建变量e，在通过createElement()方法指定创建canvas元素。

创建变量f，使得变量e执行getContext方法，并执行合法值“2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API(ApplicationProgramming Interface,应用程序编程接口)，返回一个表示用来绘制的环境类型的环境信息。

将变量e即canvas元素，使变量e的宽度和高度等同于变量Width和变量Height。即将canvas元素设置裁剪后的高度和宽度。

设置变量f并使用drawImage方法，此方法也能够绘制图片的某些部分，以及增加或减少图片的尺寸。将在画布上定位图片，并规定图片的宽度和高度。

设置变量g，将变量e使用toDataURL方法，此方法是canvas中将图片的二进制格式转为dataURL格式使用的方法，dataURL是将数据按base64进行编码。传入提前设置好的压缩参数，该压缩参数是设置压缩图片的质量，数字越小压缩图片越模糊，输出格式为image/jpeg或者image/png格式的图片(即，目标图片的压缩图片)。

还需要说明的是，本申请实施例中，通过以下方法从服务器中获取并存储目标图片的原始图片：

由于在获取到目标图片的压缩图片的同时还获取到了目标图片的原图字段标识(即，标识信息)，将原图字段存于数组中并利用for循环异步调用ajax接口去请求原始图片。

返回的原始图片二进制文件流将存于indexedDb本地数据库(即，第一数据库)中。

首先利用indexedDb.open()创建或者打开数据库，使用createObjectStore()方法，创建一个objectStore，将存储所有的原图真实图片数据。

初始化一个数据库事务，要开始向indexedDb本地数据库写入内容。

如transaction.objectStore(“imgBase”).put(blob,”imgage”),获得所需的objectStore的引用，然后将blob放入其中并为其提供秘钥。

当用户想要查看原始图片时，就从indexedDb数据库中读出保存的原始图片并创建ObjectURL将其展示为网页中的img元素src(即，source)。

由于已经把所有当前显示区域内的所有目标图片的原始图片都已经存储到了indexedDb数据库中，所以这时用户想点击放大查看某个目标图片的原图不需要再向服务器发送请求，就节省了大量的时间，提高了用户体验。

而用户如果继续浏览页面，那么将重复上述的步骤，将剩下的图逐步存储在本地数据库中，indexedDb数据库的优点是存储量极大，不小于250M，且大多数浏览器已经上不封顶，并且保存时间久的特点。关闭页面关闭浏览器后也不会删除数据。

所以当用户下次再访问此页面或者反复刷新此页面，都不会去向服务器再发起图片的请求。

另外，由于服务器不知道indexedDb本地数据库存储过哪些图，有没有存过，所以要前后端进行双重验证。前端在存储文件的同时也存储图片的特殊标记hash值，和浏览器和用户IP等特殊标记，此值是服务器返回目标图片的原始图片时生成的并存到服务器，用于终端设备发起请求时进行验证。

验证的流程是前端利用JavaScript通过执行基于目标图片的压缩图片生成的ajax请求和本地数据库中的hash特殊符号标记进行对比，为了防止用户主动删除indexedDb本地数据库和其他情况下indexedDb本地数据库丢失情况，如果发现并没有找到对应原图那就重新发起原图异步请求。如果发现对比成功那就只发送hash和浏览器标识/IP等值。此时服务器再进行对比验证，选择是否返回数据。

在本发明实施例中，在获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息之后，所述方法还包括如下步骤：

步骤S11，将所述压缩图片存储在第二数据库中。

在本发明实施例中，当获取到服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息之后，将压缩图片存储在第二数据库中。

需要说明的是，在本发明是实施例中，第二数据库采用的是LocalStroge数据库。

在本发明实施例中，如图2所示，在将所述压缩图片显示在所述当前显示区域内之后，所述方法还包括如下步骤：

步骤S21，若检测到用户在所述显示界面中执行的第二操作，则基于所述第二操作向第二数据库发送第二获取请求，并获取所述第二数据库基于所述第二获取请求反馈的压缩图片；

步骤S22，将所述第二数据库反馈的压缩图片再次显示在所述当前显示区域中。

在本发明实施例中，将压缩图片显示在当前显示区域内之后，如果检测到用户在显示界面中执行的第二操作(例如，刷新当前显示区域，关闭显示界面后重新打开该显示界面等)，则向基于第二操作向第二数据库发送第二获取请求，并获取第二数据库基于第二获取请求反馈的压缩图片，并将第二数据库反馈的压缩图片再次显示在当前显示区域中。

在检测到用户在显示界面中执行的第二操作之后，直接从第一数据库中获取压缩图片，而不是再次从服务器获取压缩图片，由于第一数据库为本地数据库，因此，上述重新加载的动作不用耗费流量，同时也提高了网页重新加载的速度，提升了用户体验。

在本发明实施例中，在确定用于显示在显示界面的当前显示区域内的目标图片之前，所述方法还包括如下步骤：

步骤S31，获取所述显示界面中滚动条的属性信息，其中，所述属性信息包括以下至少之一：所述滚动条的高度，所述滚动条与所述滚动条移动范围的顶部之间的距离；

步骤S32，基于所述属性信息，确定出所述当前显示区域。

在本发明是实施例中，通过以下步骤确定出当前显示区域，具体包括：

获取当前显示区域的滚动条高度scrollHeight和动条与滚动条移动范围的顶部之间的距离scrollTop；

获取可视区展示区域高度height，并监听鼠标滚动事件scroll()或者屏幕触摸事件touchmove()事件；

判断当scrollTop+height>＝scrollHeight时即用户滚动鼠标和滑动屏幕而获取新的图片。

通过确定当前显示区域，并针对当先显示区域的目标图片的压缩图片，和目标图片的原始图片进行获取，而当前显示区域以外的图片则在用户通过鼠标或屏幕滑动后出现在当前显示区域时再进行获取其对应的压缩图片和原始图片，这样能够有效的降低用户的流量消耗，同时也能减轻目标图片所属网站的负载。

在本发明实施例中，步骤S102还包括如下步骤：

步骤S41，获取所述当前显示区域的高度信息，以及获取目标网页所显示图片的图片参数，其中，所述图片参数包括：图片DOM节点img元素的高度，图片DOM节点img元素的宽度，所述显示界面为所述目标网页的界面；

步骤S42，基于所述高度信息和所述图片参数，确定出所述目标图片。

在本发明实施例中，为了确定当前显示区域中应该显示出的图片，首先，需要获取所述当前显示区域的高度信息，以及获取目标网页所显示图片的图片DOM节点img元素的高度，图片DOM节点img元素的宽度，从而确定出目标图片的数量以及目标图片，从而针对性的从服务器获取目标图片的压缩图片和原始图片。

本发明实施例中，通过执行上述步骤S31，步骤S32，步骤S41和步骤S42来获取目标图片，由于上述的步骤中的都是数据量较小的用于预览的压缩图片，且只请求当前显示区域的目标图片的压缩图片，这样达到了用户预览网页图片时的高速，无感知，无等待，体验优，不多消耗不必要的流量的技术效果。

实施例二：

本发明还提供了一种网页图片的预览加载装置的实施例，该装置用于执行本发明实施例上述内容所提供的网页图片的预览加载方法，以下是本发明实施例提供的网页图片的预览加载装置的具体介绍。

如图3所示，上述的网页图片的预览加载装置应用于终端设备，包括：确定单元10，第一获取单元20，第二获取单元30，第一存储单元40和第一执行单元50。

所述确定单元10用于确定用于显示在显示界面的当前显示区域内的目标图片；

所述第一获取单元20用于向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；

所述第二获取单元30用于将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；

所述第一存储单元40将所述目标图片的原始图片存储至第一数据库中；

所述第一执行单元50用于在检测到用户在所述当前显示区域中执行的第一操作的情况下，从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

在本申请实施例中，通过向服务器发送第一异步请求获取目标图片的用于预览的压缩图片和压缩图片的标识信息，然后根据标识信息向服务器发送用于加载的目标图片的原始图片，并将原始图片分别存储至第一数据库，当用户需要加载任意一张目标图片的原始图片时，从第一数据库获取该目标图片的原始图片显示在显示界面中，达到了快速高效的加载原始图片的目的，进而解决了现有技术中在加载高清图片时加载速度较慢的技术问题，从而实现了能够快速高效的加载原始图片的技术效果。

优选地，所述第一获取单元还用于：向所述第一数据库发送第一获取请求；获取所述第一数据库基于所述第一获取请求所反馈的目标原始图片。

优选地，所述装置还包括：第二存储单元，用于在获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息之后，将所述压缩图片存储在第二数据库中。

优选地，所述装置还包括：第二执行单元，在将所述压缩图片显示在所述当前显示区域内之后，若检测到用户在所述显示界面中执行的第二操作，则基于所述第二操作向第二数据库发送第二获取请求，并获取所述第二数据库基于所述第二获取请求反馈的压缩图片；将所述第二数据库反馈的压缩图片再次显示在所述当前显示区域中。

优选地，所述第一异步请求携带有所述目标图片的压缩参数；所述目标图片的压缩图片为所述服务器基于所述压缩参数对所述目标图片进行压缩之后得到的图片。

优选地，所述确定单元还用于：获取所述显示界面中滚动条的属性信息，其中，所述属性信息包括以下至少之一：所述滚动条的高度，所述滚动条与所述滚动条移动范围的顶部之间的距离；基于所述属性信息，确定出所述当前显示区域。

优选地，所述确定单元还用于：获取所述当前显示区域的高度信息，以及获取目标网页所显示图片的图片参数，其中，所述图片参数包括：图片DOM节点img元素的高度，图片DOM节点img元素的宽度，所述显示界面为所述目标网页的界面；基于所述高度信息和所述图片参数，确定出所述目标图片。

本发明实施例提供的一种具有处理器可执行的非易失的程序代码的计算机可读介质，程序代码使处理器执行上述实施例一中的网页图片的预览加载方法。

本发明实施例提供的一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例一中的网页图片的预览加载方法。

参见图4，本发明实施例还提供一种服务器100，包括：处理器60，存储器61，总线62和通信接口63，所述处理器60、通信接口63和存储器61通过总线62连接；处理器60用于执行存储器61中存储的可执行模块，例如计算机程序。

其中，存储器61可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口63(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。

总线62可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

其中，存储器61用于存储程序，所述处理器60在接收到执行指令后，执行所述程序，前述本发明实施例任一实施例揭示的流过程定义的装置所执行的方法可以应用于处理器60中，或者由处理器60实现。

处理器60可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器60中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器60可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital SignalProcessing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器61，处理器60读取存储器61中的信息，结合其硬件完成上述方法的步骤。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种网页图片的预览加载方法，其特征在于，应用于终端设备，包括：

确定用于显示在显示界面的当前显示区域内的目标图片；

向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；

将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；

将所述目标图片的原始图片存储至第一数据库中；

其中，若检测到用户在所述当前显示区域中执行的第一操作，则从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

2.根据权利要求1所述的方法，其特征在于，从所述第一数据库中获取目标原始图片包括：

向所述第一数据库发送第一获取请求；

获取所述第一数据库基于所述第一获取请求所反馈的目标原始图片。

3.根据权利要求1所述的方法，其特征在于，在获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息之后，所述方法还包括：

将所述压缩图片存储在第二数据库中。

4.根据权利要求3所述的方法，其特征在于，在将所述压缩图片显示在所述当前显示区域内之后，所述方法还包括：

若检测到用户在所述显示界面中执行的第二操作，则基于所述第二操作向第二数据库发送第二获取请求，并获取所述第二数据库基于所述第二获取请求反馈的压缩图片；

将所述第二数据库反馈的压缩图片再次显示在所述当前显示区域中。

5.根据权利要求1至3中任一项所述的方法，其特征在于，

所述第一异步请求携带有所述目标图片的压缩参数；

所述目标图片的压缩图片为所述服务器基于所述压缩参数对所述目标图片进行压缩之后得到的图片。

6.根据权利要求1所述的方法，其特征在于，在确定用于显示在显示界面的当前显示区域内的目标图片之前，所述方法还包括：

获取所述显示界面中滚动条的属性信息，其中，所述属性信息包括以下至少之一：所述滚动条的高度，所述滚动条与所述滚动条移动范围的顶部之间的距离；

基于所述属性信息，确定出所述当前显示区域。

7.根据权利要求5所述的方法，其特征在于，确定用于显示在显示界面的当前显示区域内的目标图片，包括：

获取所述当前显示区域的高度信息，以及获取目标网页所显示图片的图片参数，其中，所述图片参数包括：图片DOM节点img元素的高度，图片DOM节点img元素的宽度，所述显示界面为所述目标网页的界面；

基于所述高度信息和所述图片参数，确定出所述目标图片。

8.一种网页图片的预览加载装置，其特征在于，应用于终端设备，包括：确定单元，第一获取单元，第二获取单元，第一存储单元和第一执行单元，其中，

所述确定单元用于确定用于显示在显示界面的当前显示区域内的目标图片；

所述第一获取单元用于向服务器发送第一异步请求，并获取所述服务器反馈的所述目标图片的压缩图片和所述压缩图片的标识信息，其中，所述标识信息表示所述压缩图片的原始图片在所述服务器中的存储位置；

所述第二获取单元用于将所述压缩图片显示在所述当前显示区域内，并向所述服务器发送基于所述标识信息生成的第二异步请求，并获取所述服务器反馈的所述目标图片的原始图片；

所述第一存储单元将所述目标图片的原始图片存储至第一数据库中；

所述第一执行单元用于在检测到用户在所述当前显示区域中执行的第一操作的情况下，从所述第一数据库中获取目标原始图片，并将所述目标原始图片显示在所述显示界面，所述目标原始图片为所述目标图片的原始图片中的任意图片。

9.一种具有处理器可执行的非易失的程序代码的计算机可读介质，其特征在于，所述程序代码使所述处理器执行上述权利要求1至7中任一项所述的网页图片的预览加载方法。

10.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至7中任一项所述的网页图片的预览加载方法。

Images