CN111475748B - 图片的展示方法及装置 - Google Patents

Abstract

本发明公开一种图片的展示方法及装置，涉及计算机技术领域，能够解决现有技术中图片展示效率低的问题。本发明的方法主要包括：解析引擎解析页面代码，当解析到图片预加载代码时，所述图片预加载代码调用客户端缓存待展示的图片，所述解析引擎继续解析未解析的页面代码；当所述解析引擎解析到调用展示图片代码时，所述解析引擎通知所述客户端，以使所述客户端从缓存中获取待展示的图片进行展示。本发明主要适用于对APP页面图片进行展示的场景中。

Description

图片的展示方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种图片的展示方法及装置。

背景技术

随着计算机技术以及互联网技术的发展，用户可以非常便捷地使用具有图片展示功能的应用程序浏览各种图片。例如，可以使用图库软件浏览图片，也可以使用具有图片展示功能的浏览器、购物软件、阅读软件等浏览图片。

目前这些应用程序展示图片的过程是：解析引擎对页面代码进行解析，解析出image标签(即<img>)中定义的图片属性和样式(如图片的宽高、图片的路径等)以及其他标签的相关信息；当需要调用展示图片时，会将解析出的属性和样式透传给客户端，客户端根据属性中的本地存储路径从包含有大量数据的本地预设存储空间中查找对应图片进行展示，或者根据属性中的网址从网络侧下载图片进行展示。由此可知，当解析引擎需要解析的属性、样式等信息较多时，客户端就需要先消耗大量时间等待解析引擎的解析结果，然后根据解析结果再消耗大量时间从本地预设存储空间中或者网络侧下载获取图片进行展示，整个过程需要消耗的时间较长，存在图片展示效率低的问题。

发明内容

有鉴于此，本发明提供的图片的展示方法及装置，其目的在于现有图片展示效率低的问题。

第一方面，本发明提供了一种图片的展示方法，所述方法包括：

解析引擎解析页面代码，当解析到图片预加载代码时，所述图片预加载代码调用客户端缓存待展示的图片，所述解析引擎继续解析未解析的页面代码；

当所述解析引擎解析到调用展示图片代码时，所述解析引擎通知所述客户端，以使所述客户端从缓存中获取待展示的图片进行展示。

可选的，所述图片预加载代码调用客户端缓存待展示的图片包括：

所述图片预加载代码将自身携带的图片地址传送给所述客户端，调用所述客户端根据所述图片地址缓存待展示的图片。

可选的，所述客户端根据所述图片地址缓存待展示的图片包括：

所述客户端根据所述图片地址获取图片内容；

所述客户端将获取到的图片内容和所述图片地址进行关联缓存；

所述客户端从缓存中获取待展示的图片进行展示包括：

所述客户端从所述缓存中获取所述图片地址所对应的图片内容进行展示。

可选的，所述客户端根据所述图片地址缓存待展示的图片包括：

当所述图片地址是本地存储路径时，所述客户端将所述本地存储路径下的图片内容缓存至内存中；

当所述图片地址是网址时，所述客户端根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。

可选的，解析引擎解析页面代码包括：

所述解析引擎至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码。

第二方面，本发明提供了一种图片的展示装置，所述装置包括：解析引擎，客户端；

所述解析引擎，用于解析页面代码，当解析到图片预加载代码时，所述图片预加载代码调用客户端，所述解析引擎继续解析未解析的页面代码，当解析到调用展示图片代码时，所述解析引擎通知所述客户端；

所述客户端，用于基于所述图片预加载代码的调用，缓存待展示的图片，以及，基于所述解析引擎的通知，从缓存中获取待展示的图片进行展示。

可选的，所述解析引擎，用于当解析到图片预加载代码时，所述图片预加载代码将自身携带的图片地址传送给所述客户端，调用所述客户端根据所述图片地址缓存待展示的图片；

所述客户端，用于根据所述图片地址缓存待展示的图片。

可选的，所述客户端，用于根据所述图片地址获取图片内容，将获取到的图片内容和所述图片地址进行关联缓存；以及，从所述缓存中获取所述图片地址所对应的图片内容进行展示。

可选的，所述客户端，用于当所述图片地址是本地存储路径时，将所述本地存储路径下的图片内容缓存至内存中；当所述图片地址是网址时，根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。

可选的，所述解析引擎，用于至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码。

第三方面，本发明提供了一种存储介质，所述存储介质存储有多条指令，所述指令适用于由处理器加载并执行如第一方面所述的图片的展示方法。

第四方面，本发明提供了一种图片的展示装置，所述装置包括存储介质和处理器；

所述处理器，适于实现各指令；

所述存储介质，适于存储多条指令；

所述指令适于由所述处理器加载并执行如第一方面所述的图片的展示方法。

借由上述技术方案，本发明提供的图片的展示方法及装置，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会调用客户端缓存图片，同时解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的一种图片的展示方法的流程图；

图2示出了本发明实施例提供的另一种图片的展示方法的流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为了提高图片展示的效率，本发明实施例提供了一种图片的展示方法，所述方法可以利用解析引擎解析页面代码期间，客户端将图片缓存，待需要调用展示图片时，客户端可直接从缓存中快速获取图片进行展示。其具体实现过程如图1所示：

101、解析引擎解析页面代码，当解析到图片预加载代码时，所述图片预加载代码调用客户端缓存待展示的图片，所述解析引擎继续解析未解析的页面代码。

解析引擎是能够读懂代码，并准确地给出代码运行结果的一段程序。电子设备获得页面代码后，先由解析引擎对页面代码进行解析，然后将解析结果透传给客户端，客户端再将解析结果应用到客户端原生控件(如android控件或者ios控件)上。本发明所称客户端亦可被称为前端，客户端一般位于解析引擎之上。

为了使得客户端能够充分利用解析引擎解析页面代码的这段时间，页面开发人员可以在页面代码靠前的部分加入一段图片预加载代码，从而当解析引擎解析到图片预加载代码时，可以由图片预加载代码调用客户端执行图片预加载功能，即可以调用客户端缓存页面代码中提及的图片，并且在客户端缓存图片的同时，解析引擎继续解析未解析的页面代码，进而实现客户端缓存图片与解析引擎解析页面代码的并行处理。例如，页面代码是js代码时，解析引擎的解析操作是在js线程进行的操作，图片缓存是客户端的子线程进行的操作，两个操作不在一个线程里，所以可以实现并行处理。

102、当所述解析引擎解析到调用展示图片代码时，所述解析引擎通知所述客户端，以使所述客户端从缓存中获取待展示的图片进行展示。

调用展示图片代码往往会编写在页面代码的尾部，在解析引擎解析到调用展示图片代码之前，客户端已缓存图片，因此当解析引擎解析到调用展示图片代码时，解析引擎可以通知客户端从缓存中获取待展示的图片在页面展示。

本发明实施例提供的图片的展示方法，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会调用客户端缓存图片，同时解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

进一步的，依据图1所示的方法，本发明的另一个实施例还提供了一种图片的展示方法，如图2所示，所述方法主要包括：

201、解析引擎解析页面代码，当解析到图片预加载代码时，所述图片预加载代码将自身携带的图片地址传送给客户端，调用所述客户端根据所述图片地址缓存待展示的图片，所述解析引擎继续解析未解析的页面代码。

其中，图片预加载代码将自身携带的图片地址传送给客户端，调用所述客户端根据所述图片地址缓存待展示的图片，可以理解为，图片预加载代码将自身携带的图片地址传送给客户端，由所述客户端根据所述图片地址缓存待展示的图片，即，本发明所称调用并不意味着由图片预加载代码启动客户端，而是客户端收到图片预加载代码中的图片地址，则会执行缓存图片的技术特征。

前端工程师在编写页面代码时，会将图片地址赋值给image标签中的一个变量，并在图片预加载代码中输入该变量；后续解析引擎解析图片预加载代码时，图片预加载代码可以将自身携带的图片地址传输给客户端，调用客户端根据图片地址缓存图片。在实际应用中，所述图片预加载代码可以是用preload方法编写的代码。

为了保证页面代码能够顺利执行，需要解析引擎在解析页面代码时，至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码。为了尽量多地利用解析引擎解析页面代码的时间，让客户端尽量多地缓存图片，可以在保证页面代码能够顺利执行的基础上，将图片预加载代码编写在页面代码最靠前的位置，即所述图片预加载代码可以位于import所需组件的代码之后且与所述import所需组件的代码相邻。也就是说，解析引擎解析页面代码的过程中，当解析完import所需组件的代码之后，紧接着就解析所述图片预加载代码，触发所述图片预加载代码调用所述客户端缓存图片，使得客户端充分利用解析引擎解析代码的时间缓存图片。

另外，客户端根据所述图片地址缓存待展示的图片的具体实现方式可以为：所述客户端根据所述图片地址获取图片内容；所述客户端将获取到的图片内容和所述图片地址进行关联缓存。

具体的，可以采用键值对的方法进行缓存，其中，key代表图片地址，value代表图片内容。例如，在android系统里，value可以代表bitmap对象；bitmap对象是android里的图像java对象，是将文件二进制流转换之后得到的。

需要补充的是，图片地址可能是本地存储路径(如在包含有大量数据的本地预设存储空间)，也可能是网址。当所述图片地址是本地存储路径时，所述客户端可以将所述本地存储路径下的图片内容缓存至内存中；当所述图片地址是网址时，所述客户端可以根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。也就是说，当图片地址是网址时，可以将图片内容下载在永久性存储空间中，待后续还需要加载展示该图片时，可以直接从永久性存储空间缓存到内存，而不用再次从网络侧下载，从而节省了用户流量。其中，当电子设备是移动终端(例如手机)时，永久性存储空间可以是机身存储空间；当电子设备是计算机(例如笔记本)时，永久性存储空间可以是硬盘。

另外，当内存占用量达到一定阈值后，为了不影响电子设备运行速度，需要将缓存的图片全部删除，或者部分删除。例如部分删除时，可以将本次不需要的图片删除，或者将近期不需要的图片删除。

202、当所述解析引擎解析到调用展示图片代码时，所述解析引擎通知所述客户端，以使所述客户端从缓存中获取待展示的图片进行展示。

所述客户端从所述缓存中获取图片地址所对应的图片内容进行展示。

示例性的，假设有个APP页面需要展示一张图片，该图片的路径为“hello/world.png”，则前端工程师在开发该APP页面时，会将图片地址赋值给image标签的一个变量，例如将该图片地址赋值为helloWorldImg变量，即var helloWorldImg＝require.toUrl('hello/world.png')；在APP页面的前端部分加入preload代码，即natives.img.preload([helloWorldImg],function(imgurl,status){})，后续解析引擎解析到preload代码时，preload代码会调用客户端将'hello/world.png'缓存至内存；当解析到调用展示该图片的代码(如

<div>

<img src＝{helloWorldImg}/>

</div>

)时，解析引擎调用客户端从缓存中获取该图片展示至APP页面。

本发明实施例提供的图片的展示方法，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会将自身携带的图片地址传送给客户端，调用客户端缓存图片，通过解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

进一步的，依据上述方法实施例，本发明的另一个实施例还提供了一种图片的展示装置，所述装置包括：解析引擎，客户端；

所述解析引擎，用于解析页面代码，当解析到图片预加载代码时，所述图片预加载代码调用客户端，所述解析引擎继续解析未解析的页面代码，当解析到调用展示图片代码时，所述解析引擎通知所述客户端；

所述客户端，用于基于所述图片预加载代码的调用，缓存待展示的图片，以及，基于所述解析引擎的通知，从缓存中获取待展示的图片进行展示。

可选的，所述解析引擎，用于当解析到图片预加载代码时，所述图片预加载代码将自身携带的图片地址传送给所述客户端，调用所述客户端根据所述图片地址缓存待展示的图片；

所述客户端，用于根据所述图片地址缓存待展示的图片。

可选的，所述客户端，用于根据所述图片地址获取图片内容，将获取到的图片内容和所述图片地址进行关联缓存；以及，从所述缓存中获取所述图片地址所对应的图片内容进行展示。

可选的，所述客户端，用于当所述图片地址是本地存储路径时，将所述本地存储路径下的图片内容缓存至内存中；当所述图片地址是网址时，根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。

可选的，所述解析引擎，用于至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码。

本发明实施例提供的图片的展示装置，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会调用客户端缓存图片，同时解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

所述装置包括处理器和存储介质，上述解析引擎和客户端等均作为程序单元存储在存储介质中，由处理器执行存储在存储介质中的上述程序单元来实现相应的功能。

上述处理器中包含内核，由内核去存储介质中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高图片展示的效率。

进一步的，依据上述实施例，本发明的另一个实施例还提供了一种存储介质，所述存储介质存储有多条指令，所述指令适用于由处理器加载并执行如上所述的图片的展示方法。

存储介质可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本发明实施例提供的存储介质中存储的指令，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会调用客户端缓存图片，同时解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

进一步的，依据上述实施例，本发明的另一个实施例还提供了一种图片的展示装置，所述装置包括存储介质和处理器；

所述处理器，适于实现各指令；

所述存储介质，适于存储多条指令；

所述指令适于由所述处理器加载并执行如上所述的图片的展示方法。

本发明实施例提供的图片的展示装置，能够在页面代码中加入图片预加载代码，在解析引擎解析页面代码的过程中，当解析到图片预加载代码时，图片预加载代码就会调用客户端缓存图片，同时解析引擎继续解析未解析的页面代码，实现代码解析和图片缓存的并行处理；待需要客户端调用展示图片时，就可以直接从缓存中快速获取相应图片进行展示，而无需再消耗大量时间从数据量很大的本地预设存储空间中查找图片，也无需再消耗大量时间从网络侧下载图片，从而提高了图片展示的效率。

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

可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。

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

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的图片的展示方法及装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (5)

1.一种图片的展示方法，其特征在于，所述方法包括：

解析引擎至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码，当解析到所述图片预加载代码时，所述图片预加载代码将自身携带的图片地址传送给客户端，调用所述客户端根据所述图片地址获取图片内容，将获取到的图片内容和所述图片地址进行关联缓存，所述解析引擎继续解析未解析的页面代码，所述图片预加载代码与所述import所需组件的代码相邻；

当所述解析引擎解析到调用展示图片代码时，所述解析引擎通知所述客户端，以使所述客户端从所述缓存中获取所述图片地址所对应的图片内容进行展示。

2.根据权利要求1所述的方法，其特征在于，所述客户端根据所述图片地址缓存待展示的图片包括：

当所述图片地址是本地存储路径时，所述客户端将所述本地存储路径下的图片内容缓存至内存中；

当所述图片地址是网址时，所述客户端根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。

3.一种图片的展示装置，其特征在于，所述装置包括：解析引擎，客户端；

所述解析引擎，用于解析引擎至少先解析到页面代码中的import所需组件的代码，再解析到页面代码中包括的图片预加载代码，当解析到所述图片预加载代码时，所述图片预加载代码调用客户端，所述解析引擎继续解析未解析的页面代码，当解析到调用展示图片代码时，所述解析引擎通知所述客户端，包括所述图片预加载代码将自身携带的图片地址传送给所述客户端，调用所述客户端根据所述图片地址获取图片内容，将获取到的图片内容和所述图片地址进行关联缓存，所述图片预加载代码与所述import所需组件的代码相邻；

所述客户端，用于基于所述图片预加载代码的调用，缓存待展示的图片，以及，基于所述解析引擎的通知，从所述缓存中获取所述图片地址所对应的图片内容进行展示。

4.根据权利要求3所述的装置，其特征在于，所述客户端，用于当所述图片地址是本地存储路径时，将所述本地存储路径下的图片内容缓存至内存中；当所述图片地址是网址时，根据所述网址将图片内容下载到永久性存储空间，并将下载的图片内容缓存至内存中。

5.一种存储介质，其特征在于，所述存储介质存储有多条指令，所述指令适用于由处理器加载并执行如权利要求1至2中任一项所述的图片的展示方法。