CN114996606A - 一种图片加载方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种图片加载方法、装置、设备及存储介质，涉及图像处理技术领域，包括：主线程利用获取到的待加载图片的图片存储标识在临时缓存和浏览器数据库中查询对应的图片缓存信息；均未查询到对应的图片缓存信息则通过主线程将图片存储标识传输至子线程，通过子线程基于图片存储标识和预设获取方式获取待加载图片的图片数据；通过子线程将图片数据转化为预设格式的预设格式图片数据，并返回至主线程；主线程将预设格式图片数据存储至临时缓存与浏览器数据库，基于预设格式图片数据的格式执行对应的图片加载操作。本申请通过在子线程中将获取到的图片数据转化为预设格式，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率。

Description

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

技术领域

本发明涉及图像处理技术领域，特别涉及一种图片加载方法、装置、设备及存储介质。

背景技术

在图片等静态资源较多的网页中，由于浏览器并发下载数存在数量限制，会将当前所有发起的请求划分成多个批次，会影响到页面中数据请求的速度，从而影响到网页的响应速度。现有技术中，利用可缓存线程池异步加载图片资源，构建map(一种记录键的原始插入顺序的键值对)存储已加载到的图片资源的bitmap(位图)对象，来解决图片过大导致的ANE(Adobe Air Native Extension，Adobe Air的本地扩展)的问题；或根据URL(UniformResource Locator，统一资源定位符)定位符查询缓存，如果没有则创建请求获取图片，然后存储图片至缓存中。图片在请求完成后需要解析展示在网页中，这个解析过程全程在UI(User Interface，用户界面)线程中执行，当一个页面中图片资源很多、存在大量高像素图片解析，并且由于图片的精度高，以至于一些图片的请求加载时间过长，解析时间过长会影响到页面其他内容的加载、阻塞主线程，造成页面卡顿且无法操作，影响用户正常的交互体验的问题。

发明内容

有鉴于此，本发明的目的在于提供一种图片加载方法、装置、设备和存储介质，能够减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率。其具体方案如下：

第一方面，本申请公开了一种图片加载方法，包括：

通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；

若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；

通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。

可选的，所述基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息，包括：

基于所述图片存储标识判断所述临时缓存中是否存在与所述待加载图片对应的所述图片缓存信息；

若存在所述图片缓存信息，则直接获取所述临时缓存中的所述图片缓存信息；

若不存在所述图片缓存信息，则在所述浏览器数据库中查询是否存在与所述待加载图片类型对应的目标数据库；

若不存在所述目标数据库，则创建与所述待加载图片类型对应的目标数据库；

若存在所述目标数据库，则基于所述图片存储标识判断所述目标数据库中是否存在与所述待加载图片对应的所述图片缓存信息。

可选的，所述若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据，包括：

若所述目标数据库中不存在与所述待加载图片对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程；

若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。

可选的，所述通过所述主线程将所述图片存储标识传输至子线程之前，还包括：

若当前运行环境不支持所述子线程，则通过所述主线程直接基于所述图片存储标识以及所述预设获取方式获取所述图片数据。

可选的，所述通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程，包括：

通过所述子线程将所述图片数据转化为二进制图片数据；

判断当前运行环境是否支持创建图像位图方法；

若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据，并将所述图像位图数据返回至主线程；

若不支持所述创建图像位图方法，将所述二进制图片数据返回至所述主线程。

可选的，所述通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，包括：

通过所述主线程将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中。

可选的，所述通过所述主线程将所述图片存储标识传输至子线程之后，还包括：

若将所述图像位图数据返回至所述主线程，则直接加载所述图像位图数据以得到加载后图像；

若将所述二进制图片数据返回至所述主线程，则通过预设加载方法加载所述二进制图片数据，以得到所述加载后图像。

第二方面，本申请公开了一种图片加载装置，包括：

标识获取模块，用于通过主线程获取待加载图片的图片存储标识；

缓存信息查询模块，用于基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；

数据获取模块，用于若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

格式转化模块，用于通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；

数据存储模块，用于通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中；

图片加载模块，用于基于所述预设格式图片数据的格式执行对应的图片加载操作。

第三方面，本申请公开了一种电子设备，包括：

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序，以实现如前述公开的图片加载方法的步骤。

第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如前述公开的图片加载方法。

可见，本申请提供了一种图片加载方法，包括：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。由此可见，本申请当在临时缓存以及浏览器数据库中均未查询到对应的图片缓存信息时，将所述图片存储标识传输至子线程，以便在子线程中将获取到的图片数据转化为预设格式的预设格式图片数据，再将所述预设格式图片数据返回主线程并在主线程进行对应的加载操作，将图片解析的过程放在子线程中进行，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率，提升用户体验。

附图说明

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

图1为本申请公开的一种图片加载方法流程图；

图2为本申请公开的一种具体的图片加载方法流程图；

图3为本申请公开的缓存特征示意图；

图4为本申请公开的一种具体的图片加载方法流程图；

图5为本申请公开的数据库判断示意图；

图6为本申请公开的缓存判断示意图；

图7为本申请公开的一种具体的图片加载方法流程图；

图8为本申请提供的图片加载装置结构示意图；

图9为本申请提供的一种电子设备结构图。

具体实施方式

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

目前，图片在请求完成后需要解析展示在网页中，这个解析过程全程在UI线程中执行，当一个页面中图片资源很多、存在大量高像素图片解析，并且由于图片的精度高，以至于一些图片的请求加载时间过长，解析时间过长会影响到页面其他内容的加载、阻塞主线程，造成页面卡顿且无法操作，影响用户正常的交互体验的问题。为此，本申请提供了一种图片加载方法，能够减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率。

本发明实施例公开了一种图片加载方法，参见图1所示，该方法包括：

步骤S11：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息。

本实施例中，通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息。

可以理解的是，在主线程获取到待加载图片的图片存储标识之后，在页面中查询是否存在临时缓存，若存在临时缓存则基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息，如图2所示，先判断临时缓存中是否存在对应的图片缓存信息，若临时缓存中存在对应的图片缓存信息，则从临时缓存中直接获取所述图片缓存信息，并根据判断得到的图片类型进行对应的图片加载操作；若临时缓存中不存在对应的图片缓存信息，则判断浏览器数据库中是否存在对应的图片缓存信息，若浏览器数据库中存在对应的图片缓存信息，则从浏览器数据库中直接获取所述图片缓存信息，并将所述图片缓存信息存储至临时缓存，然后根据判断得到的图片类型进行对应的图片加载操作。可以理解的是，临时缓存为用于临时存储当前页面的已经加载过的图片数据，存储地址为windows下且不局限于windows下，也可以在localstorage(本地储存)，sessionstorage(会话存储对象)等地方，还可以是当前页面的上下文中，存储形式以Map键值对的形式存储且不限于Map方式，也可以正常的对象形式、Set(集合，是一种高级容器)的方式或其他方式。需要指出的是，可以通过预设算法获取存储图片的图片存储标识，例如所述图片存储标识为图片地址。图片存储标识也可以是一个与图片地址存在一定的转化关系的信息(可以是一个值，也可以是一个字符串)。

步骤S12：若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。

本实施例中，若在临时缓存以及浏览器数据库中均未查询对应的图片缓存信息，则表明此时所述待缓存图片为第一次被加载，此时通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。

在现有技术中主要存在以下几种方案：

1)根据页面展示区域，对所有图片进行分批次预加载。具体的，将当前的页面进行区域划分，然后根据各种区域的展示优先级对图片进行分批加载，限制同一时间内同时存在的并发任务数量，缓解同一时间内页面计算资源的使用情况。本方案存在以下缺点：优化仅针对页面的请求数量，对于图片的缓存，图片解析对于主线程造成的阻塞这些方面没有作用。

2)采用雪碧图或者是整合多张图片在一张大图，然后记录每张图片的偏移位置的方式。具体的，将多张图整合成一张大图，可以将原先的多个并发任务，融合成一个任务执行，减少了页面的请求数量。本方案存在以下缺点：将图片整合成大图后进行一次加载，虽然减少了页面的请求数量，但是更大的图片表明要花费更久的时间加载，在这张大图没有加载出来之前，大图中的所有小图片的相关内容都不会有任何的使用反馈，并且对于主线程进程阻塞的问题没有具体的优化，此方案比较适用于一些icon(一种图标格式)的加载展示方案。

3)采用GPU(Graphics Processing Unit，图形处理器)缓存贴图存储所有图片组成的大图，并记录相应的图片偏移数据。具体的，将多张已经请求到的图片资源整合绘制在一张大图中，并将上述大图保存在GPU中，提高图片的二次使用的速度，缓存贴图的存储也在内存方面比其他一些缓存方案多一些优势。本方案存在以下缺点：本方案对于使用者的设备会有一定的要求，同时仅限于当前浏览器应用标签未关闭的情况下，若浏览器关闭，这个缓存也会随着页面应用的关闭而被回收，同时对于图片首次加载的性能问题没有具体的优化操作。

4)采用队列形式按照自定义的规则对页面内的图片资源进行优先级排序，根据图片的重要性让页面中的图片按照重要性的顺序按照顺序展示。本方案存在以下缺点：本方案对于页面的实时反馈速度有一定的提升，会一定程度的提升用户体验，但缺乏对于性能的具体优化。

5)对大图片进行一定标准的剖分，将大图片进行分块加载。具体的，本方案主要是针对大尺寸、高分辨率的图片，此类图片加载解析消耗的时耗久，页面实时反馈慢。本方案存在以下缺点：分块加载的形式，可以很好的拆解原本一张大图的加载时间，将一个长时间的加载任务，优化成多个并行的小的加载任务，可以优化大图的加载体验，用户体验上会有一定的提升，但是伴随而来的时请求的增加，存在部分阻塞主线程数据渲染的进程的风险。

可以理解的是，为了解决现有技术存在的问题，可以从资源缓存，以及多线程加载解析，数据流存储的方式去优化。基于缓存，需要一种稳定全面的本地缓存方案，如图3所示，需要具备以下特征：高效、轻量、持久、可控；高效指缓存的存储及读取速度越高效，图片加载的反馈则越快，相对的用户的等待时间就会越低，用户体验就更好；轻量指缓存技术方案需要轻量，否则即使提高了加载速度，但是从其他方面会给页面增加额外的消耗；持久指缓存存在时间需要相对持久，这样可以在较长一段时间内保证页面图片加载的性能提升，如果持久性较差，则失去了缓存方案存在的意义；可控指缓存需要可控，可以随时方便的根据实际情况完成对缓存的更新，使其保持时效性。基于多线程，需要一种完善的、兼容性良好且轻量级的多线程解决方案例如Web Workers(JavaScript创造多线程环境)技术。可以理解的是，Web Workers允许主线程创建Worker线程，将一些任务分配给Worker线程运行，在主线程运行的同时，Worker线程在后台运行，两者互不干扰，Worker线程完成任务后再把结果返回给主线程。可以理解的是，UI线程是用户更新UI界面的特殊线程，也就是主线程，新建(new)的线程(Thread)都是子线程，主线程是操作系统主动创建的，程序启动时就已经存在。

需要指出的是，多线程解决方案不局限于web workers，同样适用于其他的多线程异步技术方案。

步骤S13：通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程。

本实施例中，通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据之后，在所述子线程中将所述图片数据转化为预设格式的预设格式图片数据，然后将所述预设格式图片数据返回至所述主线程。可以理解的是，所述预设格式根据实际情况选择当前子线程支持的图片格式。

步骤S14：通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。

本实施例中，主线程在接收到所述预设格式图片数据之后，将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。可以理解的是，将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，当图片二次使用时，可以减少请求数量，直接从所述临时缓存与所述浏览器数据库中调取对应的图片，为多图页面提供一个用于图片加载、解析、缓存的方案。

可以理解的是，整个方案过程中考虑到了图片请求对于UI主线程的阻塞，也考虑到了主线程与子线程之间的传输效率。将图片解析部分的性能消耗转移到了子线程中，规避了图片加载对于UI主线程的阻塞。每张图片节约一定的资源，对页面图片加载会存在较大的提升；同时充分利用了浏览器内置数据库，对图片数据进行了一个半持久化的离线缓存，对网页图片性能方面进行了优化。在支持Web Workers的环境中采用多线程的方案进行图片的加载以及解析，将原本主线程中的图片加载解析转移到其他线程中，舒缓了主线程的运算压力，降低了主线程中的资源占有率，解决了图片加载解析的过程对于主线程的阻塞，解决了潜在的卡顿问题。此外，本发明结合了web中新兴的IndexedDB本地存储的新特性，对已加载的图片进行缓存，根据环境兼容情况缓存Blob或者是ImageBitmap。二进制的数据提升了加载速度，并且由于存储的是Blob或者是ImageBitmap数据格式的图片，页面中使用图片所消耗的计算资源也极大的降低，整体减少了重复图片的加载请求，加快了重复图片的加载速度。

可见，本申请提供了一种图片加载方法，包括：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。由此可见，本申请当在临时缓存以及浏览器数据库中均未查询到对应的图片缓存信息时，将所述图片存储标识传输至子线程，以便在子线程中将获取到的图片数据转化为预设格式的预设格式图片数据，再将所述预设格式图片数据返回主线程并在主线程进行对应的加载操作，将图片解析的过程放在子线程中进行，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率，提升用户体验。

参见图4所示，本发明实施例公开了一种图片加载方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。

步骤S21：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息。

本实施例中，通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息。可以理解的是，基于所述图片存储标识判断所述临时缓存中是否存在与所述待加载图片对应的所述图片缓存信息，若存在所述图片缓存信息，则直接获取所述临时缓存中的所述图片缓存信息；若不存在所述图片缓存信息，则在所述浏览器数据库中查询是否存在与所述待加载图片类型对应的目标数据库。如图5所示，若不存在所述目标数据库，则创建与所述待加载图片类型对应的目标数据库；若存在所述目标数据库，则基于所述图片存储标识判断所述目标数据库中是否存在与所述待加载图片对应的所述图片缓存信息。可以理解的是，所述浏览器数据库中包含不同种类的数据库，例如文档数据库、图片数据库以及其他种类的数据库。因此在所述浏览器数据库中查询是否存在图片数据库，若存在图片数据库则访问上述图片数据库并基于所述图片存储标识判断是否存在与所述待加载图片对应的所述图片缓存信息；若不存在图片数据库，则初始化图片数据库，即创建一个图片数据库，再在新创建的图片数据库中查询是否存在与所述待加载图片对应的所述图片缓存信息。

具体的，基于所述图片存储标识在浏览器数据库的IndexedDB中查询对应的图片缓存信息。IndexedDB为浏览器提供的内置数据库，可以在程序中与IndexedDB建立连接，然后查询数据库中存储的关键信息。需要指出的是，数据库不局限于indexedDB数据库，也适用于其他的数据库。

步骤S22：若均未查询到对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程。

本实施例中，通过主线程基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息，若均未查询到对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程。如图6所示，如果IndexedDB中存在对应的所述图片缓存信息，则直接获取上述图片缓存信息并进行下一步操作，如果不存在上述图片缓存信息，此时需要判断当前的运行环境是否支持Web Workers。

步骤S23：若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。

本实施例中，判断当前运行环境是否支持所述子线程，若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。若当前运行环境不支持所述子线程，则通过所述主线程直接基于所述图片存储标识以及所述预设获取方式获取所述图片数据。

具体的，若当前运行环境支持所述子线程，则将所述图片存储标识发送至WebWorkers程序中，并且在Web Workers中使用XMLHttpRequest请求所述待加载图片的图片数据。如果不支持Web Workers，则直接在主线程中使用XMLHttpRequest请求所述待加载图片的图片数据。可以理解的是，XMLHttpRequest对象提供了对HTTP(HyperText TransferProtocol，超文本传输协议)协议的完全的访问，包括做出POST(一种请求)和HEAD(一种请求)请求以及普通的GET(一种请求)请求的能力。XMLHttpRequest可以同步或异步地返回Web服务器的响应，并且能够以文本或者一个DOM(Document Object Model，文档对象模型)文档的形式返回内容。

需要指出的是，通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据，上述预设获取方式不局限于使用XMLHttpRequest请求所述待加载图片的图片数据，同样适用于fetch等其他可用于请求图片的技术手段。

步骤S24：通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程。

步骤S25：通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。

关于上述步骤S24、S25的具体内容可以参考前述实施例中公开的相应内容，在此不再进行赘述。

可见，本申请实施例通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；若均未查询到对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程；若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率，提升用户体验。

参见图7所示，本发明实施例公开了一种图片加载方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。

步骤S31：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息。

步骤S32：若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程。

步骤S33：通过所述子线程将所述图片数据转化为二进制图片数据。

本实施例中，通过所述子线程将所述图片数据转化为二进制图片数据，例如将所述图片数据转化为Blob(binary large object，一个存储二进制文件的容器)数据格式。可以理解的是，主线程与子线程之间的通信内容，可以是文本、对象、二进制数据；例如File，Blob，ArrayBuffer(类型化数组)等类型。将所述图片数据转化为Blob数据格式，可以提高主线程和子线程之间传输数据的效率，并且将部分图片数据解析的操作放在了子线程中实现，可以减少主线程的计算消耗。

步骤S34：判断当前运行环境是否支持创建图像位图方法。

本实施例中，将所述图片数据转化为二进制图片数据之后，判断当前运行环境是否支持创建图像位图方法。若当前运行环境不支持所述创建图像位图方法，则直接将所述二进制图片数据(Blob数据格式的图片数据)返回至所述主线程。

具体的，判断当前运行环境中是否支持createImageBitmap方法，上述方法正常情况下存在于window和子线程中，可以将Blob的数据格式的图片转换成ImageBitmap格式，该格式的图片可以直接使用且存放方便，不用再次解析。

步骤S35：若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据，并将所述图像位图数据返回至主线程。

本实施例中，若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据，并将所述图像位图数据返回至主线程，即将Blob格式的图片转换成ImageBitmap对象，再将ImageBitmap对象返回至主线程。

步骤S36：通过所述主线程将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中。

本实施例中，所述主线程经接收到的所述二进制图片数据或所述图像位图数据存储至已连接上的indexedDB数据库的目标数据库表中，然后将所述二进制图片数据或所述图像位图数据存储至所述临时缓存中。需要指出的是，在存储过程中，以图片的图片存储标识(例如加载地址)为关键(key)值存储上述二进制图片数据或图像位图数据。可以理解的是，由于图片存储标识具有唯一性，因此可以排查掉相同存储标识的图片重复加载的情况，减少了图片的二次请求以及页面请求的数量。

可以理解的是，采用浏览器数据库缓存(例如IndexedDB本地缓存)结合临时缓存的组合缓存方式缓存已加载过的图片，临时缓存用于缓存当前页面下的使用过的图片，当页面再次使用时可以直接使用临时缓存中存储的图片数据，节省了连接数据库查询的时间成本，此外数据库中缓存了一定的使用时间段的图片缓存，这个时间段为自定义时间段，时间线的长短根据实际情况设置，例如根据用户自己手动清理浏览器缓存的情况，或程序中根据所设置的数据库的有效期自动清理缓存，从而控制缓存存在的时效。

步骤S37：基于所述预设格式图片数据的格式执行对应的图片加载操作。

本实施例中，将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中后，基于所述预设格式图片数据的格式执行对应的图片加载操作。可以理解的是，若所述主线程接收到所述图像位图数据，则直接加载所述图像位图数据以得到加载后图像；若所述主线程接收到所述二进制图片数据，则通过预设加载方法加载所述二进制图片数据，以得到所述加载后图像。例如，通过window.URL.createObjectURL方法加载Blob图片，根据当前的运行环境对从数据库表中获取到的图片数据进行相应的调用展示，完成整个图片加载、解析、缓存的步骤。

关于上述步骤S31、S32的具体内容可以参考前述实施例中公开的相应内容，在此不再进行赘述。

可见，本申请实施例通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程；通过所述子线程将所述图片数据转化为二进制图片数据；判断当前运行环境是否支持创建图像位图方法；若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据，并将所述图像位图数据返回至主线程；通过所述主线程将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中；基于所述预设格式图片数据的格式执行对应的图片加载操作，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率，提升用户体验，以ImageBitmap或Blob的数据格式存储，减少了图片再利用时候消耗的计算资源。

参见图8所示，本申请实施例还相应公开了一种图片加载装置，包括：

标识获取模块11，用于通过主线程获取待加载图片的图片存储标识；

缓存信息查询模块12，用于基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；

数据获取模块13，用于若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

格式转化模块14，用于通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；

数据存储模块15，用于通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中；

图片加载模块16，用于基于所述预设格式图片数据的格式执行对应的图片加载操作。

可见，本申请包括：通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。由此可见，本申请当在临时缓存以及浏览器数据库中均未查询到对应的图片缓存信息时，将所述图片存储标识传输至子线程，以便在子线程中将获取到的图片数据转化为预设格式的预设格式图片数据，再将所述预设格式图片数据返回主线程并在主线程进行对应的加载操作，将图片解析的过程放在子线程中进行，减少图片加载对主线程的阻塞和页面卡顿，加快图片渲染效率，提升用户体验。

在一些具体实施例中，所述标识获取模块11，具体包括：

标识获取单元，用于通过主线程获取待加载图片的图片存储标识。

在一些具体实施例中，所述缓存信息查询模块12，具体包括：

临时缓存信息判断单元，用于基于所述图片存储标识判断所述临时缓存中是否存在与所述待加载图片对应的所述图片缓存信息；

临时缓存信息调用单元，用于若存在所述图片缓存信息，则直接获取所述临时缓存中的所述图片缓存信息；

目标数据库判断单元，用于若不存在所述图片缓存信息，则在所述浏览器数据库中查询是否存在与所述待加载图片类型对应的目标数据库；

目标数据库创建单元，用于若不存在所述目标数据库，则创建与所述待加载图片类型对应的目标数据库；

目标数据库信息判断单元，用于若存在所述目标数据库，则基于所述图片存储标识判断所述目标数据库中是否存在与所述待加载图片对应的所述图片缓存信息。

在一些具体实施例中，所述数据获取模块13，具体包括：

子线程判断单元，用于若所述目标数据库中不存在与所述待加载图片对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程；

存储标识传输单元，用于若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程；

第一图片数据获取单元，用于通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

第二图片数据获取单元，用于若当前运行环境不支持所述子线程，则通过所述主线程直接基于所述图片存储标识以及所述预设获取方式获取所述图片数据。

在一些具体实施例中，所述格式转化模块14，具体包括：

二进制图片数据转化单元，用于通过所述子线程将所述图片数据转化为二进制图片数据；

方法判断单元，用于判断当前运行环境是否支持创建图像位图方法；

图像位图数据转化单元，用于若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据；

图像位图数据返回单元，用于将所述图像位图数据返回至主线程；

二进制图片数据返回单元，用于若不支持所述创建图像位图方法，将所述二进制图片数据返回至所述主线程。

在一些具体实施例中，所述数据存储模块15，具体包括：

数据存储单元，用于通过所述主线程将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中。

在一些具体实施例中，所述图片加载模块16，具体包括：

第一图片加载单元，用于若将所述图像位图数据返回至所述主线程，则直接加载所述图像位图数据以得到加载后图像；

第二图片加载单元，用于若将所述二进制图片数据返回至所述主线程，则通过预设加载方法加载所述二进制图片数据，以得到所述加载后图像。

进一步的，本申请实施例还提供了一种电子设备。图9是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本申请的使用范围的任何限制。

图9为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的图片加载方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。

本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。

另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。

其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的图片加载方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。

进一步的，本申请实施例还公开了一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现前述任一实施例公开的图片加载方法步骤。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

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

以上对本发明所提供的一种图片加载方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

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

通过主线程获取待加载图片的图片存储标识，并基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；

若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；

通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，然后基于所述预设格式图片数据的格式执行对应的图片加载操作。

2.根据权利要求1所述的图片加载方法，其特征在于，所述基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息，包括：

基于所述图片存储标识判断所述临时缓存中是否存在与所述待加载图片对应的所述图片缓存信息；

若存在所述图片缓存信息，则直接获取所述临时缓存中的所述图片缓存信息；

若不存在所述图片缓存信息，则在所述浏览器数据库中查询是否存在与所述待加载图片类型对应的目标数据库；

若不存在所述目标数据库，则创建与所述待加载图片类型对应的目标数据库；

若存在所述目标数据库，则基于所述图片存储标识判断所述目标数据库中是否存在与所述待加载图片对应的所述图片缓存信息。

3.根据权利要求2所述的图片加载方法，其特征在于，所述若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据，包括：

若所述目标数据库中不存在与所述待加载图片对应的所述图片缓存信息，则判断当前运行环境是否支持所述子线程；

若当前运行环境支持所述子线程，则通过所述主线程将所述图片存储标识传输至所述子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据。

4.根据权利要求3所述的图片加载方法，其特征在于，所述通过所述主线程将所述图片存储标识传输至子线程之前，还包括：

若当前运行环境不支持所述子线程，则通过所述主线程直接基于所述图片存储标识以及所述预设获取方式获取所述图片数据。

5.根据权利要求4所述的图片加载方法，其特征在于，所述通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程，包括：

通过所述子线程将所述图片数据转化为二进制图片数据；

判断当前运行环境是否支持创建图像位图方法；

若支持所述创建图像位图方法，则将所述二进制图片数据转化为图像位图数据，并将所述图像位图数据返回至主线程；

若不支持所述创建图像位图方法，将所述二进制图片数据返回至所述主线程。

6.根据权利要求5所述的图片加载方法，其特征在于，所述通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中，包括：

通过所述主线程将所述二进制图片数据或所述图像位图数据存储至所述临时缓存以及所述目标数据库中。

7.根据权利要求5或6任一项所述的图片加载方法，其特征在于，还包括：

若将所述图像位图数据返回至所述主线程，则直接加载所述图像位图数据以得到加载后图像；

若将所述二进制图片数据返回至所述主线程，则通过预设加载方法加载所述二进制图片数据，以得到所述加载后图像。

8.一种图片加载装置，其特征在于，包括：

标识获取模块，用于通过主线程获取待加载图片的图片存储标识；

缓存信息查询模块，用于基于所述图片存储标识在临时缓存以及浏览器数据库中查询对应的图片缓存信息；

数据获取模块，用于若均未查询到对应的所述图片缓存信息，则通过所述主线程将所述图片存储标识传输至子线程，并通过所述子线程基于所述图片存储标识以及预设获取方式获取所述待加载图片的图片数据；

格式转化模块，用于通过所述子线程将所述图片数据转化为预设格式的预设格式图片数据，并将所述预设格式图片数据返回至所述主线程；

数据存储模块，用于通过所述主线程将所述预设格式图片数据存储至所述临时缓存与所述浏览器数据库中；

图片加载模块，用于基于所述预设格式图片数据的格式执行对应的图片加载操作。

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

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序，以实现如权利要求1至7任一项所述的图片加载方法的步骤。

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

Images