CN111475231A - 生成占位图的方法、装置、电子设备及可读介质 - Google Patents

Abstract

本公开提供一种生成占位图的方法、装置、电子设备及可读介质，属于互联网技术领域。该方法包括：通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。本公开使用占位图时，首先对可以快速访问的内存和本次磁盘进行查询，如果查询到则直接利用内存中查询到的占位图，可以实现快速获取占位图，提高开发和设计的效率。

Description

生成占位图的方法、装置、电子设备及可读介质

技术领域

本公开总体涉及互联网技术领域，具体而言，涉及一种生成占位图的方法、装置、电子设备及可读介质。

背景技术

目前，在手机应用中很多信息都是由图来传达的(如商品图等)，在用户的手机网络有延迟或者过慢的情况下，会导致图片加载过慢或者无法加载。当图片展示视图加载图片需要进行网络请求，网络没有返回图片的这一较短时间内，需要在展示图片区域会默认加载一个占位图。

然而为满足不同的设计和使用需求，手机界面上可能会有多个图片展示区域，且这些图片展示区域的大小尺寸往往不同，这样相应的就需要多个占位图，同时也会需要很多的占位图资源文件，从而会增加设计工程师与开发工程师的工作量，以实现多个大小不同的占位图的设计与导入。

因此，现有技术中的技术方案还存在有待改进之处。

在所述背景技术部分公开的上述信息仅用于加强对本公开的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种生成占位图的方法、装置、电子设备及可读介质，解决上述技术问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一方面，提供一种生成占位图的方法，包括：

通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；

按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；

如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

在本公开的一个实施例中，所述按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图包括：

按照所述区域尺寸在所述内存中查询，如果在所述内存中查询到与所述区域尺寸相应的占位图，则直接将所述内存中存储的所述占位图返回给请求方；

如果在所述内存中未查询到与所述区域尺寸相应的占位图，则按照所述区域尺寸在所述本地磁盘中查询，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，则将所述本地磁盘中存储的所述占位图返回给请求方。

在本公开的一个实施例中，所述按照所述区域尺寸在所述内存中查询之前，还包括：

在所述内存中创建占位图管理器；

其中所述占位图管理器包括字典，用于存储占位图节点和占位图；所述字典中包括键和值，所述字典的键为占位图的唯一标识，所述字典的值为占位图节点，所述占位图的唯一标识采用控件大小作为命名，所述占位图节点包括：当前占位图节点的上一个节点、当前占位图节点的下一个节点、占位图和占位图的唯一标识。

在本公开的一个实施例中，所述占位图管理器还包括双向链表，用于对所述字典中的占位图进行缓存优化和管理，所述双向链表包括：双向链表的头、双向链表的尾和双向链表允许占用内存空间的最大值。

在本公开的一个实施例中，所述按照所述区域尺寸在所述内存中查询，包括：

通过将所述内存中占位图的唯一标识与所述尺寸区域进行对比，如果在所示内存中查询到与所述区域尺寸相应的占位图则获取所述占位图，并调整所述双向链表，使最新使用的占位图位于所述双向链表的头；

其中所述调整所述双向链表包括：

如果所获取的所述占位图对应的占位图节点是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头，并将所述占位图节点的上一个节点赋值所述双向链表的尾；

如果所获取的所述占位图对应的占位图节点既不是所述双向链表的头，也不是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头。

在本公开的一个实施例中，所述按照所述区域尺寸在所述本地磁盘中查询包括：

通过应用程序编程接口，在所述本地磁盘的沙盒中获取存储路径，并在所述存储路径后拼接所述占位图的唯一标识，得到查询标记；

将所述查询标记与所述区域尺寸进行匹配，如果匹配成功，则在所述本地磁盘中查询到与所述区域尺寸相应的占位图；如果匹配不成功，在在所述本地磁盘中未查询到与所述区域尺寸相应的占位图。

在本公开的一个实施例中，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，还包括：

将获取的所述占位图对应的占位图节点存储到所述内存中，并将所述占位图添加到所述双向链表中；

其中所述将所述占位图添加到所述双向链表中包括：

如果所述双向链表的头为空，则将新增占位图节点赋值给所述双向链表的头；

如果所述双向链表的头不为空，所述双向链表的尾为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头的前一个节点、后一个节点指向所述双向链表的尾，将所述双向链表的尾的前一个节点、后一个节点指向所述双向链表的头；

如果所述双向链表的头和所述双向链表的尾均不为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头赋值给所述新增占位图节点的后一个节点；

如果所述双向链表在添加所述新增占位图节点后超出所述双向链表允许占用内存空间的最大值，则将所述双向链表的尾从所述字典中删除。

在本公开的一个实施例中，所述根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，包括：

根据所述区域尺寸采用绘制函数生成一图形上下文；

按照预设比例对占位图图标结合所述图形上下文的大小进行等比例缩放，得到所述占位图图标的大小；

按照所述占位图图标的大小将所述占位图图标绘制到所述图像上下文中，生成占位图尺寸与所述区域尺寸相应的占位图。

在本公开的一个实施例中，生成占位图尺寸与所述区域尺寸相应的占位图之后，还包括：

将生成的占位图存储到所述内存和/或所述本地磁盘中。

根据本公开的再一方面，提供一种生成占位图的装置，包括：

请求响应模块，被配置为通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；

查询模块，被配置为按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；

异步生成模块，被配置为如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

根据本公开的又一方面，提供一种电子设备，包括处理器；存储器，存储用于所述处理器控制如上所述的方法步骤的指令。

根据本公开的另一方面，提供一种计算机可读介质，其上存储有计算机可执行指令，所述可执行指令被处理器执行时实现如上所述的方法步骤。

根据本公开实施例提供的生成占位图的方法、装置、电子设备及计算机可读介质，一方面，使用占位图时，首先对可以快速访问的内存和本次磁盘进行查询，如果查询到则直接利用内存中查询到的占位图，可以实现快速获取占位图，提高开发和设计的效率。另一方面，如果快速范围没有获取到相应的占位图则异步生成相应大小的占位图，可以满足不同尺寸的占位图需求。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

通过参照附图详细描述其示例实施例，本公开的上述和其它目标、特征及优点将变得更加显而易见。

图1示出本公开一实施例中提供的一种生成占位图的方法的流程图。

图2示出本公开一实施例中内存中缓存占位图的双向链表的结构示意图。

图3示出本公开一实施例的步骤S130中根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图的流程图。

图4示出本公开一实施例中几种不同区域尺寸对应的占位图的示意图。

图5所示本公开一实施例中生成占位图的方法的整体流程图。

图6示出本公开一实施例中占位图管理器中定义字典和双向链表的伪代码。

图7示出本公开一实施例中字典的伪代码。

图8示出本公开一实施例中双向链表的伪代码。

图9示出本公开一实施例的步骤S504中双向链表的尾为空时调整前后的双向链表示意图。

图10示出本公开一实施例的步骤S504中双向链表的头、尾都不为空时调整前后的双向链表示意图。

图11示出本公开一实施例的步骤S504中超过允许占用内存空间的最大值时调整前后的双向链表示意图。

图12示出本公开一实施例中具体实现步骤S506的伪代码。

图13示出本公开一实施例的步骤S507中占位图节点位于双向链表的尾时调整前后的双向链表示意图。

图14示出本公开一实施例的步骤S507中占位图节点位于双向链表的尾时调整前后的双向链表示意图。

图15示出本公开另一实施例提供的一种生成占位图的装置的示意图。

图16示出本公开再一实施例提供的适于用来实现本申请实施例的电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免喧宾夺主而使得本公开的各方面变得模糊。

附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。

在本公开的相关实施例中，为满足不同的需求，需要用户界面(User Interface，简称UI)设计工程师设计多个不同尺寸的占位图，在加载占位图时根据视图图片区域的大小替换为相应大小的占位图进行显示。或者是开发工程师在对占位图进行显示的过程中，根据视图图片区域的大小对同一大小的占位图进行等比缩放，然后进行显示。

可见，上述方法存在以下至少一个缺点，增加UI设计工作，需要设计不同尺寸的占位图；增加开发工作量，需要根据视图去选择合适的占位图；不能动态支持各个尺寸的占位图；不能快速响应并返回占位图；等比缩放会造成占位图片失真或者变形。

鉴于上述缺点，本公开提供一种新的生成占位图的方法，可以减少UI设计师工作，减少开发工作量，自动匹配适合的占位图，动态生成各个尺寸的占位图，以提高工作效率。

图1示出本公开一实施例中提供的一种生成占位图的方法的流程图，包括以下步骤：

如图1所示，在步骤S110中，通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸。

如图1所示，在步骤S120中，按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方。

如图1所示，在步骤S130中，如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

本公开实施例提供的生成占位图的方法，一方面，使用占位图时，首先对可以快速访问的内存和本次磁盘进行查询，如果查询到则直接利用内存中查询到的占位图，可以实现快速获取占位图，提高开发和设计的效率。另一方面，如果快速范围没有获取到相应的占位图则异步生成相应大小的占位图，可以满足不同尺寸的占位图需求。

需要说明的是，本公开提供的生成占位图的方法的应用场景可以为生成商品列表对应的占位图、登录界面的占位图等等。

以下结合图1所示的流程图对本公开提供的生成占位图的方法进行详细介绍，具体如下：

在步骤S110中，通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸。

在本公开的一个实施例中，设置图片展示视图占位图的图片展示区域是基于iOS的UIImageView(图片展示视图)控件，获取图片通常采用第三方类库SDWebImage(一个下载图片以及设置UIImageView占位图的类库)，调用过程的伪代码为：

[imageView sd_setImageWithURL:imageURL placeholderImage:placeholderImage]。

在本公开的一个实施例中，UIImageView用于展示图片，是UIKit框架中常用的视图类。UIImageView主要用于展示两种图片，一种是静态图片，也是最基础的用法，另一种是动态图片(一组图片产生的动画效果)，可以使用UIImageView制作一个gif动图。UIImageView除了可以使用从UIView继承下来的动画效果外，还可以使用UIImageView控件本身自带的动画效果(更常用)。

在本公开的一个实施例中，占位图(placeholderImage)由占位图管理器负责查找、生成、返回、删除、缓存。因此，占位图管理器可以主要用于内存存储、本地磁盘存储、子线程生成占位图三方面，后文中的步骤S120和步骤S130也基于占位图管理器实现。

在步骤S120中，按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方。

在本公开的一个实施例中，由于内存提供容量小但是有高速的存取能力，因而快速查询占位图首先选择在内存中进行。占位图使用考虑到实际情况是，假如在一个商品列表页面，其实商品列表展示样式基本是一致的(即需要的占位图大小是一样的)，这时就需要将占位图保存在内存中，以便下次直接从内存中获取。另外，考虑内存资源的问题，并不能一直向内存里面添加占位图，还需要适当地进行移除操作，因此本实施例中将最近使用的放在前面(即双向链表的头)，如果长时间不使用的就要从内存中移除，以免过多占用内存。

在本公开的一个实施例中，该步骤中按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图包括：

按照所述区域尺寸在所述内存中查询，如果在所述内存中查询到与所述区域尺寸相应的占位图，则直接将所述内存中存储的所述占位图返回给请求方；

如果在所述内存中未查询到与所述区域尺寸相应的占位图，则按照所述区域尺寸在所述本地磁盘中查询，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，则将所述本地磁盘中存储的所述占位图返回给请求方。

在本公开的一个实施例中，按照所述区域尺寸在所述内存中查询之前，还包括：

在所述内存中创建占位图管理器；

其中所述占位图管理器包括字典，用于存储占位图节点和占位图；所述字典中包括键和值，所述字典的键为占位图的唯一标识，所述字典的值为占位图节点，所述占位图的唯一标识采用控件大小作为命名，所述占位图节点包括：当前占位图节点的上一个节点、当前占位图节点的下一个节点、占位图和占位图的唯一标识。

在本公开的一个实施例中，所述占位图管理器还包括双向链表，用于对所述字典中的占位图进行缓存优化和管理，所述双向链表包括：双向链表的头、双向链表的尾和双向链表允许占用内存空间的最大值。

在本公开的一个实施例中，按照所述区域尺寸在所述内存中查询，包括：

通过将所述内存中占位图的唯一标识与所述尺寸区域进行对比，如果在所示内存中查询到与所述区域尺寸相应的占位图则获取所述占位图，并调整所述双向链表，使最新使用的占位图位于所述双向链表的头；

其中所述调整所述双向链表包括：

如果所获取的所述占位图对应的占位图节点是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头，并将所述占位图节点的上一个节点赋值所述双向链表的尾；

如果所获取的所述占位图对应的占位图节点既不是所述双向链表的头，也不是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头。

图2示出本公开一实施例中内存中缓存占位图的双向链表的结构示意图，如图2所示，在双向链表中如果查询到与区域尺寸相应的占位图则直接从内存中获取，如果没有查询到与区域尺寸相应的占位图，则从本地磁盘或通过异步线程生成与区域尺寸相应的占位图，将新加入的占位图或最近被访问的占位图添加到双向链表的头，由于对双向链表设置有允许占用内存空间的最大值，因此如果添加新加入的占位图后会超出双向链表允许占用内存空间的最大值，就需要对双向链表的尾进行移除。

在步骤S130中，如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

在本公开的一个实施例中，所述按照所述区域尺寸在所述本地磁盘中查询包括：

通过应用程序编程接口，在所述本地磁盘的沙盒中获取存储路径，并在所述存储路径后拼接所述占位图的唯一标识，得到查询标记；

将所述查询标记与所述区域尺寸进行匹配，如果匹配成功，则在所述本地磁盘中查询到与所述区域尺寸相应的占位图；如果匹配不成功，在在所述本地磁盘中未查询到与所述区域尺寸相应的占位图。

在本公开的一个实施例中，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，还包括：

将获取的所述占位图对应的占位图节点存储到所述内存中，并将所述占位图添加到所述双向链表中；

其中所述将所述占位图添加到所述双向链表中包括：

如果所述双向链表的头为空，则将新增占位图节点赋值给所述双向链表的头；

如果所述双向链表的头不为空，所述双向链表的尾为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头的前一个节点、后一个节点指向所述双向链表的尾，将所述双向链表的尾的前一个节点、后一个节点指向所述双向链表的头；

如果所述双向链表的头和所述双向链表的尾均不为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头赋值给所述新增占位图节点的后一个节点；

如果所述双向链表在添加所述新增占位图节点后超出所述双向链表允许占用内存空间的最大值，则将所述双向链表的尾从所述字典中删除。

图3示出本公开一实施例的步骤S130中根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图的流程图，具体包括以下步骤：

步骤S310，根据所述区域尺寸采用绘制函数生成一图形上下文；

步骤S320，按照预设比例对占位图图标结合所述图形上下文的大小进行等比例缩放，得到所述占位图图标的大小；

步骤S330，按照所述占位图图标的大小将所述占位图图标绘制到所述图像上下文中，生成占位图尺寸与所述区域尺寸相应的占位图。

基于图3所示的步骤S310～S330，如果在内存和本地磁盘中都没有与区域尺寸对应的占位图，就需要开启子线程生成该区域尺寸的占位图，线程主要使用iOS提供的类库的GCD(Grand Central Dispatch)来实现的。

在本公开的一个实施例中，生成占位图片采取使用iOS提供的图形上下文(CGContext)来进行绘制。占位图的设计可以是一个公司的logo加一个背景色，以下介绍生成占位图的过程：

首先，使用绘制函数根据图片展示视图的区域尺寸的大小绘制一个图形上下文，图4示出本公开一实施例中几种不同区域尺寸对应的占位图的示意图，其中图形上下文用401标记，占位图图标用402标记。

其次，根据UI提供色值填充背景颜色。其中UI提供的色值为预设值，即占位图的背景色，且该背景色可以根据需要进行相应的调整，例如对于展示商品的页面而言，如果页面中的占位图是春季运动、郊游商品的占位图，则可以采用代表春季的绿色作为背景色，而如果页面中的占位图是春节、节日商品的占位图，则可以采用代表喜庆气氛的红色作为背景色。

然后，根据UI提供的默认占位图图标结合图形上下文的大小按照预设比例进行等比缩放，将占位图图标绘制到图形上下文合适的位置，生成占位图。一般，采用公司logo作为占位图图标。

需要说明的是，这里的占位图图标可以是正方形，还可以是长方形。由于图形上下文即图片展示视图也肯是长方形或正方形，而预设比例可以是指图形上下文的最小边长与占位图图标的最小边长之间的比例。这里的“最小边长”在图形上下文或占位图图标是正方形时即为边长，在在图形上下文或占位图图标是长方形时即为宽。对于上述占位图图标的“合适位置”是指占位图图标的中心坐标与图形上下文的中心坐标重合。

还需要说明的是，本实施例中是以方形为例，在其他实施例中，图形上下文以及占位图图标的形状还有可能是圆形、多边形或其他不规则图形，则预设比例也是按照半径或最小边长的比例来计算。

最后，将生成的占位图返回给图片展示视图，保存到本地磁盘与内存中。

在本公开的一个实施例中，生成占位图尺寸与所述区域尺寸相应的占位图之后，还包括：

将生成的占位图存储到所述内存和/或所述本地磁盘中，具体为：

如果是在内存中未查询到与所述区域尺寸相应的占位图，但是在本地磁盘中查询到与所述区域尺寸相应的占位图，则将从本地磁盘中获取的与所述区域尺寸相应的占位图存储到内存中；如果是在内存中和本地磁盘中均未查询到与所述区域尺寸相应的占位图，则需要异步生成与所述区域尺寸相应的占位图，并将该与所述区域尺寸相应的占位图存储到内存和本地磁盘中。

图5所示本公开一实施例中生成占位图的方法的整体流程图，接下来进行详细介绍。

如图5所示，在步骤S501中，获取图片展示视图，利用占位图管理器获取符合图片展示视图的区域尺寸的占位图。

如图5所示，在步骤S502中，根据区域尺寸在内存中查询与区域尺寸相应的占位图。

如图5所示，在步骤S503中，判断内存中是否存在与区域尺寸相应的占位图，如果存在，则转至步骤S507；如果不存在，则转至步骤S504。

如图5所示，在步骤S504中，根据区域尺寸在本地磁盘中查询与区域尺寸相应的占位图。由于内存具有高速的存取能力，因此可以达到快速查询的目的。

如图5所示，在步骤S505中，判断本地磁盘中是否存在与区域尺寸相应的占位图，如果存在，则转至步骤S507；如果不存在，则转至步骤S506。

如图5所示，在步骤S506中，开启子线程生成与区域尺寸相应的占位图，并将生成的占位图缓存到内存与本地磁盘中。

如图5所示，在步骤S507中，获取到与区域尺寸相应的占位图，并返回给请求方，即返回给图片展示视图进行占位图的展示。

上述步骤S502中在内存中查询占位图时，需要创建一个占位图内存管理的类，此类的表现形式包括字典和双向链表，其中字典用于存放内存中存在的占位图，双向链表用于实现内存中占位图的缓存优化及管理。

图6示出本公开一实施例中占位图管理器中定义字典和双向链表的伪代码。

图7示出本公开一实施例中字典的伪代码，其中字典用于存放内存中每个占位图节点，用占位图节点的唯一标识作为键，唯一标识采用控件大小作为命名，以便相同大小的占位图重复生产(如：200*200.png)，以占位图节点作为值。占位图节点包括：该节点的上一个节点；该节点的下一个节点；占位图；以及占位图唯一标识。

图8示出本公开一实施例中双向链表的伪代码，其中双向链表用于淘汰内存数据，保证占位图所占内存在合理的范围之内，双向链表主要包括双向链表的头、双向链表的尾和允许占用的最大内存。

这样，在内存中可以通过占位图的唯一标识查询占位图内存管理的字典中是否存在该占位图节点。

上述步骤S504中如果在内存中未查询到与区域尺寸相应的占位图，还需要从本地磁盘缓存获取该占位图或者通过异步生成该占位图，然后需要将获取的占位图存放到内存的占位图管理器中，具体如下：

1)首先声明一个占位图节点，将该节点的值(MemoryMapNode->_value)用于存放步骤1的占位图，该占位图的唯一标识符为节点的键(MemoryMapNode->_key)。

2)将该占位图节点存放到占位图内存管理的字典(MemoryManagement->_mapNodeDic)中，以该占位图节点的键(_key)作为字典中的键，以该占位图节点作为字典中的值。

3)将该占位图节点添加到占位图管理器的双向链表(MemoryManagement->_map)中，将最近使用的占位图保持在双向链表的前面，最近不使用的占位图往双向链表的尾的方向移动，当双向链表中的占位图超过允许占用内存空间的最大值时，移除双向链表的尾，对双向链表的调整具体包括：

①如果该双向链表为空，则将该占位图节点直接赋值给双向链表的头。

②如果双向链表的头不为空，双向链表的尾为空，则将双向链表的头赋值给链表的尾，将占位图节点赋值双向链表的头，然后将双向链表的头的前一个节点、后一个节点指向双向链表的尾，双向链表的尾的前一个节点、后一个节点指向双向链表的头。图9示出本公开一实施例的步骤S504中双向链表的尾为空时调整前后的双向链表示意图，如图9所示，将获取的或异步生成的新的占位图节点调整到双向链表的头。

③如果双向链表的头、尾都不为空，则将双向链表的头赋值给该占位图节点的后一个节点，将双向链表的尾赋值给该占位图节点的前一个节点，将该占位图节点赋值给双向链表的头的前一个节点与双向链表的尾的后一个节点，将将该占位图节点赋值给双向链表的头。图10示出本公开一实施例的步骤S504中双向链表的头、尾都不为空时调整前后的双向链表示意图，如图10所示，将获取的或异步生成的新的占位图节点调整到双向链表的头。

④如果经过步骤③发现超过允许占用内存空间的最大值，则需要移除双向链表的尾，具体步骤是：将双向链表的头赋值给双向链表的尾的前一节点的后一个节点，将双向链表的尾的前一节点赋值给双向链表的头的前一个节点，将双向链表的尾的前一节赋值给双向链表的尾，还将该移除的双向链表的尾从字典中删除。图11示出本公开一实施例的步骤S504中超过允许占用内存空间的最大值时调整前后的双向链表示意图，如图11所示，将双向链表的尾删除。

⑤如果经过步骤④还是超过允许占用内存空间的最大值，重复步骤④，此处不再赘述。

上述步骤S505中，读取本地磁盘中的缓存的占位图是否存在与区域尺寸相应的占位图，对iOS系统而言，将图片缓存在沙盒中，其中沙盒中目录Library/Caches适合存储体积大，不需要备份的非重要数据。首先通过iOS系统本身提供的读取磁盘的应用程序编程接口(Application Programming Interface，简称API)来进行获取，如果存在该区域尺寸的占位图，则将该占位图返回并存储到内存中，如上文所述，此处不再赘述；如果不存在该区域尺寸的占位图，则需要子线程生成占位图，并将该占位图存储到内存与本地磁盘中，具体如下：

1)判断本地磁盘中是否存在该区域尺寸的占位图，需要获取Library/Caches路径，在该路径后拼接上占位图的唯一标识，用NSFileManager的fileExistsAtPath进行判断，如果存在该区域尺寸的占位图，通过UIImage的initWithContentsOfFile获取该占位图，并将该占位图返回给展示图片视图。另外，还需要将该占位图存储到内存中，以便下次使用快速获取，如上文所述，此处不再赘述。

2)如果不存在该区域尺寸的占位图，需要子线程生成占位图，并将该占位图存储到本地磁盘，获取Library/Caches的路径，在该路径后拼接上占位图唯一标识，然后通过UIImageJPEGRepresentation的writeToFile存储。

上述步骤S506中如果内存和本地磁盘都不存在该区域尺寸的占位图，需要开启子线程生成该区域尺寸的占位图，线程主要使用iOS提供的类库的GCD(Grand CentralDispatch)来实现的，图12示出本公开一实施例中具体实现步骤S506的伪代码，如图12所示，先绘制图形上下文，然后填充背景色，之后对占位图图标进行等比例缩放，最后将等比缩放后的占位图图标绘制到图形上下文的合适位置，得到占位图。

上述步骤S507中如果在内存中查询到与区域尺寸相应的占位图，还需要进一步对该占位图对应的占位图节点在双向链表中的位置适当地对双向链表进行调整：

1)如果获取的占位图节点是双向链表的头，则不用调整双向链表。

2)如果获取的占位图节点是双向链表的尾，则需要将双向链表的尾赋值给双向链表的头，赋值完之后需要将该双向链表的头的上一个节点赋值给双向链表的尾。图13示出本公开一实施例的步骤S507中占位图节点位于双向链表的尾时调整前后的双向链表示意图，如图13所示，将调整前位于双向链表的尾的占位图节点调整到双向链表的头，其余节点顺次后移一位。

3)如果获取的占位图节点不是双向链表的头，也不是双向链表的尾，则需要该占位图节点的前一个节点的后一个节点指向该占位图节点的后一个节点，该占位图节点的后一个节点的前一个节点指向该占位图节点的前一个节点，该占位图节点的前一个节点指向双向链表的尾，后一个节点指向双向链表的头，将双向链表的前一个节点指向该节点，双向链表的尾的后一个节点指向该占位图节点，将该占位图节点赋值给双向链表的头，以调整该双向链表。图14示出本公开一实施例的步骤S507中占位图节点位于双向链表的尾时调整前后的双向链表示意图，如图14所示，调整前占位图节点位于双向两边的中间位置，调整后占位图节点位于双向链表的头。

综上所述，本公开实施例提供的生成占位图的方法，一方面，使用占位图时，首先对可以快速访问的内存和本次磁盘进行查询，如果查询到则直接利用内存中查询到的占位图，可以实现快速获取占位图，提高开发和设计的效率。另一方面，如果快速范围没有获取到相应的占位图则异步生成相应大小的占位图，可以满足不同尺寸的占位图需求。

本公开实施例中运用双向链表对占位图进行内存管理，通过实现最近使用的占位图位于双向链表的头，并未使用时间最长的占位图进行淘汰，实现快速获取占位图与减少内存的使用；当在内存和本地磁盘中均未查询到满足区域尺寸的占位图时，通过子线程异步自动绘制不同尺寸的占位图，以满足各个图片展示视图的需要；最后将生成的占位图存储到内存和本地磁盘中，以便后续可以进行重复使用。此方案通过优化内存算法结合自动生成不同区域尺寸的占位图，达到快速响应与减少内存使用，满足不同区域尺寸的图片展示视图，进而规避传统的占位图生成方案问题，减少设计、开发的工作量，提高获取占位图的效率。

图15示出本公开另一实施例提供的一种生成占位图的装置的示意图，如图15所示，该生成占位图的装置1500中包括：请求响应模块1510、查询模块1520和异步生成模块1530。

请求响应模块1510被配置为通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；查询模块1520被配置为按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；异步生成模块1530被配置为如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

该装置中各个模块的功能参见上述方法实施例中的相关描述，此处不再赘述。

综上所述，本公开实施例提供的生成占位图的装置，一方面，使用占位图时，首先对可以快速访问的内存和本次磁盘进行查询，如果查询到则直接利用内存中查询到的占位图，可以实现快速获取占位图，提高开发和设计的效率。另一方面，如果快速范围没有获取到相应的占位图则异步生成相应大小的占位图，可以满足不同尺寸的占位图需求。

另一方面，本公开还提供了一种电子设备，包括处理器和存储器，存储器存储用于上述处理器控制以下方法的操作指令：

通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

下面参考图16，其示出了适于用来实现本申请实施例的电子设备的计算机系统1600的结构示意图。图16示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图16所示，计算机系统1600包括中央处理单元(CPU)1601，其可以根据存储在只读存储器(ROM)1602中的程序或者从存储部分1607加载到随机访问存储器(RAM)1603中的程序而执行各种适当的动作和处理。在RAM 1603中，还存储有系统1600操作所需的各种程序和数据。CPU 1601、ROM 1602以及RAM 1603通过总线1604彼此相连。输入/输出(I/O)接口1605也连接至总线1604。

以下部件连接至I/O接口1605：包括键盘、鼠标等的输入部分1606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1607；包括硬盘等的存储部分1608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1609。通信部分1609经由诸如因特网的网络执行通信处理。驱动器1610也根据需要连接至I/O接口1605。可拆卸介质1611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1610上，以便于从其上读出的计算机程序根据需要被安装入存储部分1608。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1609从网络上被下载和安装，和/或从可拆卸介质1611被安装。在该计算机程序被中央处理单元(CPU)1601执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本申请所示的计算机可读介质可以是计算机可读信号介质或者计算机可读介质或者是上述两者的任意组合。计算机可读介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括以下方法步骤：

通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

应清楚地理解，本公开描述了如何形成和使用特定示例，但本公开的原理不限于这些示例的任何细节。相反，基于本公开公开的内容的教导，这些原理能够应用于许多其它实施方式。

以上具体地示出和描述了本公开的示例性实施方式。应可理解的是，本公开不限于这里描述的详细结构、设置方式或实现方法；相反，本公开意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (12)

1.一种生成占位图的方法，其特征在于，包括：

通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；

按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；

如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

2.根据权利要求1所述的生成占位图的方法，其特征在于，所述按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图包括：

按照所述区域尺寸在所述内存中查询，如果在所述内存中查询到与所述区域尺寸相应的占位图，则直接将所述内存中存储的所述占位图返回给请求方；

如果在所述内存中未查询到与所述区域尺寸相应的占位图，则按照所述区域尺寸在所述本地磁盘中查询，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，则将所述本地磁盘中存储的所述占位图返回给请求方。

3.根据权利要求2所述的生成占位图的方法，其特征在于，所述按照所述区域尺寸在所述内存中查询之前，还包括：

在所述内存中创建占位图管理器；

其中所述占位图管理器包括字典，用于存储占位图节点和占位图；所述字典中包括键和值，所述字典的键为占位图的唯一标识，所述字典的值为占位图节点，所述占位图的唯一标识采用控件大小作为命名，所述占位图节点包括：当前占位图节点的上一个节点、当前占位图节点的下一个节点、占位图和占位图的唯一标识。

4.根据权利要求3所述的生成占位图的方法，其特征在于，所述占位图管理器还包括双向链表，用于对所述字典中的占位图进行缓存优化和管理，所述双向链表包括：双向链表的头、双向链表的尾和双向链表允许占用内存空间的最大值。

5.根据权利要求4所述的生成占位图的方法，其特征在于，所述按照所述区域尺寸在所述内存中查询，包括：

通过将所述内存中占位图的唯一标识与所述尺寸区域进行对比，如果在所示内存中查询到与所述区域尺寸相应的占位图则获取所述占位图，并调整所述双向链表，使最新使用的占位图位于所述双向链表的头；

其中所述调整所述双向链表包括：

如果所获取的所述占位图对应的占位图节点是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头，并将所述占位图节点的上一个节点赋值所述双向链表的尾；

如果所获取的所述占位图对应的占位图节点既不是所述双向链表的头，也不是所述双向链表的尾，则将所述占位图节点赋值给所述双向链表的头。

6.根据权利要求5所述的生成占位图的方法，其特征在于，所述按照所述区域尺寸在所述本地磁盘中查询包括：

通过应用程序编程接口，在所述本地磁盘的沙盒中获取存储路径，并在所述存储路径后拼接所述占位图的唯一标识，得到查询标记；

将所述查询标记与所述区域尺寸进行匹配，如果匹配成功，则在所述本地磁盘中查询到与所述区域尺寸相应的占位图；如果匹配不成功，在在所述本地磁盘中未查询到与所述区域尺寸相应的占位图。

7.根据权利要求6所述的生成占位图的方法，其特征在于，如果在所述本地磁盘中查询到与所述区域尺寸相应的占位图，还包括：

将获取的所述占位图对应的占位图节点存储到所述内存中，并将所述占位图添加到所述双向链表中；

其中所述将所述占位图添加到所述双向链表中包括：

如果所述双向链表的头为空，则将新增占位图节点赋值给所述双向链表的头；

如果所述双向链表的头不为空，所述双向链表的尾为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头的前一个节点、后一个节点指向所述双向链表的尾，将所述双向链表的尾的前一个节点、后一个节点指向所述双向链表的头；

如果所述双向链表的头和所述双向链表的尾均不为空，则将所述新增占位图节点赋值给所述双向链表的头，将所述双向链表的头赋值给所述新增占位图节点的后一个节点；

如果所述双向链表在添加所述新增占位图节点后超出所述双向链表允许占用内存空间的最大值，则将所述双向链表的尾从所述字典中删除。

8.根据权利要求2所述的生成占位图的方法，其特征在于，所述根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，包括：

根据所述区域尺寸采用绘制函数生成一图形上下文；

按照预设比例对占位图图标结合所述图形上下文的大小进行等比例缩放，得到所述占位图图标的大小；

按照所述占位图图标的大小将所述占位图图标绘制到所述图像上下文中，生成占位图尺寸与所述区域尺寸相应的占位图。

9.根据权利要求8所述的生成占位图的方法，其特征在于，生成占位图尺寸与所述区域尺寸相应的占位图之后，还包括：

将生成的占位图存储到所述内存和/或所述本地磁盘中。

10.一种生成占位图的装置，其特征在于，包括：

请求响应模块，被配置为通过响应在图片展示区域加载占位图的请求，获取所述图片展示区域的区域尺寸；

查询模块，被配置为按照所述区域尺寸依次查询内存或本地磁盘中存储的占位图，如果查询到占位图尺寸与所述区域尺寸相应的占位图，则将所述占位图返回给请求方；

异步生成模块，被配置为如果未查询到占位图尺寸与所述区域尺寸相应的占位图，则根据所述区域尺寸异步生成占位图尺寸与所述区域尺寸相应的占位图，并将所述占位图返回给请求方。

11.一种电子设备，其特征在于，包括：

处理器；

存储器，存储用于所述处理器控制如权利要求1-9任一项所述的方法步骤。

12.一种计算机可读介质，其上存储有计算机可执行指令，其特征在于，所述可执行指令被处理器执行时实现如权利要求1-9任一项所述的方法步骤。

Images