CN106201247A - 一种相册中的图片加载方法及系统 - Google Patents

Abstract

本发明公开了一种相册中的图片加载方法，属于互联网技术领域。该方法包括：将相册中的多个图片分为多个组，并生成组列表；响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。本发明还公开了一种相册中的图片加载的系统。本发明的方法和系统可快速的查看相册中的特定的图片，实现了相册中的图片的按需加载，有效节省了系统资源，提高了用户查看的速度，为用户带来更好的使用体验。

Description

一种相册中的图片加载方法及系统

技术领域

本公开涉及互联网技术领域，尤其涉及一种相册中的图片加载方法及系统。

背景技术

相册，是人们记录生活点滴最重要的方式之一，拍照和录像也成为用户在手机上最常用的功能之一。随时随地留下精彩瞬间到自己的相册或分享给亲近的人，那种感觉是美妙的。随着设备的增多，用户在手机、电视、电脑等多智能终端浏览自己照片的需求也日趋增加，按照具体的时间点或拍摄地点来选择性查看照片的需求，越来越强烈。

在多终端查看照片更进一步提高了浏览体验。现在通过多终端查看相册的技术中，普通采用瀑布流加载方式。具体而言，每次用户登录相册后，会分批量依次从服务端获取照片并展示，相当于是串行的加载方式。这种瀑布流的加载方式基本能满足用户浏览相册的需要。

然而，随着用户使用手机时间的增加，照片的积累量也会越来越多。发明人发现当用户需要看一年前甚至更早前的照片时，就要先把1年内的照片依次加载完成后，即只能慢慢的向下查看直到加载到想看到的照片为止。这样，势必给相册服务器造成很大的访问压力，不仅浪费系统资源，而且加载时间较长，导致浏览速度较慢，严重影响用户使用体验。

发明内容

本公开实施例提供一种相册中的图片加载方法及系统，用以解决现有技术中用户查看相册必须等待当前界面中图片完全加载完成，等待时间长，无法快速查看用户所要查看的相册信息的缺陷，实现相册中图片的按需加载。

根据本公开实施例的一个方面，提供一种相册中的图片的加载方法，其包括：

将相册中的多个图片分为多个组，并生成组列表；

响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。

根据本公开实施例的另一个方面，提供一种相册中图片的加载系统，其包括：

分组模块，用于将相册中的多个图片分为多个组，并生成组列表；

加载模块，用于响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。

本公开实施例提供的相册中图片的加载方法和系统，通过响应用户的滚动操作，比较用户滚动操作期间的每次悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的当前可视区域中图片。通过本公开提供的方法和系统，改变了现有技术中相册瀑布流加载存在的问题，实现了相册中图片的按需加载，有效节省了系统资源，提高了用户浏览相册的速度，为用户带来更好的使用体验。

附图说明

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

图1为本公开的相册中图片加载方法的一实施方式流程图；

图2为本公开的相册中图片加载方法的另一实施方式流程图；

图3为用户快速滚动过程中当前界面显示效果图；

图4为用户滚动过程中悬停时间大于预定阈值时当前界面显示效果图；

图5为本公开的相册中图片加载系统的一实施方式结构示意图；

图6为本公开的用户设备的一实施方式的示意图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施方式及实施方式中的特征可以相互组合。

本公开实施例可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本公开实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本公开，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”，不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

实施例一：

如图1所示，本公开的相册中图片加载方法的一实施方式的流程图，其包括：

S101、将相册中的多个图片分为多个组，并生成组列表；

S102、响应于用户对界面的滚动操作，比较滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的界面中当前可视区域所对应的组列表中的组中的图片。

在本实施方式中，用户通过客户端，例如PC客户端成功登录相册后，当打开某个相册或已经进入相册想要刷新显示时，相册服务器(例如云相册服务器)响应用户的查看或刷新请求，进行初始化操作，获取相册中图片的某项属性的所有列表集合。将相册中的多个图片分为多个组，并生成一个组列表。组列表即相册按某个属性进行分组的结果，其中没有图片。初始化时，在用户客户端的当前页面首先加载可视区域中相册的组中的图片，主要显示图片的缩略图，同时还要加载图片的其它详细信息，如图片的存储路径等信息。当用户想要看很靠后的组中的图片时，只要对当前界面进行滚动操作(如通过鼠标拖动滚动条或其它引起界面滚动的操作)，相册服务器响应于用户对界面的滚动操作，比较滚动时每次悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的界面中当前可视区域所对应的所述组列表中的组中的图片，在客户端上显示图片缩略图、同时还要加载图片存储路径等图片的其它详细信息。这样，用户想看很靠后的相册中的图片时，只需快速滚动到想看相册中的某一分组，不需要等待中间的数据加载完成后才能看到，而是通过快速滚动直接就可以看到，无需等待，既提高了用户浏览相册的速度，为用户带来更好的使用体验，又节省了系统资源，实现了按需加载。

上述实施方式中将相册中的多个图片分为多个组，可以根据相册中图片的相关属性来对相册进行分组。

可选地，上述实施方式步骤S101中将相册中的多个图片分为多个组，并生成组列表包括：按照图片上传日期将相册中的多个图片分为多个组，并生成时间轴的组列表。

可选地，上述实施方式步骤S101中将相册中的多个图片分为多个组，并生成组列表包括：按照图片拍摄地的地理位置将相册中的多个图片分为多个组，并生成地理位置的组列表。

可选地，上述实施方式中预定阈值为300毫秒，该预定阈值可配置，可以根据需要进行调整。

实施例二：

如图2所示，为本公开的相册中图片加载方法的另一实施方式的流程图，在该实施方式中，响应于用户对界面的滚动操作，比较滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的界面中当前可视区域所对应的组列表中的组中的图片包括：

S1021、响应于用户对界面的滚动操作，在滚动操作期间在界面上所有经过的可视区域中显示所对应的组列表中的组的占位符；

S1022、比较滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅在悬停时间大于预定阈值的界面中当前可视区域所对应的所述组列表中的组中的占位符中加载对应的组中的图片。

将相册中的多个图片分为多个组，并生成组列表后，将组列表中的每个组分块显示在客户端上，每个组显示一个空的占位符。

下面参照图3和图4，以用户使用本公开的相册中图片加载方法的实际场景为例，对本公开的相册中图片的加载方法进行进一步的说明。

1.用户通过PC客户端登录相册，输入其用户名和密码进行登录。

2.登录成功后，用户点击要查看的相册，并进入相册，相册服务器端响应用户进入相册的请求，从相册数据库中提取用户请求查看的相册的所有时间轴信息，即相册中图片的上传日期。

3.相册服务器端根据获得的相册中图片的上传日期对相册中图片进行分组，即将同一天上传的图片放在一起，此时只是获得相册中上传日期的列表，没有加载图片；然后以日期分块显示在PC客户端上，此时只显示一个空的占位符，即一个图片上传日期用一个占位符显示，同时也在PC客户端上显示纵向的时间辆。分块是为了看某一天的详情相册，时间轴是为了快速的切换到某一天。

4.当用户想看很靠后的数据时，例如2016年1月2日的图片时，通过拖动时间轴，即滚动当前页面，相册服务器端将用户滚动操作期间的每次悬停的悬停时间与预定阈值的大小进行比较，这里预定阈值为300毫秒。当用户快速滚动时，即悬停时间小于或等于300毫秒时，在界面上用户滚动所有经过的可视区域中显示时间轴中图片的占位符，如图3所示；当用户滚动悬停时，且悬停时间大于300毫秒时，在界面当前可视区域加载所对应的时间轴中图片详情，在PC客户端显示图片的缩略图，如图4所示。图片详情包括，图片的存储路径等信息项。用户通过点击图片的缩略图可以进一步查看图片对应的原图。

本公开实施方式中可以通过硬件处理器(hardware processor)来实现相关功能模块。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作合并，但是本领域技术人员应该知悉，本公开并不受所描述的动作顺序的限制，因为依据本公开，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本公开所必须的。

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

如图5所示，本公开的相册中图片加载系统的一实施方式的结构示意图，其包括：

分组模块，用于将相册中的多个图片分为多个组，并生成组列表；

加载模块，用于响应于用户对界面的滚动操作，比较滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的界面中当前可视区域所对应的组列表中的组中的图片。

本实施方式中通过分组模块实现将相册中的多个图片分为多个组，并生成组成表，加载模块响应用户对界面的滚动操作，比较滚动操作期间的每次悬停时间与预定阈值的大小，仅加载悬念时间大于预定阈值的界面中当前可视区域所对应的组列表中的组的图片。这样，用户想看很靠后的相册中的图片时，只需快速滚动到想看相册中的某一分组，不需要等待中间的数据加载完成后才能看到，而是通过快速滚动直接就可以看到，无需等待，既提高了用户浏览相册的速度，为用户带来更好的使用体验，又节省了系统资源，实现了按需加载。

可选地，分组模块用于按照图片上传日期将相册中的多个图片分为多个组，并生成时间轴的组列表。

可选地，分组模块用于按照图片拍摄地的地理位置将相册中的多个图片分为多个组，并生成地理位置的组列表。

可选地，预定阈值为300毫秒。

进一步可选地，加载模块用于：

响应于用户对界面的滚动操作，在滚动操作期间在界面上所有经过的可视区域中显示所对应的组列表中的组的占位符；

比较滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅在悬停时间大于预定阈值的界面中当前可视区域所对应的组列表中的组中的占位符中加载对应的组中的图片。

如图6所示，为本公开上述实施方式中用户设备600一实施方式的结构示意图，本公开具体实施方式并不对用户设备600的具体实现做限定。如图6所示，该用户设备600可以包括：

处理器(processor)610、通信接口(Communicat ions Interface)620、存储器(memory)630、以及通信总线640。其中：

处理器610、通信接口620、以及存储器630通过通信总线640完成相互间的通信。

通信接口620，用于与比如客户端等的网元通信。

处理器610，用于执行程序631，具体可以执行上述方法实施例中的相关步骤。

具体地，程序631可以包括程序代码，所述程序代码包括计算机操作指令。

处理器610可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本申请实施例的一个或多个集成电路。

上述实施例中的用户设备，包括：

存储器，用于存放程序；

处理器，用于执行所述存储器存储的程序，所述程序使得所述处理器执行以下操作：

将相册中的多个图片分为多个组，并生成组列表；

响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

本领域内的技术人员应明白，本公开的实施方式可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施方式、完全软件实施方式、或结合软件和硬件方面的实施方式的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

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

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

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

Claims (10)

1.一种相册中的图片加载方法，包括：

将相册中的多个图片分为多个组，并生成组列表；

响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。

2.根据权利要求1所述的方法，其特征在于，所述将相册中的多个图片分为多个组，并生成组列表包括：

按照图片上传日期将相册中的多个图片分为多个组，并生成时间轴的组列表。

3.根据权利要求1所述的方法，其特征在于，所述将相册中的多个图片分为多个组，并生成组列表包括：

按照图片拍摄地的地理位置将相册中的多个图片分为多个组，并生成地理位置的组列表。

4.根据权利要求1所述的方法，其特征在于，所述预定阈值为300毫秒。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片包括：

响应于用户对界面的滚动操作，在滚动操作期间在界面上所有经过的可视区域中显示所对应的组列表中的组的占位符；

比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅在悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的占位符中加载对应的组中的图片。

6.一种相册中的图片加载系统，包括：

分组模块，用于将相册中的多个图片分为多个组，并生成组列表；

加载模块，用于响应于用户对界面的滚动操作，比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅加载悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的图片。

7.根据权利要求6所述的系统，其特征在于，所述分组模块用于按照图片上传日期将相册中的多个图片分为多个组，并生成时间轴的组列表。

8.根据权利要求6所述的系统，其特征在于，所述分组模块用于按照图片拍摄地的地理位置将相册中的多个图片分为多个组，并生成地理位置的组列表。

9.根据权利要求6所述的系统，其特征在于，所述预定阈值为300毫秒。

10.根据权利要求6-9中任一项所述的系统，其特征在于，所述加载模块用于：

响应于用户对界面的滚动操作，在滚动操作期间在界面上所有经过的可视区域中显示所对应的组列表中的组的占位符；

比较所述滚动操作期间的每次悬停的悬停时间与预定阈值的大小，仅在悬停时间大于预定阈值的所述界面中当前可视区域所对应的所述组列表中的组中的占位符中加载对应的组中的图片。