CN109684573A - 目标图片显示方法及装置、存储介质、电子设备 - Google Patents

Abstract

本公开是关于一种目标图片显示方法、目标图片显示装置、计算机可读存储介质及电子设备，涉及数据处理技术领域，该方法包括：根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；显示与所述目标图片地址对应的所述目标图片。本公开可以提高图片显示速度。

Description

目标图片显示方法及装置、存储介质、电子设备

技术领域

本公开涉及数据处理技术领域，具体而言，涉及一种目标图片显示方法、目标图片显示装置、计算机可读存储介质以及电子设备。

背景技术

在进行品牌建设或者产品推广时，App(Application，应用程序)发挥着越来越重要的作用。对于一款快速扩展的App来说，随着业务的不断发展、复杂度和App用户量的不断增加，加载大量网络图片列表时卡顿或不流畅的问题也成为影响用户体验的常见场景。

相关技术中，对于大量网络图片列表加载的性能优化方法如下：在网络图片加载完成前，首先调取本地图片进行占位显示；接下来开启异步线程从服务器下载网络图片，确保用户操作不被下载进程所阻断，下载完成后再替换占位图片，显示网络图片；最后，基于网络图片的名称或URL(Uniform Resource Locator，统一资源定位符)为索引，将下载完成的网络图片存在移动端本地，并记录在内存中。当再次请求的图片名称或URL相同时，从内存或本地文件中读取图片缓存直接显示。

上述性能优化方法已经满足大部分的性能优化需求，虽然避免了二次下载，节省了流量。但是当一个列表的网络图片都很大且非常多时，如果用户快速滑动页面，一瞬间会产生大量的异步请求和图片数据加载，仍可能导致客户端内存告警，出现界面卡顿的情况；同时如果用户当前所处的网络环境不好，当用户快速滑动页面时，并行的异步请求会挤占网络带宽，导致用户在滑动停止时看到的界面图片加载很慢，影响用户体验。

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

发明内容

本公开的目的在于提供一种目标图片显示方法、目标图片显示装置、计算机可读存储介质以及电子设备，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。

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

根据本公开的一个方面，提供一种目标图片显示方法，包括：

根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

显示与所述目标图片地址对应的所述目标图片。

在本公开的一种示例性实施例中，根据作用于列表页面的操作行为控制所述列表页面的状态包括：

在检测到作用于所述列表页面的滑动操作时，控制所述列表页面进行滚动。

在本公开的一种示例性实施例中，实时记录所述列表页面的可见区域的位置包括：

在检测到所述列表页面停止滚动时，根据所述滑动操作结束时的位置记录所述列表页面的所述可见区域的位置信息，并将所述位置信息设置为所述列表页面的宽和高。

在本公开的一种示例性实施例中，对所述可见区域的所有列表元素进行校验包括：

在检测到所述滑动操作开始或停止时，判断所述列表上所述可见区域的所有列表元素是否为图片元素；

在所述列表元素为所述图片元素时，判断所述图片元素是否满足预设条件；

在所述图片元素满足所述预设条件时，判断所述可见区域是否为空；

在所述可见区域不为空且所述图片元素未在所述可见区域时，对所述图片元素进行校验。

在本公开的一种示例性实施例中，所述图片元素满足所述预设条件包括：

所述图片元素为所述占位图片或者所述图片元素为非占位图片且所述图片元素的地址与所述目标图片的地址不同。

在本公开的一种示例性实施例中，显示与所述目标图片地址对应的所述目标图片包括：

在内存中存在与所述目标图片地址对应的图片缓存时，将所述图片缓存作为目标图片进行显示；

在所述内存中未存在与所述目标图片地址对应的图片缓存时，如果本地存储中存在与所述目标图片地址对应的图片缓存，将所述图片缓存记录至所述内存并进行显示。

在本公开的一种示例性实施例中，显示与所述目标图片地址对应的所述目标图片还包括：

在本地存储中不存在与所述目标图片地址对应的所述图片缓存时，开启异步线程并下载网络图片；

在所述网络图片下载成功时，将下载的所述网络图片保存至本地以及内存中并将所述网络图片作为所述目标图片进行显示；

在所述网络图片下载失败时，将所述占位图片作为所述目标图片进行显示。

在本公开的一种示例性实施例中，对所述可见区域的所有列表元素进行校验还包括：

在检测到所述列表页面开启时，对所述可见区域的列表元素进行分类初始化，并生成图片元素数据模型。

在本公开的一种示例性实施例中，根据作用于列表页面的操作行为控制所述列表页面的状态还包括：

在检测到所述列表页面开启时，根据列表的类型对所述列表页面上的所有界面元素进行初始化。

根据本公开的一个方面，提供一种目标图片显示装置，包括：

监测模块，用于根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

校验模块，用于对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

显示模块，用于显示与所述目标图片地址对应的所述目标图片。

根据本公开的一个方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的目标图片显示方法。

根据本公开的一个方面，提供一种电子设备，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的目标图片显示方法。

本公开示例性实施例中提供的一种目标图片显示方法、目标图片显示装置、计算机可读存储介质以及电子设备中，通过作用于列表页面的操作行为控制所述列表页面的状态，并对所述可见区域的所有列表元素进行校验以及显示与目标图片地址对应的所述目标图片。一方面，通过对列表元素的校验，减少了加载或者显示网络图片列表时的内存消耗，避免了列表页面出现卡顿的情况，使显示图片的过程更加流畅；另一方面，减少了显示图片时占用的网络带宽，提高了图片显示速度和效率。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示意性示出本公开示例性实施例中一种目标图片显示方法示意图；

图2示意性示出本公开示例性实施例中一种图片元素数据模型；

图3示意性示出本公开示例性实施例中一种目标图片显示方法的具体流程图；

图4示意性示出本公开示例性实施例中一种目标图片显示装置的框图；

图5示意性示出本公开示例性实施例中一种电子设备的框图；

图6示意性示出本公开示例性实施例中一种程序产品。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

本示例实施方式中首先提供了一种目标图片显示方法，可以应用于iOS系统或者其它系统中。参考图1所示，该目标图片显示方法可以包括以下步骤：

步骤S110.根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

步骤S120.对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

步骤S130.显示与所述目标图片地址对应的所述目标图片。

在本示例性实施例中提供的目标图片显示方法中，一方面，通过对可见区域所有列表元素进行校验，减少了查阅网络图片列表时的内存消耗，避免了列表页面出现卡顿的情况，使显示图片的过程更加流畅；另一方面，减少了显示图片时占用的网络带宽，提高了图片显示速度和效率。

下面，将对本示例实施方式中上述目标图片显示方法中的各步骤进行详细的解释以及说明。

在步骤S110中，根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置。

在iOS系统中，所述列表页面通常由UITableView或UICollectionView组成。这两个界面控件均继承自UIScrollView，其中，UIScrollView是iOS开发中常用的一种界面控件，具有滚动的功能，当手机屏幕需要展示的内容超出一个屏幕时，用户可以在此控件上通过滚动手势查看屏幕外的内容；界面控件UITableView和UICollectionView都继承自UIScrollview，可以用于显示重复性很高的可滚动的界面，例如某个界面全是图片或者全是联系人信息或者全是输入框等等，这些重复性很高的界面元素的次序、位置、数据源均可通过UITableView和UICollectionView进行快速控制。因此，本示例中提供的目标图片显示方法可以搭建在以UIScrollView为图片列表进行布局的处理逻辑之上。

进一步的，基于对列表页面的解释对步骤S110进行进一步说明。可以通过目标图片显示平台实现本示例中的目标图片显示方法，参考图3所示，该平台例如可以包括监测模块、记录模块、校验模块、请求模块以及展示模块。首先可以通过监测模块获取用户对列表页面的操作行为，所述操作行为例如可以包括点击操作、滑动操作；其中点击操作可以与列表页面开启相对应，滑动操作也可以包括例如滑动起始、滑动将要结束、滑动停止等不同的阶段，且不同的操作行为以及不同的操作行为阶段均可以与控制所述列表页面处于不同的状态。

详细而言，根据作用于列表页面的操作行为控制所述列表页面的状态可以包括：

在检测到所述列表页面开启时，根据列表的类型对所述列表页面上的所有界面元素进行初始化。

在本示例中，以点击操作与列表页面开启相对应为例进行说明。在检测到所述列表页面开启时，可以对不同的列表页面上的所有界面元素通过不同的方法进行初始化。举例而言，如果列表为UITableview，系统会调用CellForRowAtIndexPath方法，以复用方式初始化可见的UITableviewCell元素；如果列表为UICollectionView，系统会调用cellForItemAtIndexPath方法，以复用方式初始化可见的UICollectionViewCell元素。其中，显示界面所需的例如文字内容、图片URL等初始化数据可以预先从服务器获取，或者通过内置在App工程中的数据获取。

接下来对复用方式进行解释。假设一个界面中有100张图片，而移动端屏幕一次只能展示5张图片，当界面开始向下滑动，第1张图片消失一部分，第6个图片出来一部分时，系统总共生产了6张图片，当继续向下滑动时，系统可以不再生产图片，因为第7张可以复用第1张，系统只需刷新它的显示内容。以此类推，显示100张图片实际可以只需生产6张图片，通过复用方式，可以提高图片显示的效率。

除此之外，根据作用于列表页面的操作行为控制所述列表页面的状态可以包括：

在检测到作用于所述列表页面的滑动操作时，控制所述列表页面进行滚动。

具体而言，滑动操作的不同阶段可以分别控制列表页面处于不通的状态。当用户手指接触移动设备屏幕，并对列表页面开始滑动操作时，系统会调用UIScrollView的scrollViewWillBeginDragging方法，来通知App滑动开始；当用户手指离开屏幕，列表页面可能由于存在惯性还在继续滚动，此时无论列表滚动是否停止，系统都会调用UIScrollView的scrollViewWillEndDragging方法，通知App滑动将要结束；当列表页面停止滚动时，系统会调用scrollViewDidEndDecelerating方法，通知App滑动停止。

需要注意的是，当用户手指离开屏幕但是列表还在减速滚动过程中时，如果再次检测到滑动操作，系统不会调用scrollViewDidEndDecelerating方法，而是会重新开始scrollViewWillBeginDragging方法。因此，为了提高系统的加载效率，可以在滑动开始时加入校验过程，从而运行一次完整的加载流程。

在滑动操作的过程中通过监测模块检测到列表状态发生变化时，可以通过记录模块实时记录所述列表页面的可见区域的位置和范围。

具体而言，实时记录所述列表页面的可见区域的位置可以包括：

在检测到所述列表页面停止滚动时，根据所述滑动操作结束时的位置记录所述列表页面的所述可见区域的位置信息，并将所述位置信息设置为所述列表页面的宽和高。

本示例中，可以将可见区域用TargetRect标记。在所述列表页面停止滚动时，可以通过监测模块scrollViewWillEndDragging方法中携带的位置信息，记录可见区域的位置，即可以根据所述滑动操作结束时的位置记录所述列表页面的所述可见区域的位置，并将可见区域位置赋值为列表页面的宽和高。

除此之外，还可以根据用户不同的操作行为对可见区域进行标记。例如，在检测到列表页面开启时，可以将可见区域初始化并标记为空；在检测到用户开始滑动列表页面和用户停止滑动列表页面时，可以将可见区域标记重置为空。

需要说明的是，在滑动操作停止后，列表界面可以处于静止状态，此时为了快速高效地显示目标图片，可以通过校验模块对所有的列表元素进行校验，进而进行后续的加载和显示流程。

在步骤S120中，对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片。

本示例中，在确定所述列表页面的可见区域后，可以对可见区域的所有列表元素通过校验模块进行校验，以筛选出符合条件的列表元素并且根据目标图片地址确定当前需要显示的目标图片。

详细而言，本示例实施方式中，对所述可见区域的所有列表元素进行校验可以包括：

在检测到所述滑动操作开始或停止时，判断所述列表上所述可见区域的所有列表元素是否为图片元素；

在所述列表元素为所述图片元素时，判断所述图片元素是否满足预设条件；

在所述图片元素满足所述预设条件时，判断所述可见区域是否为空；

在所述可见区域不为空且所述图片元素未在所述可见区域时，对所述可见区域的所有列表元素进行校验。

本示例中，在检测到作用于所述列表页面上的滑动操作开始或者停止时，首先可以遍历列表上可见区域的所有可见元素，并判断所有可见元素是否为图片元素。具体地判断过程可以通过函数和循环实现，此处不作具体限定。如果所述列表元素为所述图片元素时，接下来判断所述图片元素是否满足预设条件；如果所述图片元素满足预设条件，则可以继续进行下一步校验流程，否则检验结束。

其中，所述图片元素满足所述预设条件可以包括：

所述图片元素为所述占位图片或者所述图片元素为非占位图片且所述图片元素的地址与所述目标图片的地址不同。

具体而言，当网页中加载的图片因为某种原因而加载失败时，浏览器会用图片的alt值代替当前图片位置，或者用默认的占位图片等内容来代替加载失败的图片，用以提示用户图片加载失败等信息。其中，占位图片可以根据实际需求进行自定义设置，设置占位图片的方式有很多种，例如借助tableView的backgroundView或直接以addSubView的方式添加，本示例实施方式中对此不做特殊限定。

此处可以通过对比图片元素与占位图片的URL判断是否为占位图片。根据图3所示的流程图可以得知，在所述图片元素为所述占位图片时，可以进一步判断可见区域是否为空；在所述图片元素为非占位图片时，可以进一步判断所述图片元素的地址是否与所述目标图片的地址相同，在targetShowImageUrl不等于showImageUrl时，则可进一步进行校验流程，否则结束校验流程。

如果此时通过记录模块获取的可见区域TargetRect为空，则可以直接进入请求模块；如果TargetRect不为空，且该图片元素所在的位置不在TargetRect范围内时，可以继续下一步校验过程，否则校验结束。

除此之外，对所述可见区域的所有列表元素进行校验还可以包括：

在检测到所述列表页面开启时，对所述可见区域的列表元素进行分类初始化，并生成图片元素数据模型。

本示例中，在检测到列表页面打开时，由于列表页面上除了网络图片之外，还有可能包含文字、视频等其它信息。此时可以对可见元素的初始化进行分类初始化以对列表元素进行筛选，进而提高对列表元素的分析效率和准确性。详细而言，如果是包含网络图片的列表元素，则将该列表元素初始化为列表元素的子类图片元素，并直接进入请求模块。

参考图2所示，继承于UITableviewCell或者UICollectionViewCell的图片元素的数据模型可以包含四个属性：imageView图片对象、ShowHoldPlaceImage图片对象是否显示为占位图、showImageUrl当前显示图片的URL以及targetShowImageUrl当前需要加载显示的目标图片URL。另外，所述图片元素还可以同时包含请求图片和更新图片显示两个方法。

需要说明的是，在检测到滑动操作开始或滑动操作停止时，校验逻辑均处于运行状态，列表页面可能还处于动态滚动状态，此时会通过记录模块更新记录TargetRect。同时，系统也会调用cellForItemAtIndexPath或cellForItemAtIndexPath方法，刷新可见区域所有列表元素中的数据模型。如果列表元素为图片元素，则刷新其targetShowImageUrl。

在对所述可见区域的所有列表元素进行校验之后，可以判断是否可以进入请求模块，通过当前图片地址showImageUrl是否为目标图片地址targetShowImageUrl确定目标图片，进而显示目标图片。举例而言，在检测到滑动操作开始或滑动操作停止时，如果可见区域TargetRect为空，则可以直接进入请求模块；如果可见区域不为空，但是客户端内存中存在以目标图片的targetShowImageUrl为索引的图片缓存时，也可以进入请求模块；在检测到列表页面开启时，如果列表元素包含网络图片，也可以直接进入请求模块。

接下来，在步骤S130中，显示与所述目标图片地址对应的所述目标图片。

本示例中，可以根据实际需要设置显示图片的优先级顺序，例如对于内存图片、本地图片、网络图片、占位图片而言，可以将显示优先级设置为内存图片>本地图片>网络图片>占位图片。每次需要显示的目标图片地址可以不同。可以按照优先级顺序查询或者判断是否存在与目标图片地址对应的或者匹配的缓存图片或者是网络图片，如果存在，则将对应的图片作为目标图片进行显示。

具体而言，显示与所述目标图片地址对应的所述目标图片可以包括：

在内存中存在与所述目标图片地址对应的图片缓存时，将所述图片缓存作为目标图片进行显示；

在所述内存中未存在与所述目标图片地址对应的图片缓存时，如果本地存储中存在与所述目标图片地址对应的图片缓存，将所述图片缓存记录至所述内存并进行显示。

本示例中，首先可以将目标图片地址与内存中的所有缓存图片逐一进行对比，在内存中的缓存图片其中之一与目标图片地址匹配时，可以将该图片缓存作为目标图片进行显示。

如果客户端的内存中不存在与所述目标图片地址对应的图片缓存，按照图片显示优先级可以将目标图片地址与本地存储的所有缓存图片逐一进行对比，以判断本地存储中是否存在与目标图片地址对应的图片缓存。在本地存储中存在与所述目标图片地址对应的图片缓存时，可以将该图片缓存以targetShowImageUrl为索引的方式记录至客户端内存中，并将该图片缓存作为目标图片进行显示。同时，可以对图片元素中的属性进行设置，例如可以将图片元素的ShowHoldPlaceImage设置成NO，将showImageUrl赋值为targetShowImageUrl，具体地赋值过程可以通过程序完成，此处不作特殊限定。

在此基础上，显示与所述目标图片地址对应的所述目标图片还可以包括：

在所述本地存储中不存在与所述目标图片地址对应的所述图片缓存时，开启异步线程并下载网络图片；

在所述网络图片下载成功时，将下载的所述网络图片保存至本地存储以及内存中并将所述网络图片作为所述目标图片进行显示；

在所述网络图片下载失败时，将所述占位图片作为所述目标图片进行显示。

本示例中，如果客户端内存中和本地存储中都不存在与目标图片地址对应的图片缓存，则可以控制系统开启异步线程并下载网络图片。通过这种方式，可以避免用户滑动页面时，并行的异步请求占用大量网络带宽的问题，进而可以提高网络图片的加载速度，快速显示目标图片。

举例而言，可以在ViewController.m中的viewDidLoad函数中使用NSOperationQueue创建一个多线程队列。创建好多线程队列之后，使用NSBlockOperation创建一个线程bop，根据URL下载网络图片，进而将目标URL指向的图片下载到客户端并显示到UIImageView上。

接下来，可以通过UIImageView上是否显示目标图片判断网络图片是否下载成功。在所述网络图片下载成功时，可以将下载的网络图片保存至本地存储中并且读取至内存中，此时本地存储和内存中的索引均为targetShowImageUrl，同时可以将下载的网络图片作为所述目标图片进行显示。除此之外，还可以对图片元素中的属性进行设置，例如可以将图片元素的ShowHoldPlaceImage设置成NO，并且将showImageUrl赋值为targetShowImageUrl，具体地赋值过程可以通过程序完成。

在由于网络问题或者其它异常情况导致网络图片下载失败时，可以将该客户端对应的App中的占位图片作为所述目标图片进行显示。同时，可以将图片元素的ShowHoldPlaceImage设置成YES，而将showImageUrl设置为空，完成目标图片的整个显示过程。

本示例中提供的目标图片显示方法，减少了App中加载网络图片列表所需的数据量和并发量，节省了带宽资源，进而可以实现网络图片的快速加载和显示。

本公开还提供了一种目标图片显示装置。参考图4所示，该目标图片显示装置400可以包括监测模块401、校验模块402、显示模块403。其中：

监测模块401，可以用于根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

校验模块402，可以用于对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

显示模块403，可以用于显示与所述目标图片地址对应的所述目标图片。

上述目标图片显示装置中各模块的具体细节已经在对应的目标图片显示方法中进行了详细描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。

在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图5来描述根据本发明的这种实施方式的电子设备600。图5显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：上述至少一个处理单元610、上述至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤S110.根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；步骤S120.对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；步骤S130.显示与所述目标图片地址对应的所述目标图片。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器660通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。

参考图6所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其他实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

Claims (12)

1.一种目标图片显示方法，其特征在于，包括：

根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

显示与所述目标图片地址对应的所述目标图片。

2.根据权利要求1所述的目标图片显示方法，其特征在于，根据作用于列表页面的操作行为控制所述列表页面的状态包括：

在检测到作用于所述列表页面的滑动操作时，控制所述列表页面进行滚动。

3.根据权利要求1所述的目标图片显示方法，其特征在于，实时记录所述列表页面的可见区域的位置包括：

在检测到所述列表页面停止滚动时，根据所述滑动操作结束时的位置记录所述列表页面的所述可见区域的位置信息，并将所述位置信息设置为所述列表页面的宽和高。

4.根据权利要求1所述的目标图片显示方法，其特征在于，对所述可见区域的所有列表元素进行校验包括：

在检测到所述滑动操作开始或停止时，判断所述列表上所述可见区域的所有列表元素是否为图片元素；

在所述列表元素为所述图片元素时，判断所述图片元素是否满足预设条件；

在所述图片元素满足所述预设条件时，判断所述可见区域是否为空；

在所述可见区域不为空且所述图片元素未在所述可见区域时，对所述图片元素进行校验。

5.根据权利要求4所述的目标图片显示方法，其特征在于，所述图片元素满足所述预设条件包括：

所述图片元素为所述占位图片或者所述图片元素为非占位图片且所述图片元素的地址与所述目标图片的地址不同。

6.根据权利要求1所述的目标图片显示方法，其特征在于，显示与所述目标图片地址对应的所述目标图片包括：

在内存中存在与所述目标图片地址对应的图片缓存时，将所述图片缓存作为目标图片进行显示；

在所述内存中未存在与所述目标图片地址对应的图片缓存时，如果本地存储中存在与所述目标图片地址对应的图片缓存，将所述图片缓存记录至所述内存并进行显示。

7.根据权利要求6所述的目标图片显示方法，其特征在于，显示与所述目标图片地址对应的所述目标图片还包括：

在本地存储中不存在与所述目标图片地址对应的所述图片缓存时，开启异步线程并下载网络图片；

在所述网络图片下载成功时，将下载的所述网络图片保存至本地以及内存中并将所述网络图片作为所述目标图片进行显示；

在所述网络图片下载失败时，将所述占位图片作为所述目标图片进行显示。

8.根据权利要求1所述的目标图片显示方法，其特征在于，对所述可见区域的所有列表元素进行校验还包括：

在检测到所述列表页面开启时，对所述可见区域的列表元素进行分类初始化，并生成图片元素数据模型。

9.根据权利要求1所述的目标图片显示方法，其特征在于，根据作用于列表页面的操作行为控制所述列表页面的状态还包括：

在检测到所述列表页面开启时，根据列表的类型对所述列表页面上的所有界面元素进行初始化。

10.一种目标图片显示装置，其特征在于，包括：

监测模块，用于根据作用于列表页面的操作行为控制所述列表页面的状态，并实时记录所述列表页面的可见区域的位置；

校验模块，用于对所述可见区域的所有列表元素进行校验，并根据一目标图片地址确定所述目标图片；

显示模块，用于显示与所述目标图片地址对应的所述目标图片。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-9任一项所述的目标图片显示方法。

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

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-9任一项所述的目标图片显示方法。