CN109388317B - 一种图片加载方法、终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种图片加载方法、终端设备及存储介质，属于应用开发领域。本发明提供的方法包括：监听到终端页面上的滑动事件后，计算当前页面的滑动速度；当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片。本发明中可以减少在加载图片时，不必要的资源耗费，同时不影响用户浏览体验的前提下，保证图片加载的流畅性。

Description

一种图片加载方法、终端设备及存储介质

技术领域

本发明涉及应用开发领域，尤其涉及一种图片加载方法、终端设备及存储介质。

背景技术

使用手机过程中，经常会碰到某个页面图片特别多，例如观看新闻，或刷淘宝，在这种情况下，有时页面会提供缩略图，在用户点开之后才加载图片，有时必须提供加载好图片，以便用户了解详情。

对于必须加载到手机终端的图片，会由于图片过多，用户在上下滑动页面，出现卡顿，实际中用户上下滑动页面可能是对当前部分内容不感兴趣，尤其当用户滑动速度特别快时，若去加载所有未缓存的图片，会导致内存资源耗费严重，手机卡顿，进而影响用户体验。

发明内容

有鉴于此，本发明实施例提供了一种图片加载方法、终端设备及存储介质，以解决用户滑动较快时，需加载图片过多引起卡顿的的问题。

结合本发明实施例的第一方面，提供了一种图片加载方法，包括：

监听到终端页面上的滑动事件后，计算当前所述页面的滑动速度；

当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片。

结合本发明实施例的第二方面，提供了一种终端设备，包括：

计算模块：用于监听到终端页面上的滑动事件后，计算当前所述页面的滑动速度；

展示模块：用于当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片

结合本发明实施例的第三方面，提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本发明实施例第一方面所述方法的步骤。

结合本发明实施例的第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例第一方面提供的所述方法的步骤。

结合本发明实施例的第五方面，提供了一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被一个或多个处理器执行时实现本发明实施例第一方面提供的所述方法的步骤。

从以上技术方案可以看出，本发明实施例具有以下优点：

在本发明实施例中，通过计算用户滑动速度，判断为快速滑动时，就只展示已完成加载图片，不再另行加载未缓存的图片，使得图片加载效率得以提高，减少不必要资源耗费，保障手机使用的流畅，进而提升用户体验。与此同时，相对于一些直接在用户滑动时，就停止图片加载的方案，不仅会影响用户正常浏览，而且临时请求图片会引起卡顿，本方案可以既可以保障用户浏览体验，而且保障滑动时，加载流畅。

附图说明

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

图1为本发明实施例提供的图片加载方法的一个实施例流程图；

图2为本发明实施例提供的图片加载方法的另一个实施例流程图

图3为本发明实施例提供的图片加载的终端设备的结构示意图；

图4为本发明实施例提供的终端设备的结构示意图。

具体实施方式

本发明实施例提供了一种图片加载方法、终端设备及存储介质，用于用户滑动时加载图片。

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

实施例一：

请参阅图1，本发明实施例提供的图片加载方法的流程示意图，包括以下步骤：

S101、监听到终端页面上的滑动事件后，计算当前页面的滑动速度；

所述滑动可指用户通过手指或其他身体部位按压触摸屏后向某一方向拖动的操作，也可以是通过鼠标拖动滚动条或直接滚动的操作，在此不做限定。终端监听用户的操作行为，当监测对应的触发事件，如点击、滑动等，终端页面会展示对应的操作结果。

优选的，所述滑动还可以包括惯性滑动，即当用户停止按压屏幕后，终端页面仍会滑动一定距离，在本发明实施例中，滑动的终止行为以页面悬停为准。

所述页面可以是终端应用的页面，也可以是网页页面，或其他需要向服务区请求图片数据可在终端展示的界面。所述当前页面指的的是用户滑动时，在终端窗口展示的页面，包括用户滑动开始到滑动结束时的展示页面。

所述滑动速度为通过的滑动操作，页面在一定时间内确定方向上展示的位置发生改变的距离与时间间隔的比例，通常会以当前终端窗口展示的页面位置为停止位置，具体可以屏幕一个确定位置恒定滑动页面后位置改变距离，一般方向根据滑动方向确定，可以是上下滑动，即纵轴Y轴上的偏移量计算，也可以是做横轴偏移计算。

可选的，每当用户停止滑动后，记录每次停止滑动的停止时间和停止位置。用户滑动屏幕时，通常是间歇性滑动，当本发明实施例中停止时间和位置以页面最终在终端窗口悬停时刻和位置为准。所述用户停止滑动是指当前的终端窗口处于不再进行滚动(或滑动)的状态，并此时记录页面停止滚动的时刻及位置。优选的，所述可以保存用户每次滑动停止时刻及位置，也可以保存用户当前滑动时刻与位置，以及上一次停止滑动的停止时刻及位置，实时更新当前滑动及上一次滑动的数据。

可选的，在监听到所述滑动事件前，获取用户上一次滑动的第一停止时间和第一停止位置；获取当前滑动的第二停止时间和第二停止位置；根据所述第一停止时间和所述第一停止位置以及所述第二停止时间和所述第二停止位置，计算当前页面的滑动速度。所述第一停止时间和第一停止位置为当前滑动前，上一次滑动停止的时间和位置，停止时间一般可通过***时间来记录，停止位置可以页面初始位置为准。

所述第一停止时间和所述第一停止位置为用户上一次滑动停止的时间和位置，所述第二停止时间和所述第二停止位置为用户当前滑动停止时间和位置。用户每一次停止滑动的时间和位置都可以存储记录下，计算滑动速度时，可以直接获取得到。

S102、当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片。

所述预设阈值是一个确定的数值，用以衡量用户滑动速度。优选的所述滑动速度可根据终端机型、硬件配置或图片加载能力来设定，终端类型不同，预设阈值大小也可以改变。

在当前页面展示已完成缓存的图片，即再终端窗口展示滑动页面上的图片，这些图片一般会一闪而过，所以不用全部加载未缓存图片到当前窗口进行展示，一般已经加载过的直接展示，未完成加载(或缓存)图片，直接展示缩略图即可，这样可以避免过多图片加载，占用网络和内存资源，引起卡顿。

所述已完成缓存指的是图片已经下载到终端内存。直接加载内存中的图片资源要快于向服务器请求图片数据。

可选的，所述在当前页面展示已完成缓存的图片还包括：

展示未完成缓存图片的缩略图。所述缩略图是指原图经过压缩处理后的小图，通常可以链接到原图，根据缓存命令，获取加载原图数据。

可选的，当所述滑动速度未超过预设阈值，则在当前页面加载未完成缓存的图片。

当用户滑动速度较慢时，即不是快速滑动，需要为滑动页面(或称在终端窗口展示的页面)加载缓存图片，对未完成加载的图片，直接向服务器请求该图片。用户滑动时，终端窗口需要呈现图片给用户，当滑动速度未超过阈值，可认定用户在慢速浏览，这时需要保障图片的正常加载。

相对于现有的一种在用户滑动时就停止图片加载的方法，不仅影响用户使用体验，而且在停止滑动时，会加大图片加载负荷。

以上通过区分用户滑动速度的快慢，选择图片加载方式，避免用户滑动时不加载图片，或加载所有图片，在保证用户正常浏览体验的基础上，减少内存占用，保障使用的流畅。

为便于理解，根据图1所描述的实施例，下面以一个实际应用场景对本发明实施例中的一种空中交通防撞方法进行描述：

在图2中示出了具体通过代码实现图片加载方法的流程示意图，具体如下：

***获取到终端屏幕或者鼠标的滑动事件后，会触发计算滑动速度的方法，在S202和S203之前，定义每次页面停止滑动时，在***的scrollViewDidEndScrollingAnimation:(UIScrollView*)scrollView方法里，通过***方法获取当前时间currentTime，并获取当前列表在Y轴上的偏移量currentOffset。

创建一个NSData类型的prevTime属性来记录上次停止滑动时的时间(默认第一个为0)，并创建一个浮点型(float)类型的prevOffset属性，来记录上次停止滑动时Y轴方向偏移量。

在S204中，用当前时间减去上一次停止滑动的时间prevTime，得到一个时间时间差x，用当前偏移量(currentOffset)减去上一次停止滑动的偏移量(prevOffset)，得到一个偏移量差值y，用x/y计算得到当前滑动速度speed，如果滑动速度speed>临界值(或阈值)，则表示此次滑动操作为快速滑动。

可选的，创建一个全局的布尔属性isScrollFast,用以记录当前页面的滑动是否为快速滑动。一般可以设置默认值，当判定为快速滑动或非快速滑动时，更改isScrollFast的值，标定滑动状态。

优选的，上述临界值(或阈值)可根据不同终端设备的硬件配置、或图片加载能力，阈值的设定可以不同，这样更能适应用户需求。

当判定为非快速滑动，则在S206加载所有需要缓存的图片，可选的，关联图片对应的数据，所述图片可以链接展示到对应的缓存数据。具体通过objc_setAssociatedObject方法关联起来，，并将关联结果标为1，用以表示图片是否被缓存过。

通常若直接使用sd_setImageWithURL方法加载图片，将会重新下载图片会非常耗费资源，基于图片与缓存数据的对应关系，通过objc_setAssociatedObjec方法，将缓存数据与图片缩略图关联起来，可以在需要的时候加载图片。

当判定为快速滑动时，则在S207中判断需要加载的图片是否加载过，具体的，通过objc_getAssociateObject方法，来得到该图片被缓存关联的结果，代码如下：NSIntegerimageLoaded＝[objc_getAssociatedObject(data,

”imageLoaded”)integerValue]；

S208中如果imageLoaded，即关联结果不为1，表示关联结果未缓存，则不做任何操作，展示原本的缩略图即可。

S209中如果imageLoaded，即关联结果为1，表示图片已被缓存，直接展示已缓存图片。

通过以上S206、S208和S209分别根据各自的场景展示对应的图片，能满足用户需求的同时保障图片加载的流畅。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

实施例三：

上面主要描述了一种图片加载方法，下面将对一种图片加载的终端设备进行详细描述。

图3示出了本发明实施例提供的图片加载的终端设备的结构示意图，包括：

计算模块310：用于监听到终端页面上的滑动事件后，计算当前页面的滑动速度；

所述滑动可指用户通过手指或其他身体部位按压触摸屏后向某一方向拖动的操作，也可以是通过鼠标拖动滚动条或直接滚动的操作，在此不做限定。终端监听用户的操作行为，当监测对应的触发事件，如点击、滑动等，终端页面会展示对应的操作结果。

优选的，所述滑动还可以包括惯性滑动，即当用户停止按压屏幕后，终端页面仍会滑动一定距离，在本发明实施例中，滑动的终止行为以页面悬停为准。

所述页面可以是终端应用的页面，也可以是网页页面，或其他需要向服务区请求图片数据可在终端展示的界面。所述当前页面指的的是用户滑动时，在终端窗口展示的页面，包括用户滑动开始到滑动结束时的展示页面。

所述滑动速度为通过的滑动操作，页面在一定时间内确定方向上展示的位置发生改变的距离与时间间隔的比例，通常会以当前终端窗口展示的页面位置为停止位置，具体可以屏幕一个确定位置恒定滑动页面后位置改变距离，一般方向根据滑动方向确定，可以是上下滑动，即纵轴Y轴上的偏移量计算，也可以是做横轴偏移计算。

可选的，所述计算模块310还包括：

记录模块330：用于每当用户停止滑动后，记录每次停止滑动的停止时间和停止位置。

所述用户停止滑动是指当前的终端窗口处于不再进行滚动(或滑动)的状态，并此时记录页面停止滚动的时刻及位置。优选的，所述可以保存用户每次滑动停止时刻及位置，也可以保存用户当前滑动时刻与位置，以及上一次停止滑动的停止时刻及位置，实时更新当前滑动及上一次滑动的数据。

可选的，所述计算模块310具体包括为：

第一获取模块：用于在监听到所述滑动事件前，获取用户上一次滑动的第一停止时间和第一停止位置；

第二获取模块：用于获取当前滑动的第二停止时间和第二停止位置；

计算单元：用于根据所述第一停止时间和所述第一停止位置以及所述第二停止时间和所述第二停止位置，计算当前页面的滑动速度。

展示模块320：用于当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片。

所述预设阈值是一个确定的数值，用以衡量用户滑动速度。优选的所述滑动速度可根据终端机型、硬件配置或图片加载能力来设定，终端类型不同，预设阈值大小也可以改变。

在当前页面展示已完成缓存的图片，即再终端窗口展示滑动页面上的图片，这些图片一般会一闪而过，所以不用全部加载未缓存图片到当前窗口进行展示，一般已经加载过的直接展示，未完成加载(或缓存)图片，直接展示缩略图即可，这样可以避免过多图片加载，占用网络和内存资源，引起卡顿。

所述已完成缓存指的是图片已经下载到终端内存。直接加载内存中的图片资源要快于向服务器请求图片数据。

可选的，所述当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片还包括：

展示未完成缓存图片的缩略图。

可选的，所述展示模块320还包括：

加载模块340：用于当所述滑动速度未超过预设阈值，则在当前页面加载未完成缓存的图片。用户滑动时，终端窗口需要呈现图片给用户，当滑动速度未超过阈值，可认定用户在慢速浏览，这时需要保障图片的正常加载。

相对于现有的一种在用户滑动时就停止图片加载的方法，不仅影响用户使用体验，而且在停止滑动时，会加大图片加载负荷。

上述的终端设备，可以通过计算用户滑动速度，确定是否需要加载图片，可以适应用户需求，保障图片加载的流畅性。

实施例四：

图4是本发明一实施例提供的数据库查询的终端设备的结构示意图。所述终端设备，为具备触摸屏的移动计算机设备，包括但不限于智能手机、智能手表、笔记本、平板电脑、POS机甚至包括车载电脑。如图4所示，该实施例的终端设备4包括：存储器410、处理器420以及***总线430，所述存储器410包括存储其上的可运行的程序4101，本领域技术人员可以理解，图4中示出的终端设备结构并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图4对终端设备的各个构成部件进行具体的介绍：

存储器410可用于存储软件程序以及模块，处理器420通过运行存储在存储器410的软件程序以及模块，从而执行终端的各种功能应用以及数据处理。存储器410可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端的使用的业务数据(比如直播数据、页面显示数据等)等。此外，存储器410可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

在存储器410上包含数据库查询方法的可运行程序4101，所述可运行程序4101可以被分割成一个或多个模块/单元，所述一个或多个模块/单元被存储在所述存储器410中，并由处理器420执行，以加载展示图片，所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序4101在所述终端设4中的执行过程。例如，所述计算机程序4101可以被分割为计算模块和展示模块。

处理器420是终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分，通过运行或执行存储在存储器410内的软件程序和/或模块，以及调用存储在存储器410内的数据，执行终端的各种功能和处理数据，从而对终端进行整体监控。可选的，处理器420可包括一个或多个处理单元；优选的，处理器420可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作***、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器420中。

***总线430是用来连接计算机内部各功能部件，可以传送数据信息、地址信息、控制信息，其种类可以是例如PCI总线、ISA总线、VESA总线等。处理器420的指令通过总线传递至存储器410，存储器410反馈数据给处理器420，***总线430负责处理器420与存储器410之间的数据、指令交互。当然***总线430还可以接入其他设备，例如网络接口、显示设备等。

终端设备还可包括至少一种传感器，比如光传感器、运动传感器以及其他传感器，一种输入设备，比如触摸屏、键盘及其他，一种输出设备，比如扬声器、显示器及其他，可选的，在本发明实施例中，输入设备可用于输入指令，如查找要求，输出设备可用于显示查询结果，向用户展示查询数据。其他构成部件在此不再赘述。

在本发明实施例中，该终端所包括的处理器420执行的可运行程序具体为：

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

监听到终端页面上的滑动事件后，计算当前页面的滑动速度；

当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片。

进一步的，所述监听到终端页面上的滑动事件后，计算当前页面的滑动速度之前还包括：

每当用户停止滑动后，记录每次停止滑动的停止时间和停止位置。

进一步的，所述计算当前页面的滑动速度具体为：

在监听到所述滑动事件前，获取用户上一次滑动的第一停止时间和第一停止位置；

获取当前滑动的第二停止时间和第二停止位置；

根据所述第一停止时间和所述第一停止位置以及所述第二停止时间和所述第二停止位置，计算当前页面的滑动速度。

进一步的，所述根当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片还包括：

展示未完成缓存图片的缩略图。

进一步的，所述当所述滑动速度超过预设阈值，则在当前页面展示已完成缓存的图片还包括：

当所述滑动速度未超过预设阈值，则在当前页面加载未完成缓存的图片。

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

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各实施例的模块、单元和/或方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

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

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

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

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.一种图片加载方法，其特征在于，包括：

监听到终端页面上的滑动事件后，计算当前所述页面的滑动速度；

当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片；

所述当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片还包括：

展示未完成缓存图片的缩略图；

所述方法还包括：将图片与缓存数据关联，且使用关联结果表示，当关联结果为1时，表示图片未缓存，展示缩略图；当关联结果不为1时，表示图片已被缓存，直接展示已缓存的图片。

2.根据权利要求1所述的方法，其特征在于，所述监听到终端页面上的滑动事件后，计算当前所述页面的滑动速度之前还包括：

每当用户停止滑动后，记录每次停止滑动的停止时间和停止位置。

3.根据权利要求2所述的方法，其特征在于，所述计算当前所述页面的滑动速度具体为：

在监听到所述滑动事件前，获取用户上一次滑动的第一停止时间和第一停止位置；

获取当前滑动的第二停止时间和第二停止位置；

根据所述第一停止时间和所述第一停止位置以及所述第二停止时间和所述第二停止位置，计算当前所述页面的滑动速度。

4.根据权利要求1所述的方法，其特征在于，所述当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片还包括：

当所述滑动速度未超过预设阈值，则在当前所述页面加载未完成缓存的图片。

5.一种终端设备，其特征在于，包括：

计算模块：用于监听到终端页面上的滑动事件后，计算当前所述页面的滑动速度；

展示模块：用于当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片；所述当所述滑动速度超过预设阈值，则在当前所述页面展示已完成缓存的图片还包括：展示未完成缓存图片的缩略图；

具体的，将图片与缓存数据关联，且使用关联结果表示，当关联结果为1时，表示图片未缓存，展示缩略图；当关联结果不为1时，表示图片已被缓存，直接展示已缓存的图片。

6.根据权利要求5所述的终端设备，其特征在于，所述计算模块还包括：

记录模块：用于每当用户停止滑动后，记录每次停止滑动的停止时间和停止位置。

7.根据权利要求5所述的终端设备，其特征在于，所述展示模块还包括：

加载模块：用于当所述滑动速度未超过预设阈值，则在当前所述页面加载未完成缓存的图片。

8.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述图片加载方法的步骤。

9.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4中任一项所述图片加载方法的步骤。

Images