图片加载显示方法和装置与流程

本申请涉及图像处理领域，特别是涉及图片加载显示方法和装置。

背景技术：

通常，当显示页面时，如果页面中包含有页面图片，就需要先对该页面图片进行加载，然后将加载后的页面图片进行显示。

目前，现有技术中显示页面图片的加载方式都是：针对每一个页面图片，先将该页面图片完整地加载进来，然后再对该页面图片进行显示。而在该页面图片被完整地加载进来之前，一般会在该页面图片的显示位置先显示一些其他内容。例如，预先设定一个默认图片或者一个提示符(如，该提示符可以为菊花转)，在该页面图片完整地加载进来之前，先显示默认图片或者该提示符，在该页面图片完整地加载进来之后，再用该页面图片替换默认图片或者该提示符。再例如，在该页面图片完整地加载进来之前，先显示用色块(如，该色块的颜色可以与该页面图片的颜色接近)填充的图片，在该页面图片完整地加载进来之后，再用该页面图片替换用色块填充的图片。

在实现本申请的过程中，本申请的发明人发现现有技术中至少存在如下问题：在页面图片被完整地加载进来之前，显示给用户的是其它内容(如，默认图片、提示符或者用色块填充的图片)，而并不是页面图片的内容。也就是说，在加载页面图片的过程中，用户并不知道将会看到什么内容的页面图片，也不知道该页面图片是否是自己感兴趣的图片，必须要等待一段时间直到该页面图片完整地加载完毕并显示出来后才能确定。特别是当页面图片的数据量比较大时，用户就需要等待很长时间才能看到页面图片，从而才能确定是否是自己感兴趣的图片。

技术实现要素：

为了解决上述技术问题，本申请实施例提供了图片加载显示方法和装置，以解决现有技术中用户需要等待比较长的时间才能看到页面图片，从而才能 确定是否是自己感兴趣的图片的问题。

本申请实施例公开了如下技术方案：

一种图片加载显示方法，包括：

确定页面图片的加载内容；

逐个加载所述页面图片的加载内容；

每当一个加载内容加载完毕后，就将加载完毕的所述加载内容进行显示；

其中，所述页面图片的加载内容为所述页面图片内容的轮廓、或者为所述页面图片内容的轮廓以及所述轮廓中的颜色和细节信息中的至少一种，所述轮廓的加载优先级最高。

优选的，所述轮廓中的颜色的加载优先级高于所述轮廓中的细节信息的加载优先级。

优选的，所述确定页面图片的加载内容，包括：

识别当前设定的加载模式；

根据所述当前设定的加载模式确定页面图片的加载内容，其中，加载模式不同，所述页面图片的加载内容不同。

优选的，所述加载模式根据当前网络的类型或者当前网络的实际网络速度自动设定，其中，当前网络的类型对应的网络速度越大或者当前网络的实际网络速度越大，设定的加载模式中对应的加载内容越多，当前网络的类型对应的网络速度越小或者当前网络的实际网络速度越小，设定的加载模式中对应的加载内容越少。

优选的，所述加载模式由用户手动设定。

优选的，当对所述轮廓中的颜色进行加载时，主体轮廓中的颜色的加载优先级高于背景轮廓中的颜色的加载优先级。

一种图片加载显示装置，包括：

确定单元，用于确定页面图片的加载内容；

加载单元，用于逐个加载所述页面图片的加载内容；

显示单元，用于每当一个加载内容加载完毕后，就将加载完毕的所述加载内容进行显示；

其中，所述页面图片的加载内容为所述页面图片内容的轮廓、或者为所 述页面图片内容的轮廓以及所述轮廓中的颜色和细节信息中的至少一种，所述轮廓的加载优先级最高。

优选的，所述轮廓中的颜色的加载优先级高于所述轮廓中的细节信息的加载优先级。

优选的，所述确定单元包括：

模式识别子单元，用于识别当前设定的加载模式；

内容确定子单元，用于根据所述当前设定的加载模式确定页面图片的加载内容，其中，加载模式不同，所述页面图片的加载内容不同。

优选的，所述加载模式根据当前网络的类型或者当前网络的实际网络速度自动设定，其中，当前网络的类型对应的网络速度越大或者当前网络的实际网络速度越大，设定的加载模式中对应的加载内容越多，当前网络的类型对应的网络速度越小或者当前网络的实际网络速度越小，设定的加载模式中对应的加载内容越少。

优选的，所述加载模式由用户手动设定。

优选的，当对所述轮廓中的颜色进行加载时，主体轮廓中的颜色的加载优先级高于背景轮廓中的颜色的加载优先级。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

与现有技术中将页面图片完整地加载完毕后再显示该页面图片不同，本申请是将页面图片分成不同的加载内容，并以加载内容为单元，逐个加载内容地进行加载，并且，每加载完一个加载内容后就进行显示，从而实现了页面图片的一边加载一边显示的效果。对于用户来说，其并不需要等待太长时间，就可以先看到页面图片中的一部分加载内容，从而在该页面图片尚未完全显示出来之前，就可以先根据已经看到的一部分加载内容确定该页面图片是否是自己感兴趣的图片。如果是自己感兴趣的图片，用户就可以继续等待直到页面图片被完整地显示出来，如果不是自己感兴趣的图片，用户就可以滚动屏幕和/或页面继续查看其他内容。

附图说明

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

图1示意性地示出了本申请的实施方式可以在其中实施的示例性应用场景；

图2示意性地示出了根据本申请实施例的一种图片加载显示方法的方法流程图；

图3示意性地示出了根据本申请实施例的一种极速模式下的页面图片的加载内容的显示示意图；

图4示意性地示出了根据本申请实施例的一种流畅模式下的页面图片的加载内容的显示示意图；

图5示意性地示出了根据本申请实施例的一种快速模式下的页面图片的加载内容的显示示意图；

图6示意性地示出了根据本申请实施例的一种完整模式下的页面图片的加载内容的显示示意图；

图7示意性地示出了根据本申请实施例的一种图片加载显示装置的结构框图；

图8示意性地示出了根据本申请实施例的一种确定单元的结构框图。

具体实施方式

首先参考图1，图1示意性地示出了本申请的实施方式可以在其中实施的示例性应用场景。其中，当用户打开客户端10上的APP时，客户端10加载该APP的应用页面20，并在客户端10的显示屏11上显示加载后的应用页面20。如果在应用页面20中包含有页面图片21，客户端10在加载应用页面20时就需要加载页面图片21，并将加载后的页面图片21也显示在显示屏11上。客户端10可以是PC机，也可以是移动设备，例如，手机或平板电脑等。本领域技术人员可以理解，图1所示的示意图仅是本申请的实施方式可以在其中得以实现的一个示例。本申请实施方式的应用范围不受到该框架任何方面的限制。例如，当用户打开客户端10上的浏览器并在地址输入栏中输入网页地址时，如果网页地址对应的网页页面中包含有页面图片，客 户端10在加载网页页面时需要加载页面图片，并将加载后的页面图片显示在显示屏上。

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图对本申请实施例进行详细描述。

方法实施例

请参阅图2，图2示意性地示出了根据本申请实施例的一种图片加载显示方法的方法流程图，例如，该方法可以由客户端10执行，该方法例如可以包括以下步骤：

步骤201：确定页面图片的加载内容。

步骤201：逐个加载所述页面图片的加载内容。

步骤203：每当一个加载内容加载完毕后，就将加载完毕的所述加载内容进行显示。

其中，页面图片的加载内容可以为页面图片内容的轮廓，也可以为页面图片内容的轮廓以及轮廓中的颜色，也可以为页面图片内容的轮廓以及轮廓中的细节信息，还可以为页面图片内容的轮廓、轮廓中的颜色以及细节信息。

例如，如果页面图片内容包含一个人以及一朵天空中的云，则页面图片内容的轮廓即为一个人的轮廓以及一朵云的轮廓，如图3所示。而针对人的轮廓来说，其轮廓中的细节信息即为人的五官以及衣服上的图案等等。

当页面图片的加载内容包含两个以上时，例如，同时包含页面图片内容的轮廓、轮廓中的颜色以及细节信息，为了便于用户尽快地了解页面图片的内容，并确定是否是自己感兴趣的图片，页面图片内容的轮廓的加载优先级最高(因为轮廓的信息量最大，信息也相对更加全面)。也就是说，针对以上三个加载内容，最先加载页面图片内容的轮廓，从而最先将页面图片内容的轮廓显示给用户。

针对以上三个加载内容，当最先加载完页面图片内容的轮廓之后，对于轮廓中的颜色以及细节信息，可以先加载其中的任意一个。

而在本申请的一个优选实施方式中，轮廓中的颜色的加载优先级高于轮 廓中的细节信息的加载优先级。也就是说，加载优先级从高到低的排序为：页面图片内容的轮廓、轮廓中的颜色、轮廓中的细节信息。因此，当最先加载完页面图片内容的轮廓之后，优先加载轮廓中的颜色，最后加载轮廓中的细节信息。显然，加载顺序决定了显示顺序，即，最先显示页面图片内容的轮廓，再显示轮廓中的颜色，最后显示轮廓中的细节信息。

当然，如果页面图片的加载内容仅包含有页面图片内容的轮廓以及轮廓中的颜色，就先加载页面图片内容的轮廓，再加载轮廓中的颜色。如果页面图片的加载内容仅包含页面内容的轮廓以及轮廓中的细节信息，就先加载页面图片内容的轮廓，再加载轮廓中的细节信息。

在本申请中，可以预先为页面图片布置多个不同的加载模式，并且，加载模式不同，页面图片的加载内容也就不同。因此，通过设定页面图片的加载模式，就可以设定页面图片的加载内容。

基于此，在本申请的另一个优选实施方式，可以识别当前设定的加载模式，根据所述当前设定的加载模式确定页面图片的加载内容。

例如，页面图片的加载模式可以为四种：极速模式、流畅模式、快速模式和完整模式。其中，极速模式对应的加载内容为页面图片内容的轮廓(如图3所示)；流畅模式对应的加载内容为页面图片内容的轮廓以及轮廓中的颜色(如图4所示)；快速模式对应的加载内容为也页面图片内容的轮廓以及轮廓中的细节信息(如图5所示)；完整模式对应的加载内容为页面图片内容的轮廓、轮廓中的颜色以及细节信息(如图6所示)。

其中，需要说明的是，为了加快加载速度，在图4中所示的流畅模式中，在轮廓中加载的颜色的透明度比较小。而在图6中所示的完整模式中，在轮廓中加载的颜色的透明度比较大。

在本申请的另一个优选实施方式中，加载模式可以由用户手动设定。例如，用户通过单独的设置页面对加载模式进行设定。当然，用户可以将加载模式永久性地设定为某一种模式，也可以将加载模式暂时性地设定为某一种模式，用户还可以对之前设定的加载模式进行变更。

另外，在本发明的另一个优选实施方式中，所述加载模式根据当前网络的类型或者当前网络的实际网络速度自动设定，其中，当前网络的类型对应 的网络速度越大或者当前网络的实际网络速度越大，设定的加载模式中对应的加载内容越多，当前网络的类型对应的网络速度越小或者当前网络的实际网络速度越小，设定的加载模式中对应的加载内容越少。

例如，可以在客户端10中安置一个网络检测模块，通过网络检测模块可以检测出用户当前使用的网络类型。而不同的网络类型，其对应的网络速度也是不同的，对于网络速度大的网络类型，可以自动设定一个加载内容多的加载模式，而对于网络速度小的网络类型，可以自动设定一个加载内容少的加载模式。在本申请中，具体可以预先设定网络类型与加载模式之间的映射关系，从而，在检测出当前网络的类型后，就可以根据该映射关系进一步确定需要设定的加载模式。

或者，也可以在客户端10中安置一个网速检测模块，通过网速检测模块可以检测出用户当前使用的网络的实际网络速度。同样，对于网络速度大的网络类型，可以自动设定一个加载内容多的加载模式，而对于网络速度小的网络类型，可以自动设定一个加载内容少的加载模式。在本申请中，具体可以为不同的加载模式设定不同的网络速度范围，在检测出当前网络的实际网络速度后，就可以确定该实际网络速度落入哪个加载模式的网络速度范围，从而最终确定需要设定的加载模式。而按照网络速度从大到小的顺序所对应的加载模式可以为：完整模式、快速模式、流畅模式和极速模式。

另外，在本申请的另一个优选实施方式中，当对轮廓中的颜色进行加载时，针对不同的轮廓，其颜色加载的优先顺序为：先对主体轮廓中的颜色进行加载，再对背景轮廓中的颜色进行加载。例如，在图像中，分为前景和后景。前景的轮廓即为主体轮廓，后景的轮廓即为背景轮廓。当然，加载的颜色即为图片内容的实际颜色。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

与现有技术中将页面图片完整地加载完毕后再显示该页面图片不同，本申请是将页面图片分成不同的加载内容，并以加载内容为单元，逐个加载内容地进行加载，并且，每加载完一个加载内容后就进行显示，从而实现了页面图片的一边加载一边显示的效果。对于用户来说，其并不需要等待太长时间，就可以先看到页面图片中的一部分加载内容，从而在该页面图片尚未完 全显示出来之前，就可以先根据已经看到的一部分加载内容确定该页面图片是否是自己感兴趣的图片。如果是自己感兴趣的图片，用户就可以继续等待直到页面图片被完整地显示出来，如果不是自己感兴趣的图片，用户就可以滚动屏幕和/或页面继续查看其他内容。

装置实施例

与上述一种图片加载显示方法相对应，本申请实施例还提供了一种图片加载显示装置。请参阅图7，图7示意性地示出了根据本申请实施例的一种图片加载显示装置的结构框图，该装置包括确定单元701、加载单元702和显示单元703。下面结合该装置的工作原理进一步介绍其内部结构以及连接关系。

确定单元701，用于确定页面图片的加载内容；

加载单元702，用于逐个加载所述页面图片的加载内容；

显示单元703，用于每当一个加载内容加载完毕后，就将加载完毕的所述加载内容进行显示；

其中，所述页面图片的加载内容为所述页面图片内容的轮廓、或者为所述页面图片内容的轮廓以及所述轮廓中的颜色和细节信息中的至少一种，所述轮廓的加载优先级最高。

在本申请的一个优选实施方式中，所述轮廓中的颜色的加载优先级高于所述轮廓中的细节信息的加载优先级。

在本申请的另一个优选实施方式中，如图8所示，确定单元701包括：

模式识别子单元7011，用于识别当前设定的加载模式；

内容确定子单元7012，用于根据所述当前设定的加载模式确定页面图片的加载内容，其中，加载模式不同，所述页面图片的加载内容不同。

在本申请的另一个优选实施方式中，所述加载模式根据当前网络的类型或者当前网络的实际网络速度自动设定，其中，当前网络的类型对应的网络速度越大或者当前网络的实际网络速度越大，设定的加载模式中对应的加载内容越多，当前网络的类型对应的网络速度越小或者当前网络的实际网络速度越小，设定的加载模式中对应的加载内容越少。

或者，在本申请的另一个优选实施方式中，所述加载模式由用户手动设 定。

在本申请的另一个优选实施方式中，当对所述轮廓中的颜色进行加载时，主体轮廓中的颜色的加载优先级高于背景轮廓中的颜色的加载优先级。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

与现有技术中将页面图片完整地加载完毕后再显示该页面图片不同，本申请是将页面图片分成不同的加载内容，并以加载内容为单元，逐个加载内容地进行加载，并且，每加载完一个加载内容后就进行显示，从而实现了页面图片的一边加载一边显示的效果。对于用户来说，其并不需要等待太长时间，就可以先看到页面图片中的一部分加载内容，从而在该页面图片尚未完全显示出来之前，就可以先根据已经看到的一部分加载内容确定该页面图片是否是自己感兴趣的图片。如果是自己感兴趣的图片，用户就可以继续等待直到页面图片被完整地显示出来，如果不是自己感兴趣的图片，用户就可以滚动屏幕和/或页面继续查看其他内容。

所述领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中， 也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，可以采用软件功能单元的形式实现。

需要说明的是，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上对本申请所提供的图片加载显示方法和装置进行了详细介绍，本文中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。