CN110609718A - 图片加载方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

本申请实施例提供一种图片加载方法、装置、电子设备及可读存储介质，能够根据图片加载控件的元素布局信息，确定图片加载控件在图片加载过程中的图片缓存信息，从而根据图片缓存信息动态控制图片加载控件的图片加载，以提高当需要显示大数据量级的图片数据时图片加载控件的加载速度，降低内存资源和CPU资源的占用。

Description

图片加载方法、装置、电子设备及可读存储介质

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种图片加载方法、装置、电子设备及可读存储介质。

背景技术

随着直播行业发展，需要直播平台下显示大量的直播间阅览等数据，当需要显示大数据量级的图片数据时，目前显示加载网络图片的图片加载控件加载速度较慢，占用内存资源和CPU资源较大，从而造成图片显示速度缓慢。

发明内容

有鉴于此，本申请的目的在于提供一种图片加载方法、装置、电子设备及可读存储介质，以提高当需要显示大数据量级的图片数据时图片加载控件的加载速度，降低内存资源和CPU资源的占用。

根据本申请的一方面，提供一种图片加载方法，应用于电子设备，所述方法包括：

根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息，所述图片缓存信息包括可缓存图片数量和可释放图片数量；

根据所述图片缓存信息控制所述图片加载控件的图片加载。

在一种可能的实施方式中，所述根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息的步骤，包括：

获取所述图片加载控件的元素布局信息，所述元素布局信息包括所述图片加载控件的高度、宽度以及元素布局方式；

根据所述元素布局信息以及每个元素的高度和宽度，确定所述图片加载控件的可视区域中的可显示图片数量；

根据所述可显示图片数量确定所述图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量。

在一种可能的实施方式中，所述元素布局方式包括所述图片加载控件在高度方向上每一列的可显示图片数量，以及在宽度方向上每一行的可显示图片数量，所述根据所述元素布局信息以及每个元素的高度和宽度，确定所述图片加载控件的可视区域中的可显示图片数量的步骤，包括：

根据所述图片加载控件的高度和每个元素的高度，确定所述图片加载控件的可视区域中在高度方向上的第一可显示图片数量；

根据所述图片加载控件的宽度和每个元素的宽度，确定所述图片加载控件的可视区域中在宽度方向上的第二可显示图片数量；

根据所述元素布局方式、所述第一可显示图片数量和所述第二可显示图片数量确定所述图片加载控件的可视区域中的可显示图片数量。

在一种可能的实施方式中，所述根据所述可显示图片数量确定所述图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量的步骤，包括：

根据所述可显示图片数量和预先设定的缓存容器大小，确定所述图片加载控件在图片加载过程中的可缓存图片数量；

根据所述可缓存图片数量和预先设定的释放比例确定所述图片加载控件在图片加载过程中可释放图片数量。

在一种可能的实施方式中，所述根据所述图片缓存信息控制所述图片加载控件的图片加载的步骤之前，所述方法还包括：

在所述图片加载控件的图片加载过程中，根据所述图片加载控件的元素布局信息和所需加载的图片数据量，确定所述图片加载控件的可视区域中的图片显示信息，其中，所述图片显示信息包括每行需显示的图片数量以及图片显示的总行数；

根据所述图片显示信息，确定所述图片加载控件在加载图片数据后的高度和宽度，并根据所述加载图片数据后的高度和宽度配置所述图片加载控件对应的滚动条信息；

根据所述滚动条信息在所述图片加载控件的可视区域中展示对应的滚动条。

在一种可能的实施方式中，所述方法还包括：

获取所述可视区域的滚动条位置，并根据所述滚动条位置确定所述可视区域的起始可视位置和末端可视位置；

根据所述可视区域的起始可视位置和末端可视位置配置所述可视区域的剪裁区；

控制所述图片加载控件在所述可视区域的剪裁区内进行图片加载。

在一种可能的实施方式中，所述根据所述图片缓存信息控制所述图片加载控件的图片加载的步骤，包括：

在所述图片加载控件缓存图片的过程中，当检测到图片内存队列中的缓存图片数量超过所述可缓存图片数量时，从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片。

在一种可能的实施方式中，所述从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片的步骤，包括：

按照该图片内存队列的已缓存图片的索引顺序由后到前的顺序，从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片。

在一种可能的实施方式中，所述方法还包括：

获取所述图片加载控件的可视区域中待加载的每个图片的图片地址；

针对每个图片，根据该图片的图片地址生成对应的哈希索引值，并根据所述哈希索引值查找所述图片内存队列中是否存在对应的已缓存图片；

当查找到所述图片内存队列中存在对应的已缓存图片时，将该已缓存图片在所述图片内存队列的索引顺序提前，并将该已缓存图片加载到所述图片加载控件的可视区域中进行显示。

在一种可能的实施方式中，所述方法还包括：

当查找到所述图片内存队列中不存在对应的已缓存图片时，在所述图片加载控件的可视区域中采用默认图片显示该图片，并从所述电子设备的本地缓存中查找是否存在该图片；

若从所述电子设备的本地缓存中查找到存在该图片，则将该图片加入到所述图片内存队列中；

若从所述电子设备的本地缓存中查找到不存在该图片，则从网站服务器中下载该图片，并将该图片加入到所述图片内存队列中；

从所述图片内存队列中将加入的该图片加载到所述图片加载控件的可视区域中替换该默认图片。

根据本申请的另一方面，提供一种图片加载装置，应用于电子设备，所述装置包括：

确定模块，用于根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息，所述图片缓存信息包括可缓存图片数量和可释放图片数量；

加载控制模块，用于根据所述图片缓存信息控制所述图片加载控件的图片加载。

根据本申请的另一方面，提供一种电子设备，所述电子设备包括机器可读存储介质及处理器，所述机器可读存储介质存储有机器可执行指令，所述处理器在执行所述机器可执行指令时，该电子设备实现前述的图片加载方法。

根据本申请的另一方面，提供一种可读存储介质，所述可读存储介质中存储有机器可执行指令，所述机器可执行指令被执行时实现前述的图片加载方法。

基于上述任一方面，本申请能够根据图片加载控件的元素布局信息，确定图片加载控件在图片加载过程中的图片缓存信息，从而根据图片缓存信息动态控制图片加载控件的图片加载，以提高当需要显示大数据量级的图片数据时图片加载控件的加载速度，降低内存资源和CPU资源的占用。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了一种图片加载方案的示意图；

图2示出了本申请实施例所提供的图片加载方法的流程示意图之一；

图3示出了图1中所示的步骤S110的一种子步骤流程示意图；

图4示出了本申请实施例所提供的图片加载方法的流程示意图之二；

图5示出了本申请实施例所提供的图片加载方法的流程示意图之三；

图6示出了本申请实施例所提供的图片加载过程的示意图之一；

图7示出了本申请实施例所提供的图片加载过程的示意图之二；

图8示出了本申请实施例所提供的图片加载装置的功能模块示意图；

图9示出了本申请实施例所提供的用于实现上述图片加载方法的电子设备的结构示意框图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解，本申请中附图仅起到说明和描述的目的，并不用于限定本申请的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本申请中使用的流程图示出了根据本申请实施例的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请内容的指引下，可以向流程图添加一个或多个其它操作，也可以从流程图中移除一个或多个操作。

另外，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其它实施例，都属于本申请保护的范围。

如前述背景技术所获知的技术问题，下面结合图1所示的示例对一种图片加载方案进行示例性阐述。

如图1所示，对于一个网站的图片加载控件来说，可包括多个元素，每个元素即对应图1中所示的每张图片。该图片加载控件通常可包括可视区域和不可视区域，可视区域可以理解为用户可通过终端设备所展示的显示界面直接观看到的区域。相对应地，不可视区域可以理解为用户当前不可通过终端设备所展示的显示界面直接观看到，但是可通过界面调整看到的区域。

目前的图片加载方案中，通常会预先缓存待加载的所有图片，以减少用户的等待时间。例如，通常会预先缓存并加载图片加载控件的不可视区域中包含的所有图片，这样就会导致当网站需要显示大数据量级的图片数据时，由于网络资源有限，从而导致加载网络图片的图片加载控件在可视区域中的加载速度较慢，并且占用内存资源和CPU资源较大，造成图片显示速度缓慢。

为此，基于上述技术问题的发现，发明人提出下述技术方案以解决或者改善上述问题。需要注意的是，以上现有技术中的方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本申请实施例针对上述问题所提出的解决方案，都应该是发明人在发明创造过程中对本申请做出的贡献，而不应当理解为本领域技术人员所公知的技术内容。

图2示出了本申请实施例提供的图片加载方法的流程示意图，应当理解，在其它实施例中，本实施例的图片加载方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。该图片加载方法的详细步骤介绍如下。

步骤S110，根据图片加载控件的元素布局信息，确定图片加载控件在图片加载过程中的图片缓存信息。

步骤S130，根据图片缓存信息控制图片加载控件的图片加载。

本实施例中，为避免当网站需要显示大数据量级的图片数据时，由于网络资源有限从而导致加载网络图片的图片加载控件加载速度较慢的问题，并且降低内存资源和CPU资源的占用，针对不同的图片加载控件而言，通常可能会有不同的元素布局，基于此，可以根据图片加载控件的元素布局信息，确定相关的图片缓存信息。

图片缓存信息可包括可缓存图片数量和可释放图片数量。可缓存图片数量可以是指该图片加载控件最多可缓存的图片数量，可释放图片数量可以是指图片加载控件在缓存的图片数量超过可缓存图片数量时每次可释放的数量。

如此，本实施例提供的图片加载方法，能够根据图片加载控件的元素布局信息，确定图片加载控件在图片加载过程中的图片缓存信息，从而根据图片缓存信息动态控制图片加载控件的图片加载，以提高当需要显示大数据量级的图片数据时图片加载控件的加载速度，降低内存资源和CPU资源的占用。

上述图片加载控件的元素布局信息可以根据实际需要随时进行调整，由于不同的图片加载控件通常可能会有不同的元素布局，考虑到元素布局的不同维度，接下来针对步骤S110提出一些可能的实施方式以更加准确地根据图片加载控件的元素布局信息确定图片缓存信息。请结合参阅图3，步骤S110具体可以包括子步骤S111、子步骤S112以及子步骤S113，具体描述如下。

子步骤S111，获取图片加载控件的元素布局信息。

子步骤S112，根据元素布局信息以及每个元素的高度和宽度，确定图片加载控件的可视区域中的可显示图片数量。

子步骤S113，根据可显示图片数量确定图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量。

本实施例中，元素布局信息可包括图片加载控件的高度、宽度以及元素布局方式。详细地，图片加载控件的高度、宽度以及元素布局方式通常可以是指图1中所示的可视区域的高度、宽度以及元素布局方式。元素布局方式可以是指图片加载控件在高度方向上每一列的可显示图片数量，以及在宽度方向上每一行的可显示图片数量，以图1为例，图片加载控件的元素布局方式则为：在高度方向上每一列均可显示3张图片，在宽度方向上每一行均可显示6张图片。或者，在其它可能的示例中，在高度方向上每一列和在宽度方向上每一行也可分别显示不同张图片，例如在第一列可显示3张图片，在第二列可显示4张图片；在第一行可显示6张图片，在第二行可显示5张图片。因此可以理解的是，图片加载控件的元素布局方式可以根据实际网站设计需求进行调整，本实施例对此不作任何现在。

由此，本实施例进一步考虑到图片加载控件的高度、宽度以及元素布局方式，从而更加准确客观地确定图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量。

在一些可能的实施方式中，针对子步骤S112，具体可以根据图片加载控件的高度和每个元素的高度，确定图片加载控件的可视区域中在高度方向上的第一可显示图片数量。同时，可以根据图片加载控件的宽度和每个元素的宽度，确定图片加载控件的可视区域中在宽度方向上的第二可显示图片数量。最后，根据元素布局方式、第一可显示图片数量和第二可显示图片数量确定图片加载控件的可视区域中的可显示图片数量。

例如，假设图片加载控件A的高度为100，宽度为150，其元素布局方式为高度方向上最多可显示10张图片，宽度方向上最多可显示10张图片，每个元素的高度为10，宽度为15，那么图片加载控件A的可视区域中在高度方向上的第一可显示图片数量为100/10＝10，在宽度方向上的第二可显示图片数量为150/15＝10，那么图片加载控件A的可视区域中的可显示图片数量则可以为10*10＝100张。又例如，如果图片加载控件A的元素布局方式为高度方向上最多可显示10张图片，宽度方向上最多可显示8张图片，那么图片加载控件A的可视区域中的可显示图片数量则可以为10*8＝80张。又例如，如果其元素布局方式不变，每个元素的高度为20，宽度为30，那么图片加载控件A的可视区域中的可显示图片数量则可以为5*5＝25张。

由此，在一些可能的实施方式中，可以以图片加载控件的可视区域中的可显示图片数量为基准，根据实际需求设定一个缓存容器大小，例如可以设置缓存容器大小为三个可视区域的可显示图片数量大小。

在此基础上，可以根据可显示图片数量和预先设定的缓存容器大小，确定图片加载控件在图片加载过程中的可缓存图片数量。例如，如果可显示图片数量为25张，预先设定的缓存容器大小为三个可视区域的可显示图片数量大小，那么则可以确定图片加载控件在图片加载过程中的可缓存图片数量为25*3＝75张。

接下来，可以预先设定一个释放比例以根据可缓存图片数量和预先设定的释放比例确定图片加载控件在图片加载过程中可释放图片数量。仍旧以上述示例为例，假设释放比例为1/3，那么图片加载控件在图片加载过程中可释放图片数量则可以为75/3＝25张。

示例性地，上述的可显示图片数量和可缓存图片数量可以满足如下关系(以缓存容器大小为三个可视区域的可显示图片数量大小、释放比例为1/3为例)：

图片缓存数量ImgChcheCount＝(图片加载控件宽度CtrlWidth/元素平均宽度ElementAvgWidth*图片加载控件高度CtrlHeight/元素平均高度ElementAvgHeight)*3

可缓存图片数量ImgChcheClennCount＝图片缓存数量ImgChcheCount/3。

在一些可能的实施方式中，为便于用户能够快速阅览图片，请参阅图4，本实施例提供的图片加载方法还可以包括步骤S120、步骤S121以及步骤S122，具体描述如下。

步骤S120，在图片加载控件的图片加载过程中，根据图片加载控件的元素布局信息和所需加载的图片数据量，确定图片加载控件的可视区域中的图片显示信息。

本实施例中，在具体加载图片过程中，可以预先获知所需加载的图片数据量，从而确定图片加载控件的可视区域中的图片显示信息，图片显示信息可以包括每行需显示的图片数量以及图片显示的总行数。

步骤S121，根据图片显示信息，确定图片加载控件在加载图片数据后的高度和宽度，并根据加载图片数据后的高度和宽度配置图片加载控件对应的滚动条信息。

例如，假设图片显示信息为：每行需显示5张图片，图片显示的总行数为10行，由于每张图片的高度和宽度是确定的，因此可以确定图片加载控件在加载图片数据后的高度可以为10行乘以每行图片的平均高度，宽度为5乘以每张图片的平均宽度。然后，根据加载图片数据后的高度和宽度以配置图片加载控件对应的滚动条信息，例如滚动范围最小值,滚动范围最大值等。

步骤S122，根据滚动条信息在图片加载控件的可视区域中展示对应的滚动条。

如此，本实施例通过在图片加载控件的可视区域中展示对应的滚动条，可以便于用户通过快速拖动滚动条以快速阅览图片。

在一些可能的实施方式中，为了防止图片加载控件在绘制图片时绘制出可视区域外，造成不必要的CPU资源占用，影响图片加载速度，请进一步参阅图5，在步骤S122之后，本实施例提供的图片加载方法还可以包括步骤S123、步骤S124以及步骤S125，具体描述如下。

步骤S123，获取可视区域的滚动条位置，并根据滚动条位置确定可视区域的起始可视位置和末端可视位置。

步骤S124，根据可视区域的起始可视位置和末端可视位置配置可视区域的剪裁区。

步骤S125，控制图片加载控件在可视区域的剪裁区内进行图片加载。

例如，请结合参阅图6，在图片加载控件的可视区域中展示对应的滚动条的过程中，可通过获取可视区域的滚动条位置，滚动条位置可以反映当前可视区域的起始可视位置和末端可视位置，也即当前可视区域从第几行开始，到第几行结束。然后，通过根据可视区域的起始可视位置和末端可视位置配置可视区域的剪裁区，在后续图片加载过程中控制图片加载控件仅在可视区域的剪裁区内进行图片加载，而不预先加载不可视区域的图片。例如，仍旧参阅图6，与图1中的不可视区域所不同的是，图6中的不可视区域的图片仅缓存在图片内存队列中，但并未预先加载。

如此，能够有效避免图片加载控件在绘制图片时绘制出可视区域外的情况，进一步降低CPU资源占用，提高可视区域的图片加载速度。

由此，针对图片加载控件缓存图片的过程中，通常缓存图片都存储在图片内存队列中，在一种可能的实施方式中，针对步骤S130，当检测到图片内存队列中的缓存图片数量超过可缓存图片数量时，则可从该图片内存队列的已缓存图片中释放可释放图片数量个图片。

例如，假设可缓存图片数量为120，可释放图片数量为40，那么当检测到图片内存队列中的缓存图片数量超过120张时，则可从该图片内存队列的已缓存图片中释放40张图片。

如此，在整个图片加载过程中，都可以根据该图片缓存信息动态控制图片加载控件的图片加载，以提高当需要显示大数据量级的图片数据时图片加载控件的加载速度，降低内存资源和CPU资源的占用。

在一些可能的实施方式中，在释放图片时，考虑到实际业务场景中一些已缓存图片优先级更高，为保证用户体验，可以按照该图片内存队列的已缓存图片的索引顺序由后到前的顺序，从该图片内存队列的已缓存图片中释放可释放图片数量个图片。

其中，可以根据每个已缓存图片的缓存时间确定索引顺序，缓存时间越久，索引顺序越靠后。因此以上述示例为例，可以从该图片内存队列的已缓存图片中释放缓存时间最久的40张图片。

如此，可以保证优先级更高的已缓存图片的缓存时长，保证用户浏览体验。

在一些可能的实施方式中，在可视区域中加载图片过程中，首先可获取图片加载控件的可视区域中待加载的每个图片的图片地址。然后，针对每个图片，根据该图片的图片地址生成对应的哈希索引值(例如md5 hash索引值)，并根据哈希索引值查找图片内存队列中是否存在对应的已缓存图片。当查找到图片内存队列中存在对应的已缓存图片时，则将该已缓存图片在图片内存队列的索引顺序提前。例如，可该已缓存图片在图片内存队列的索引顺序提前到首位索引顺序。接着，可将该已缓存图片加载到图片加载控件的可视区域中进行显示。

此外，当查找到图片内存队列中不存在对应的已缓存图片时，在图片加载控件的可视区域中采用默认图片显示该图片，并从电子设备的本地缓存中查找是否存在该图片。若从电子设备的本地缓存中查找到存在该图片，则将该图片加入到图片内存队列中。若从电子设备的本地缓存中查找到不存在该图片，则从网站服务器中下载该图片，并将该图片加入到图片内存队列中。由此，从图片内存队列中将加入的该图片加载到图片加载控件的可视区域中替换该默认图片。

例如，请结合参阅图7，针对可视区域的第一行图片(图片1、图片2、图片3、图片4、图片5、图片6)，当查找到图片内存队列中不存在图片1、图片2、图片3、图片4、图片5、图片6对应的已缓存图片时，则在图片加载控件的可视区域中采用默认图片显示图片1、图片2、图片3、图片4、图片5、图片6，并从本地缓存中查找是否存在图片1、图片2、图片3、图片4、图片5、图片6。若从本地缓存中查找到存在图片1、图片2、图片3、图片4、图片5、图片6中的任意一张图片，例如从本地缓存中查找到存在图片1，则将图片1加载到该可视区域中替换该默认图片。若从电子设备的本地缓存中查找到不存在图片1、图片2、图片3、图片4、图片5、图片6中的任意一张图片，例如从本地缓存中查找到不存在图片2和图片3，则从网站服务器中下载图片2和图片3并加入到图片内存队列中，从而将图片2和图片3加载到该可视区域中替换该默认图片。

如此，通过多种优先级的图片加载方式，能够在保证加载速度的同时降低CPU资源及内存占用资源。

基于同一发明构思，请参阅图8，示出了本申请实施例提供的图片加载装置200的功能模块示意图，本实施例可以根据上述方法实施例对图片加载装置200进行功能模块的划分。例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。需要说明的是，本申请实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。比如，在采用对应各个功能划分各个功能模块的情况下，图8示出的图片加载装置200只是一种装置示意图。其中，图片加载装置200可以包括确定模块210以及加载控制模块220，下面分别对该图片加载装置200的各个功能模块的功能进行详细阐述。

确定模块210，用于根据图片加载控件的元素布局信息，确定图片加载控件在图片加载过程中的图片缓存信息，图片缓存信息包括可缓存图片数量和可释放图片数量。可以理解，该确定模块210可以用于执行上述步骤S110，关于该确定模块210的详细实现方式可以参照上述对步骤S110有关的内容。

加载控制模块220，用于根据图片缓存信息控制图片加载控件的图片加载。可以理解，该加载控制模块220可以用于执行上述步骤S130，关于该加载控制模块220的详细实现方式可以参照上述对步骤S130有关的内容。

在一种可能的实施方式中，确定模块210具体可以通过如下方式确定图片加载控件在图片加载过程中的图片缓存信息：

获取图片加载控件的元素布局信息，元素布局信息包括图片加载控件的高度、宽度以及元素布局方式；

根据元素布局信息以及每个元素的高度和宽度，确定图片加载控件的可视区域中的可显示图片数量；

根据可显示图片数量确定图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量。

在一种可能的实施方式中，元素布局方式包括图片加载控件在高度方向上每一列的可显示图片数量，以及在宽度方向上每一行的可显示图片数量，确定模块210具体可以通过如下方式确定图片加载控件的可视区域中的可显示图片数量：

根据图片加载控件的高度和每个元素的高度，确定图片加载控件的可视区域中在高度方向上的第一可显示图片数量；

根据图片加载控件的宽度和每个元素的宽度，确定图片加载控件的可视区域中在宽度方向上的第二可显示图片数量；

根据元素布局方式、第一可显示图片数量和第二可显示图片数量确定图片加载控件的可视区域中的可显示图片数量。

在一种可能的实施方式中，确定模块210具体可以通过如下方式确定图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量：

根据可显示图片数量和预先设定的缓存容器大小，确定图片加载控件在图片加载过程中的可缓存图片数量；

根据可缓存图片数量和预先设定的释放比例确定图片加载控件在图片加载过程中可释放图片数量。

在一种可能的实施方式中，确定模块210具体还可以用于：

在图片加载控件的图片加载过程中，根据图片加载控件的元素布局信息和所需加载的图片数据量，确定图片加载控件的可视区域中的图片显示信息，其中，图片显示信息包括每行需显示的图片数量以及图片显示的总行数；

根据图片显示信息，确定图片加载控件在加载图片数据后的高度和宽度，并根据加载图片数据后的高度和宽度配置图片加载控件对应的滚动条信息；

根据滚动条信息在图片加载控件的可视区域中展示对应的滚动条。

在一种可能的实施方式中，加载控制模块220具体还可以用于：

获取可视区域的滚动条位置，并根据滚动条位置确定可视区域的起始可视位置和末端可视位置；

根据可视区域的起始可视位置和末端可视位置配置可视区域的剪裁区；

控制图片加载控件在可视区域的剪裁区内进行图片加载。

在一种可能的实施方式中，加载控制模块220具体可以通过以下方式控制图片加载控件的图片加载：

在图片加载控件缓存图片的过程中，当检测到图片内存队列中的缓存图片数量超过可缓存图片数量时，从该图片内存队列的已缓存图片中释放可释放图片数量个图片，例如可以按照该图片内存队列的已缓存图片的索引顺序由后到前的顺序，从该图片内存队列的已缓存图片中释放可释放图片数量个图片。

在一种可能的实施方式中，加载控制模块220具体还可以用于：

获取图片加载控件的可视区域中待加载的每个图片的图片地址；

针对每个图片，根据该图片的图片地址生成对应的哈希索引值，并根据哈希索引值查找图片内存队列中是否存在对应的已缓存图片；

当查找到图片内存队列中存在对应的已缓存图片时，将该已缓存图片在图片内存队列的索引顺序提前，并将该已缓存图片加载到图片加载控件的可视区域中进行显示。

在一种可能的实施方式中，加载控制模块220具体还可以用于：

当查找到图片内存队列中不存在对应的已缓存图片时，在图片加载控件的可视区域中采用默认图片显示该图片，并从电子设备的本地缓存中查找是否存在该图片；

若从电子设备的本地缓存中查找到存在该图片，则将该图片加入到图片内存队列中；

若从电子设备的本地缓存中查找到不存在该图片，则从网站服务器中下载该图片，并将该图片加入到图片内存队列中；

从图片内存队列中将加入的该图片加载到图片加载控件的可视区域中替换该默认图片。

基于同一发明构思，请参阅图9，示出了本申请实施例提供的用于执行上述图片加载方法的电子设备100的结构示意框图，该电子设备100可以包括机器可读存储介质120和处理器130。

本实施例中，机器可读存储介质120与处理器130均位于电子设备100中且二者分离设置。然而，应当理解的是，机器可读存储介质120也可以是独立于电子设备100之外，且可以由处理器130通过总线接口来访问。可替换地，机器可读存储介质120也可以集成到处理器130中，例如，可以是高速缓存和/或通用寄存器。

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

其中，处理器130可以是一个通用的中央处理器(Central Processing Unit，CPU)，微处理器，特定应用集成电路(Application-Specific Integrated Circuit，ASIC)，或一个或多个用于控制上述方法实施例提供的图片加载方法的程序执行的集成电路。

机器可读存储介质120可以是ROM或可存储静态信息和指令的其他类型的静态存储设备，RAM或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器(Electrically Erasable Programmabler-Only MEMory，EEPROM)、只读光盘(Compactdisc Read-Only MEMory，CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。机器可读存储介质120可以是独立存在，通过通信总线与处理器130相连接。机器可读存储介质120也可以和处理器集成在一起。其中，机器可读存储介质120用于存储执行本申请方案的机器可执行指令。处理器130用于执行机器可读存储介质120中存储的机器可执行指令，以实现前述方法实施例提供的图片加载方法。

由于本申请实施例提供的电子设备100是上述电子设备100执行的方法实施例的另一种实现形式，且电子设备100可用于执行上述方法实施例提供的图片加载方法，因此其所能获得的技术效果可参考上述方法实施例，在此不再赘述。

进一步地，本申请实施例还提供一种包含计算机可执行指令的可读存储介质，计算机可执行指令在被执行时可以用于执行上述方法实施例提供的图片加载方法。

当然，本申请实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上的方法操作，还可以执行本申请任意实施例所提供的图片加载方法中的相关操作。

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

尽管在此结合各实施例对本申请进行了描述，然而，在实施所要求保护的本申请过程中，本领域技术人员通过查看所述附图、公开内容、以及所附权利要求书，可理解并实现所述公开实施例的其他变化。在权利要求中，“包括”一词不排除其他组成部分或步骤，“一”或“一个”不排除多个的情况。单个处理器或其他单元可以实现权利要求中列举的若干项功能。相互不同的从属权利要求中记载了某些措施，但这并不表示这些措施不能组合起来产生良好的效果。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (13)

1.一种图片加载方法，其特征在于，应用于电子设备，所述方法包括：

根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息，所述图片缓存信息包括可缓存图片数量和可释放图片数量；

根据所述图片缓存信息控制所述图片加载控件的图片加载。

2.根据权利要求1所述的图片加载方法，其特征在于，所述根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息的步骤，包括：

获取所述图片加载控件的元素布局信息，所述元素布局信息包括所述图片加载控件的高度、宽度以及元素布局方式；

根据所述元素布局信息以及每个元素的高度和宽度，确定所述图片加载控件的可视区域中的可显示图片数量；

根据所述可显示图片数量确定所述图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量。

3.根据权利要求2所述的图片加载方法，其特征在于，所述元素布局方式包括所述图片加载控件在高度方向上每一列的可显示图片数量，以及在宽度方向上每一行的可显示图片数量，所述根据所述元素布局信息以及每个元素的高度和宽度，确定所述图片加载控件的可视区域中的可显示图片数量的步骤，包括：

根据所述图片加载控件的高度和每个元素的高度，确定所述图片加载控件的可视区域中在高度方向上的第一可显示图片数量；

根据所述图片加载控件的宽度和每个元素的宽度，确定所述图片加载控件的可视区域中在宽度方向上的第二可显示图片数量；

根据所述元素布局方式、所述第一可显示图片数量和所述第二可显示图片数量确定所述图片加载控件的可视区域中的可显示图片数量。

4.根据权利要求3所述的图片加载方法，其特征在于，所述根据所述可显示图片数量确定所述图片加载控件在图片加载过程中的可缓存图片数量和可释放图片数量的步骤，包括：

根据所述可显示图片数量和预先设定的缓存容器大小，确定所述图片加载控件在图片加载过程中的可缓存图片数量；

根据所述可缓存图片数量和预先设定的释放比例确定所述图片加载控件在图片加载过程中可释放图片数量。

5.根据权利要求1所述的图片加载方法，其特征在于，所述根据所述图片缓存信息控制所述图片加载控件的图片加载的步骤之前，所述方法还包括：

在所述图片加载控件的图片加载过程中，根据所述图片加载控件的元素布局信息和所需加载的图片数据量，确定所述图片加载控件的可视区域中的图片显示信息，其中，所述图片显示信息包括每行需显示的图片数量以及图片显示的总行数；

根据所述图片显示信息，确定所述图片加载控件在加载图片数据后的高度和宽度，并根据所述加载图片数据后的高度和宽度配置所述图片加载控件对应的滚动条信息；

根据所述滚动条信息在所述图片加载控件的可视区域中展示对应的滚动条。

6.根据权利要求5所述的图片加载方法，其特征在于，所述方法还包括：

获取所述可视区域的滚动条位置，并根据所述滚动条位置确定所述可视区域的起始可视位置和末端可视位置；

根据所述可视区域的起始可视位置和末端可视位置配置所述可视区域的剪裁区；

控制所述图片加载控件在所述可视区域的剪裁区内进行图片加载。

7.根据权利要求1-6中任意一项所述的图片加载方法，其特征在于，所述根据所述图片缓存信息控制所述图片加载控件的图片加载的步骤，包括：

在所述图片加载控件缓存图片的过程中，当检测到图片内存队列中的缓存图片数量超过所述可缓存图片数量时，从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片。

8.根据权利要求7所述的图片加载方法，其特征在于，所述从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片的步骤，包括：

按照该图片内存队列的已缓存图片的索引顺序由后到前的顺序，从该图片内存队列的已缓存图片中释放所述可释放图片数量个图片。

9.根据权利要求7所述的图片加载方法，其特征在于，所述方法还包括：

获取所述图片加载控件的可视区域中待加载的每个图片的图片地址；

针对每个图片，根据该图片的图片地址生成对应的哈希索引值，并根据所述哈希索引值查找所述图片内存队列中是否存在对应的已缓存图片；

当查找到所述图片内存队列中存在对应的已缓存图片时，将该已缓存图片在所述图片内存队列的索引顺序提前，并将该已缓存图片加载到所述图片加载控件的可视区域中进行显示。

10.根据权利要求9所述的图片加载方法，其特征在于，所述方法还包括：

当查找到所述图片内存队列中不存在对应的已缓存图片时，在所述图片加载控件的可视区域中采用默认图片显示该图片，并从所述电子设备的本地缓存中查找是否存在该图片；

若从所述电子设备的本地缓存中查找到存在该图片，则将该图片加入到所述图片内存队列中；

若从所述电子设备的本地缓存中查找到不存在该图片，则从网站服务器中下载该图片，并将该图片加入到所述图片内存队列中；

从所述图片内存队列中将加入的该图片加载到所述图片加载控件的可视区域中替换该默认图片。

11.一种图片加载装置，其特征在于，应用于电子设备，所述装置包括：

确定模块，用于根据图片加载控件的元素布局信息，确定所述图片加载控件在图片加载过程中的图片缓存信息，所述图片缓存信息包括可缓存图片数量和可释放图片数量；

加载控制模块，用于根据所述图片缓存信息控制所述图片加载控件的图片加载。

12.一种电子设备，其特征在于，所述电子设备包括机器可读存储介质及处理器，所述机器可读存储介质存储有机器可执行指令，所述处理器在执行所述机器可执行指令时，该电子设备实现权利要求1-10中任意一项所述的图片加载方法。

13.一种可读存储介质，其特征在于，所述可读存储介质中存储有机器可执行指令，所述机器可执行指令被执行时实现权利要求1-10中任意一项所述的图片加载方法。