CN109062651A - Ui界面的图片加载方法、装置、存储介质及智能终端 - Google Patents

Abstract

本发明公开一种UI界面的图片加载方法，该UI界面的图片加载方法包括以下步骤：加载UI界面显示所需的所有图片中每张图片的部分内容，所述部分内容包括：图片的部分清晰度、图片的部分分辨率或图片的部分像素；在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述部分内容。本发明旨在让用户快速看到整体的UI界面，使系统运行更加流畅，提升用户体验。

Description

UI界面的图片加载方法、装置、存储介质及智能终端

技术领域

本发明涉及图形处理技术领域，特别涉及一种UI界面的图片加载方法、装置、存储介质及智能终端。

背景技术

目前UI界面的图片一般采用直接显示的方式，将所有需要显示的图片一次性全部加载到内存里，再显示出来。随着UI界面越来越精美和复杂，图片的数量越来越多，图片文件的尺寸也越来越大，所需要的内存资源也越来越多，所需要加载的时间也越来越长。如此造成画面加载需要时间长的问题，同时，给用户带来的体验是系统卡，运行速度慢，特别是界面来回切换时这种情况更加明显示。

发明内容

本发明的主要目的是提出一种UI界面的图片加载方法，旨在让用户快速看到整体的UI界面，使系统运行更加流畅。

为实现上述目的，本发明提出的UI界面的图片加载方法，该UI界面的图片加载方法包括以下步骤：

加载UI界面显示所需的所有图片中每张图片的部分内容，所述部分内容包括：图片的部分清晰度、图片的部分分辨率或图片的部分像素；

在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述部分内容。

进一步地，所述加载UI界面显示所需的所有图片中每张图片的部分内容的步骤包括：

加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载。

进一步地，所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载的步骤包括：

加载当前图片的部分内容；

判断加载所述当前图片的部分内容是否达到预设部分内容，所述预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素；

若是，则暂停所述当前图片的部分内容加载，执行切换至下一张图片的部分内容加载；

若否，则继续加载所述当前图片的部分内容。

进一步地，所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片至其对应的预设部分内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载，N≥2；

若有，则继续加载第N张图片至其对应的预设部分内容；

若无，则判定完成所有图片的部分内容加载，执行UI界面显示所有加载图片的部分内容。

进一步地，在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述部分内容的步骤之后，还包括：

加载所述UI界面显示的所述所有图片中每张图片的完整内容，所述完整内容包括：图片的完整清晰度、图片的完整分辨率或图片的完整像素；

在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述完整内容。

进一步地，所述在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述完整内容的步骤之后，还包括：

所述UI界面释放所述所有图片中每张图片加载的部分内容占用的资源。

进一步地，所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤包括：

加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片对应的剩余部分内容至其完整内容。

进一步地，所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载的步骤包括：

加载当前图片的剩余部分内容；

判断加载所述当前图片的剩余部分内容是否达到所述当前图片的完整内容，所述完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素；

若是，则暂停所述当前图片的剩余部分内容加载，执行切换至下一张图片的剩余部分内容加载；

若否，则继续加载所述当前图片的剩余部分内容；

其中，所述部分内容和所述剩余部分内容之和等于所述完整内容。

进一步地，所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片对应的剩余部分内容至其完整内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载，N≥2；

若有，则继续加载第N张图片至完整内容；

若无，则判定完成所有图片的完整内容加载，执行UI界面显示所有加载图片的完整内容。

进一步地，所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤还包括：

判断用户是否切换UI界面，或是否退出UI界面；

若是，则停止所有图片的加载，并释放所有加载图片占用的资源，退出当前的UI界面。

进一步地，所述加载UI界面显示所需的所有图片的部分内容的步骤之前，还包括：

将UI界面显示所需的所有图片转换为渐进式图片，并保存在内存中。

本发明还提出一种图片加载装置，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的UI界面的图片加载程序，所述UI界面的图片加载程序被所述处理器执行时实现如上所述的UI界面的图片加载方法的步骤。

本发明还提出一种存储介质，所述存储介质上存储有UI界面的图片加载程序，所述UI界面的图片加载程序被处理器执行时实现如上所述的UI界面的图片加载方法。

本发明还提出一种智能终端，包括显示屏、存储器、处理器及存储在所述存储器内并由所述处理器上运行的UI界面的图片加载程序，所述UI界面的图片加载程序被所述处理器执行时实现如上所述的UI界面的图片加载方法的步骤。

本发明的技术方案中，UI界面的图片加载方法通过在UI界面加载图片时，分成两步对图片进行加载，先加载UI界面显示所需的所有图片中每张图片的部分内容，在UI界面上显示加载部分内容的所有图片，使用户能够快速看到整体的UI界面，从而使用户在视觉上感觉系统运行更加流畅；根据用户的停留时间，清晰的UI界面随之显示，从而降低了用户等待时长；进一步地，如果用户需要快速切换到其他界面时，也能够确保用户快速看到整体的UI界面。

附图说明

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

图1为本发明的智能终端的结构示意图；

图2为本发明的图片加载装置一实施例的硬件结构示意图；

图3为本发明的UI界面的图片加载方法第一实施例的流程示意图；

图4为本发明的UI界面的图片加载方法第二实施例的流程示意图；

图5为本发明的UI界面的图片加载方法第三实施例的流程示意图；

图6为图3、图4、图5中步骤S10一实施例的流程示意图；

图7为图6中步骤S11一实施例的流程示意图；

图8为图4、图5中步骤S30一实施例的流程示意图；

图9为图8中步骤S31一实施例的流程示意图；

图10为图4、图5中步骤S30另一实施例的流程示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本领域技术人员可以理解的，本发明UI界面的图片加载方法的实施例中实施主体可以是智能终端，例如投影设备、电视机、平板电脑、笔记本电脑、掌上电脑、手机等智能终端，也可以是其他任何可实现本发明UI界面的图片加载方法的装置，本发明UI界面的图片加载方法的实施例中优选智能终端作为实施主体。本发明图片加载装置的实施例中，图片加载装置可以是安装于投影设备、计算机、电视机、平板电脑、手机等智能终端中，也可以独立于上述智能终端，仅与上述智能终端进行通信连接，或者是其他任何适用的安装和使用方式。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的智能终端结构示意图。

本发明实施例智能终端可以是PC，也可以是智能手机、平板电脑、电视机、电子书阅读器、MP3(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)播放器、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面3)播放器、便携计算机等具有显示功能的可移动式智能终端设备。

如图1所示，该智能终端可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

可选地，智能终端还可以包括显示屏、摄像头、RF(Radio Frequency，射频)电路，传感器、音频电路、WiFi模块等等。其中，传感器比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示屏的亮度，接近传感器可在移动智能终端移动到耳边时，关闭显示屏和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别移动智能终端姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；当然，移动智能终端还可配置陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

本领域技术人员可以理解，图1中示出的智能终端结构并不构成对智能终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及UI界面的图片加载程序。

在图1所示的智能终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的UI界面的图片加载程序，并执行以下操作：

加载UI界面显示所需的所有图片中每张图片的部分内容，所述部分内容包括：图片的部分清晰度、图片的部分分辨率或图片的部分像素；

在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述部分内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载UI界面显示所需的所有图片中每张图片的部分内容的步骤包括：

加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载的步骤包括：

加载当前图片的部分内容；

判断加载所述当前图片的部分内容是否达到预设部分内容，所述预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素；

若是，则暂停所述当前图片的部分内容加载，执行切换至下一张图片的部分内容加载；

若否，则继续加载所述当前图片的部分内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片至其对应的预设部分内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载，N≥2；

若有，则继续加载第N张图片至其对应的预设部分内容；

若无，则判定完成所有图片中每张图片的部分内容加载，执行UI界面显示所有加载图片的部分内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述部分内容的步骤之后，还包括：

加载所述UI界面显示的所述所有图片中每张图片的完整内容，所述完整内容包括：图片的完整清晰度、图片的完整分辨率或图片的完整像素；

在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述完整内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述完整内容的步骤之后，还包括：

所述UI界面释放所述所有图片中每张图片加载的部分内容占用的资源。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤包括：

加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片对应的剩余部分内容至其完整内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载的步骤包括：

加载当前图片的剩余部分内容；

判断加载所述当前图片的剩余部分内容是否达到所述当前图片的完整内容，所述完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素；

若是，则暂停所述当前图片的剩余部分内容加载，执行切换至下一张图片的剩余部分内容加载；

若否，则继续加载所述当前图片的剩余部分内容；

其中，所述部分内容和所述剩余部分内容之和等于所述完整内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片对应的剩余部分内容至其完整内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载；

若有，则继续加载第N张图片至完整内容，N≥2；

若无，则判定完成所有图片中每张图片的完整内容加载，执行UI界面显示所有加载图片的完整内容。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤还包括：

判断用户是否切换UI界面，或是否退出UI界面；

若是，则停止所有图片的加载，并释放所有加载图片占用的资源，退出当前的UI界面。

进一步地，处理器1001可以调用存储器1005中存储的UI界面的图片加载程序，还执行以下操作：

所述加载UI界面显示所需的所有图片的部分内容的步骤之前，还包括：

将UI界面显示所需的所有图片转换为渐进式图片，并保存在内存中。

参照图2，本发明还提出一种图片加载装置，该装置包括：存储器10、处理器20及存储在所述存储器10上并可在所述处理器10上运行的UI界面的图片加载程序30，所述UI界面的图片加载程序30被所述处理器20执行时实现如上所述的UI界面的图片加载方法的步骤。

本实施例中，该图片加载装置还包括加载单元和显示单元，处理器20接收区域控制信号和时间控制信号，区域控制信号用于确定目标区域的大小和位置，时间控制信号用于确定静止显示的部分显示多长时间可以开始进行对应的处理；处理器20还可以接收加载单元加载的UI界面显示所需的所有图片数据，并可以控制显示单元显示UI界面等处理操作。加载单元对UI界面显示所需的所有图片的部分内容进行加载，并加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片，并将加载的所有图片的数据传送至处理器20；显示单元用于接收处理器20的指令，进行显示UI界面处理。该图片加载装置可以装配于智能终端内，也可以独立使用，仅与智能终端进行通信连接，或者是其他任何适用的安装和使用方式也可以。

参照图3，本发明进一步提供一种UI界面的图片加载方法，在一实施例中，该方法包括以下步骤：

步骤S10：加载UI界面显示所需的所有图片中每张图片的部分内容，所述部分内容包括：图片的部分清晰度、图片的部分分辨率或图片的部分像素；

步骤S20：在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述部分内容。

本实施例中，该UI界面的图片加载方法用于具有显示屏的智能终端，该智能终端的显示屏优选为有源矩阵有机发光二极管(Active-matrix organic light emittingdiode，AMOLED)，该智能终端可以是手机、电视机、平板电脑及台式计算机等，本申请中的智能终端均包括用于显示UI界面的显示屏。

在显示屏显示UI界面时，先加载UI界面显示所需的所有图片中每张图片的部分内容，每张图片的部分内容可以是图片的部分清晰度、图片的部分分辨率或图片的部分像素等。可以理解的，图片的部分清晰度小于图片的完整清晰度或最高清晰度，图片的部分分辨率小于图片的完整分辨率或最高分辨率，图片的部分像素小于图片的完整像素或最高像素。采用先加载UI界面显示所需的所有图片中每张图片的部分内容的方式，并在UI界面上显示加载部分内容的所有图片，不仅大大缩短了图片的加载时长，同时减少了加载后图片占用内存资源，从而提高了图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅。

在本实施例中，UI界面显示所需的所有图片可以是一张图片，也可以是多张图片。当UI界面显示所需的所有图片为一张时，先加载UI界面显示所需的该图片的部分内容，在该图片的部分内容加载完成时，显示UI界面，此时显示的UI界面仅包括加载的该图片的部分内容；当UI界面显示所需的所有图片为多张时，先加载UI界面显示所需的多张图片中每张图片的部分内容，在多张图片中每张图片的部分内容加载完成时，显示UI界面，此时显示的UI界面包括加载的多张图片中每张图片的部分内容。

当UI界面显示所需的图片有多张时，加载多张图片中每张图片的部分内容时，通过加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片。也即，先加载首张图片的部分内容，首张图片的部分内容加载至其对应的预设部分内容时，暂停该图片的加载；切换至加载下一张图片的部分内容，该图片的部分内容加载至其对应的预设部分内容时，暂停该图片的加载；继续切换至加载下一张图片的部分内容。如此循环，直至UI界面显示所需的多张图片中每张图片的部分内容都加载完成时，执行步骤S20，即显示UI界面，此时显示的UI界面包括加载的多张图片对应的预设部分内容。如此，有利于缩短图片的加载时长和减少图片加载后占用内存的资源，提高图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅。

当UI界面显示所需的图片有多张时，加载多张图片中每张图片的部分内容时，还可通过同时加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，也即直至UI界面显示所需的多张图片中每张图片的部分内容都加载完成时，执行步骤S20，即显示UI界面，此时显示的UI界面包括加载的多张图片对应的预设部分内容。

可以理解的，预设部分内容可以是预设的图片部分清晰度、预设的图片部分分辨率或预设的图片部分像素等，本实施例不限于此。预设的图片部分清晰度小于图片的完整清晰度或最高清晰度，预设的图片部分分辨率小于图片的完整分辨率或最高分辨率，预设的图片部分像素小于图片的完整像素或最高像素，使得加载后的图片占用内存的资源较少，有利于提高图片的加载速度。本实施例中，所述预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素。加载图片的预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素，相比于加载完整的图片而言，大大缩短了图片的加载时长和减少图片加载后占用内存的资源，从而提高了图片的加载速度和UI界面的显示速度。在显示UI界面时，用户够快速看到整体的UI界面，同时系统运行更加流畅。

在本实施例中，多张图片中每张图片的预设部分内容可以是相同的，也可以是不相同或不完全相同。作为本实施例的优选实施方案，预设部分内容可以是预设的图片部分清晰度，优选的，预设的图片部分清晰度为15％、20％、30％、40％、50％、60％、70％图片清晰度，如此有利于缩短图片的加载时长和减少图片加载后占用内存的资源，提高图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅。

进一步地，参照图6，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S10，加载UI界面显示所需的所有图片中每张图片的部分内容，也即通过加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

步骤S11：加载第一张图片至其对应的预设部分内容时，暂停所述第一张图片的加载；

步骤S12：判断是否有第N张图片进行加载，N≥2；

若有，则执行步骤S13，步骤S13：继续加载第N张图片至其对应的预设部分内容；

若无，则执行步骤S14，步骤S14：判定完成所有图片的部分内容加载，同时执行步骤20：UI界面显示所有加载图片的部分内容。

在本实施例中，UI界面显示所需的图片有N张，N≥2。当UI界面显示所需的图片有2张时，步骤S10的具体为加载第1张图片至其对应的预设部分内容时，暂停所述第1张图片的加载；判断是否有第2张图片进行加载；若有，继续加载第2张图片至其对应的预设部分内容，直至加载第2张图片至其对应的预设部分内容时，暂停所述第2张图片的加载；并判断是否有下一张图片进行加载，也即循环执行步骤S11和S12，直至判断没有下一张图片进行加载时，则判定完成所有图片的部分内容加载，执行步骤S20，以当前加载的2张图片的预设部分内容显示UI界面。当然，在其他实施例中，UI界面显示所需的图片数量可以是3张或更多张，在此不做限定，3张或更多张图片的加载方式如上所述，在此不再赘述。

可以理解的，加载的UI界面显示所需的所有图片中每张图片的预设部分内容可以是相同的，例如预设部分内容均为20％的图片清晰度，如此，加载每一张图片的预设部分内容至20％的图片清晰度时，暂停加载该图片的加载，当所有图片的预设部分内容全部加载至20％的图片清晰度时，完成加载，此时，UI界面显示所有图片中每张图片为20％的图片清晰度。当然，在其他实施例中，加载的UI界面显示所需的所有图片中每张图片的预设部分内容可以是不相同的，例如加载的UI界面显示所需的图片为3张时，第1张图片预设部分内容均为20％的图片清晰度，第2张图片预设部分内容均为30％的图片清晰度，第3张图片预设部分内容均为40％的图片清晰度。如此，加载第1张图片的预设部分内容至20％的图片清晰度时，暂停第1张图片的加载，继续加载第2张图片，加载第2张图片的的预设部分内容至30％的图片清晰度时，暂停第2张图片的加载，继续加载第3张图片，加载第3张图片的的预设部分内容至40％的图片清晰度时，完成加载，此时，UI界面显示3张图片分别为20％清晰度的图片(即第1张图片)、30％清晰度的图片(即第2张图片)和40％清晰度的图片(即第3张图片)。当然，在其他实施例中，加载的UI界面显示所需的所有图片的预设部分内容可以是不完全相同的，例如加载的UI界面显示所需的图片为3张时，第1张图片预设部分内容均为20％的图片清晰度，第2张图片预设部分内容均为20％的图片清晰度，第3张图片预设部分内容均为30％的图片清晰度等，其加载方式如上所述，在此不再赘述。如此不仅缩短了图片的加载时长，且减少了图片加载后占用内存的资源，从而提高图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅。

进一步地，参照图7，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S11，所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载的步骤包括：

步骤S111：加载当前图片的部分内容；

步骤S112：判断加载所述当前图片的部分内容是否达到预设部分内容，所述预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素；

若是，则执行步骤S113，步骤S113：暂停所述当前图片的部分内容加载，执行步骤S12，切换至下一张图片的部分内容加载；

若否，则执行步骤S111，继续加载所述当前图片的部分内容。

在本实施例中，预先设定图片的部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素等，本实施例不限于此。加载图片的上述预设部分内容相比于加载完整的图片而言，大大缩短了图片的加载时长和减少图片加载后占用内存的资源，从而提高了图片的加载速度和UI界面的显示速度。在显示UI界面时，用户够快速看到整体的UI界面，同时系统运行更加流畅。

优选的，预设部分内容为15％～70％的图片清晰度。例如，预先设定一个固定的图片加载清晰度值，当图片加载的清晰度达到设置值时，暂停图片的加载；如果还没有达到设置值，则继续加载图片，直至图片加载到设置值时暂停。具体地，本实施例中，预先设定图片的预设部分内容为20％的图片清晰度，加载当前图片的部分内容，判断加载所述当前图片的部分内容是否达到预设部分内容(即是否达到20％的图片清晰度)；若是，暂停所述当前图片的部分内容加载，切换至下一张图片的部分内容加载；若否，继续加载所述当前图片的部分内容，直至判断加载所述当前图片的部分内容达到预设部分内容时，暂停所述当前图片的部分内容加载。如此，确保UI界面显示所需的所有图片全部加载完成的同时，每张图片都能加载至预设部分内容，从而保证用户能够快速看到整体的UI界面，使系统运行更加流畅。

进一步地，参阅图4，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S20，在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述部分内容的步骤之后，还包括：

步骤S30：加载所述UI界面显示的所述所有图片中每张图片的完整内容，所述完整内容包括：图片的完整清晰度、图片的完整分辨率或图片的完整像素；

步骤S40：在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述完整内容。

在本实施例中，当前UI界面显示加载的所有图片中每张图片的部分内容时，继续加载UI界面显示的所有图片中每张图片的完整内容，每张图片的完整内容可以是图片的完整清晰度、图片的完整分辨率或图片的完整像素等，本实施例不限于此。直到当前UI界面显示的所有图片中每张图片的完整内容加载完成时，再次显示最终的UI界面，此时，最终的UI界面包括加载的所有图片中每张图片的完整内容。本发明通过将UI界面显示的所有图片分两步进行加载，先加载UI界面显示所需的所有图片中每张图片的部分内容，并在UI界面上显示加载部分内容的所有图片，不仅大大缩短了图片的加载时长，同时减少了加载后图片占用内存资源，从而提高了图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅；进一步加载UI界面显示所需的所有图片的完整内容，可在确保系统运行更加流畅的情况下，使用户能够清晰地看到整体的UI界面。

具体地，当前UI界面显示加载部分内容的图片数量可以是一张图片，也可以是多张图片。当前UI界面显示加载部分内容的图片数量为一张时，继续加载该UI界面显示的图片的完整内容，在该图片的完整内容加载完成时，再次显示最终的UI界面，此时，最终的UI界面包括加载的该图片的完整内容。当前UI界面显示加载部分内容的图片数量为多张时，继续加载该UI界面显示的多种图片中每张图片的完整内容，在多张图片中每张图片的完整内容加载完成时，再次显示最终的UI界面，此时，最终的UI界面包括加载的多张图片中每张图片的完整内容。

当前UI界面显示加载部分内容的图片数量为多张时，继续加载多张图片中每张图片的完整内容时，通过继续加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片。也即，继续加载首张图片对应的剩余部分内容，首张图片对应的剩余部分内容加载至首张图片的完整内容时，暂停该图片的加载；切换至加载下一张图片对应的剩余部分内容，该图片对应的剩余部分内容加载至该图片的完整内容时，暂停该图片的加载；继续切换至加载下一张图片对应的剩余部分内容至其完整内容。如此循环，直至当前UI界面显示加载部分内容的多张图片中每张图片的完整内容都加载完成时，执行步骤S40，即再次显示最终的UI界面，此时，最终的UI界面包括加载的多张图片中每张图片的完整内容。如此，不仅大大缩短了图片的加载时长，同时减少了加载后图片占用内存资源，从而提高了图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅；进一步加载UI界面显示所需的所有图片的完整内容，可在确保系统运行更加流畅的情况下，使用户能够清晰地看到整体的UI界面。

当前UI界面显示加载部分内容的图片数量为多张时，继续加载多张图片中每张图片的完整内容时，还可通过继续同时加载每一张图片对应的剩余部分内容至其完整内容，直至当前UI界面显示加载部分内容的多张图片中每张图片的完整内容都加载完成时，执行步骤S40，即再次显示最终的UI界面，此时，最终的UI界面包括加载的多张图片中每张图片的完整内容。

可以理解的，完整内容可以是图片完整清晰度、图片完整分辨率或图片完整像素等，本实施例不限于此。在本实施例中，完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素，如此有利于用户能够清晰地看到整体的UI界面。

进一步地，参照图8，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S30，加载所述UI界面显示的所述所有图片中每张图片的完整内容，也即通过加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

步骤S31：加载第一张图片对应的剩余部分内容至其完整内容时，暂停所述第一张图片的加载；

步骤S32：判断是否有第N张图片进行加载，N≥2；

若有，则执行步骤S33，步骤S33：继续加载第N张图片至完整内容；

若无，则执行步骤S34，步骤S34：判定完成所有图片中每张图片的完整内容加载，同时执行步骤40：执行UI界面显示所有加载图片的完整内容。

在本实施例中，当前UI界面显示加载部分内容的图片数量为N张，N≥2。当前UI界面显示加载预设部分内容的图片有2张时，步骤S30的具体为继续加载第1张图片对应的剩余部分内容至其完整内容时，暂停所述第1张图片的加载；判断是否有第2张图片进行加载；若有，继续加载第2张图片对应的剩余部分内容至完整内容，直至加载第2张图片对应的剩余部分内容至完整内容时，暂停所述第2张图片的加载；并判断是否有下一张图片进行加载，也即循环执行步骤S31和S32，直至判断没有下一张图片进行加载时，则判定完成所有图片中每张图片的完整内容加载，执行步骤S40，即再次显示最终的UI界面，此时，最终的UI界面包括加载的2张图片的完整内容。当然，在其他实施例中，当前UI界面显示加载预设部分内容的图片数量可以是3张或更多张，在此不做限定，3张或更多张图片对应的剩余部分内容至其完整内容的加载方式如上所述，在此不再赘述。

可以理解的，每一张图片的预设部分内容与其对应的剩余部分内容之和等于该图片的完整内容。例如，图片的预设部分内容为20％的图片清晰度时，图片的剩余部分内容为80％的图片清晰度，则图片的完整内容为100％的图片清晰度。当然，在加载的UI界面显示所需的所有图片中每张图片的预设部分内容相同的情况下，所有图片中每张图片的剩余部分内容也是相同的；在加载的UI界面显示所需的所有图片中每张图片的预设部分内容完全不相同的情况下，所有图片中每张图片的剩余部分内容也是完全不相同的；在加载的UI界面显示所需的所有图片中每张图片的预设部分内容是不完全相同的情况下，所有图片中每张图片的剩余部分内容也是不完全相同的。

进一步地，参照图9，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S31，所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载的步骤包括：

步骤S311：加载当前图片的剩余部分内容；

步骤S312：判断加载所述当前图片的剩余部分内容是否达到所述当前图片的完整内容，所述完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素；

若是，则执行步骤S313，步骤S313：暂停所述当前图片的剩余部分内容加载，执行步骤S32，切换至下一张图片的剩余部分内容加载；

若否，则执行步骤S311，继续加载所述当前图片的剩余部分内容；

其中，所述部分内容和所述剩余部分内容之和等于所述完整内容。

在本实施例中，所述完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素等，本实施例不限于此。加载图片的剩余部分内容至上述完整内容，可在提高图片的加载速度和UI界面的显示速度，使用户能够快速看到整体的UI界面，系统运行更加流畅的情况下，进一步使用户能够清晰地看到整体的UI界面。

优选的，完整内容为100％的图片清晰度。例如，当加载当前图片对应的剩余清晰度达到当前图片的完整清晰度时，暂停当前图片的加载；如果没有达到当前图片的完整清晰度，则继续加载当前图片对应的剩余清晰度，直至当前图片加载到完整清晰度时暂停。具体地，本实施例中，当前UI界面显示的所有图片为20％的图片清晰度，执行步骤S30，加载当前UI界面显示的所有图片的剩余清晰度达到当前图片的完整清晰度，也即所有图片达到100％的图片清晰度时，执行步骤S40。

具体地，加载当前UI界面显示的所有图片中每一张图片对应的剩余部分内容，通过判断加载所述当前图片的剩余部分内容是否达到所述当前图片的完整内容，若是暂停所述当前图片对应的剩余部分内容加载，执行步骤S32，切换至下一张图片的剩余部分内容加载；若否，则继续加载所述当前图片对应的剩余部分内容，直至判断加载所述当前图片的剩余部分内容达到所述当前图片的完整内容时，暂停所述当前图片完整内容的加载，此时执行步骤S40。如此，确保当前UI界面显示加载部分内容的所有图片全部加载完成的同时，每张图片都能加载至完整内容，从而在确保系统运行更加流畅的情况下，使用户能够清晰地看到整体的UI界面。

进一步地，参阅图5，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S40，在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述完整内容的步骤之后，还包括：

步骤S50：所述UI界面释放所述所有图片中每张图片加载的部分内容占用的资源。

在本实施例中，为了提高UI界面的运行速度，提高用户体验，在显示最终的UI界面时，系统释放之前UI界面显示的所有图片中每张图片加载的部分内容占用的资源。如此，本发明提出的UI界面的图片加载方法所需要的内存资源不用增多。在相同内存资源的条件下，本发明中UI界面的运行速度更快，系统运行也更加流畅，同时可使得用户更快速的看到完整的UI界面。

进一步地，参阅图10，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S30，加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤还包括：

步骤S35：判断用户是否切换UI界面，或是否退出UI界面；

若是，则执行步骤S36，步骤S36：停止所有图片的加载，并释放所有加载图片占用的资源，退出当前的UI界面。

在本实施例中，继续加载当前UI界面显示的多张图片对应的剩余部分内容的过程，同时执行步骤S35，判断用户是否切换UI界面，或是否退出UI界面，若是，则停止当前UI界面显示的多张图片对应的剩余部分内容的加载，并释放所有加载图片占用的资源，退出当前的UI界面；若否，继续执行步骤S31至步骤S34。如此，用户可实现快速切换UI界面，同时在快速切换到其他UI界面时，也能快速看到完整的UI界面，使用户在视觉上感到系统运行非常快速，且更加流畅，提升用户体验。

进一步地，参阅图5，基于上述实施例中UI界面的图片加载方法，在一实施例中，步骤S10，所述加载UI界面显示所需的所有图片中每张图片的部分内容的步骤之前，还包括：

步骤S01：将UI界面显示所需的所有图片转换为渐进式图片，并保存在内存中。

可以理解的，渐进式图片为图片的一种存储格式，其显示方式为图片从模糊到逐步清晰的方式。在本实施例中，先将UI界面显示所需的所有图片转换为渐进式图片，并保存在内存中。具体地，渐进式图片为渐进式的JPEG格式，后续需要转换的图片也通过执行步骤S01进行存储。将图片转换为渐进式图片的方法可参考现有技术，但在图片转换为渐进式图片的过程中，渐进式图片包括上述步骤中图片的预设部分内容和完整内容。

此外，本发明实施例还提出一种存储介质，该存储介质上存储有UI界面的图片加载程序，所述UI界面的图片加载程序被处理器执行时实现如上所述的UI界面的图片加载方法。

其中，UI界面的图片加载程序被执行时所实现的方法可参照本发明UI界面的图片加载方法的各个实施例，此处不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。

Claims (10)

1.一种UI界面的图片加载方法，其特征在于，该UI界面的图片加载方法包括以下步骤：

加载UI界面显示所需的所有图片中每张图片的部分内容，所述部分内容包括：图片的部分清晰度、图片的部分分辨率或图片的部分像素；

在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述部分内容。

2.如权利要求1所述的UI界面的图片加载方法，其特征在于，所述加载UI界面显示所需的所有图片中每张图片的部分内容的步骤包括：

加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载；

所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载的步骤包括：

加载当前图片的部分内容；

判断加载所述当前图片的部分内容是否达到预设部分内容，所述预设部分内容为15％～70％的图片清晰度、15％～70％的图片分辨率或15％～70％的图片像素；

若是，则暂停所述当前图片的部分内容加载，执行切换至下一张图片的部分内容加载；

若否，则继续加载所述当前图片的部分内容。

3.如权利要求2所述的UI界面的图片加载方法，其特征在于，所述加载每一张图片至其对应的预设部分内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片至其对应的预设部分内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载，N≥2；

若有，则继续加载第N张图片至其对应的预设部分内容；

若无，则判定完成所有图片中每张图片的部分内容加载，执行UI界面显示所有加载图片的部分内容。

4.如权利要求1至3中任一项所述的UI界面的图片加载方法，其特征在于，在所述所有图片中每张图片的部分内容加载完成时，显示UI界面；其中，显示的UI界面包括加载的所述部分内容的步骤之后，还包括：

加载所述UI界面显示的所述所有图片中每张图片的完整内容，所述完整内容包括：图片的完整清晰度、图片的完整分辨率或图片的完整像素；

在所述所有图片中每张图片的完整内容加载完成时，显示UI界面；

其中，显示的UI界面包括加载的所述完整内容；

所述UI界面释放所述所有图片中每张图片加载的部分内容占用的资源。

5.如权利要求4所述的UI界面的图片加载方法，其特征在于，所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤包括：

加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片；或，同时加载每一张图片对应的剩余部分内容至其完整内容；

所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载的步骤包括：

加载当前图片的剩余部分内容；

判断加载所述当前图片的剩余部分内容是否达到所述当前图片的完整内容，所述完整内容为100％的图片清晰度、100％的图片分辨率或100％的图片像素；

若是，则暂停所述当前图片的剩余部分内容加载，执行切换至下一张图片的剩余部分内容加载；

若否，则继续加载所述当前图片的剩余部分内容；

其中，所述部分内容和所述剩余部分内容之和等于所述完整内容。

6.如权利要求5所述的UI界面的图片加载方法，其特征在于，所述加载每一张图片对应的剩余部分内容至其完整内容时，暂停当前图片的加载，切换至加载下一张图片的步骤包括：

加载第一张图片对应的剩余部分内容至其完整内容时，暂停所述第一张图片的加载；

判断是否有第N张图片进行加载，N≥2；

若有，则继续加载第N张图片至完整内容；

若无，则判定完成所有图片中每张图片的完整内容加载，执行UI界面显示所有加载图片的完整内容。

7.如权利要求5所述的UI界面的图片加载方法，其特征在于，所述加载所述UI界面显示的所述所有图片中每张图片的完整内容的步骤还包括：

判断用户是否切换UI界面，或是否退出UI界面；

若是，则停止所有图片的加载，并释放所有加载图片占用的资源，退出当前的UI界面。

8.一种图片加载装置，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的UI界面的图片加载程序，所述UI界面的图片加载程序被所述处理器执行时实现如权利要求1至7中任一项所述的UI界面的图片加载方法的步骤。

9.一种存储介质，其特征在于，所述存储介质上存储有UI界面的图片加载程序，所述UI界面的图片加载程序被处理器执行时实现如权利要求1至7中任一项所述的UI界面的图片加载方法。

10.一种智能终端，其特征在于，包括显示屏、存储器、处理器及存储在所述存储器内并由所述处理器上运行的UI界面的图片加载程序，所述UI界面的图片加载程序被所述处理器执行时实现如权利要求1至7中任一项所述的UI界面的图片加载方法的步骤。