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

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

Info

Publication number
CN111259289B
CN111259289B CN202010043718.4A CN202010043718A CN111259289B CN 111259289 B CN111259289 B CN 111259289B CN 202010043718 A CN202010043718 A CN 202010043718A CN 111259289 B CN111259289 B CN 111259289B
Authority
CN
China
Prior art keywords
picture
target
format
browser
base64
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010043718.4A
Other languages
English (en)
Other versions
CN111259289A (zh
Inventor
陈泓硕
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202010043718.4A priority Critical patent/CN111259289B/zh
Publication of CN111259289A publication Critical patent/CN111259289A/zh
Priority to PCT/CN2021/072110 priority patent/WO2021143828A1/zh
Priority to US17/862,594 priority patent/US20220343056A1/en
Application granted granted Critical
Publication of CN111259289B publication Critical patent/CN111259289B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/51—Indexing; Data structures therefor; Storage structures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Software Systems (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本公开关于一种图片加载方法、装置、电子设备及存储介质，该方法包括：在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片。

Description

一种图片加载方法、装置、电子设备及存储介质
技术领域
本申请涉及图片处理技术领域，特别是涉及一种图片加载方法、装置、电子设备及存储介质。
背景技术
WebP是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式。对于两张相同大小的WebP格式的图片和JPG格式的图片，WebP格式的图片比JPG格式的图片更加清晰。
但是，相关技术中，有些浏览器如IE浏览器不支持WebP格式的图片，因此，不支持WebP格式的图片的浏览器无法成功加载WebP格式的图片。
发明内容
为了解决相关技术中存在的因浏览器不支持WebP格式的图片，而导致浏览器无法成功加载WebP格式的图片的问题。本公开提供一种图片加载方法、装置、电子设备及存储介质，本公开的技术方案如下：
根据本公开实施例的第一方面，提供了一种图片加载方法，包括：
在检测到目标浏览器需要加载目标图片时，获取所述目标图片的图片格式；
在判定所述目标浏览器不支持所述图片格式时，获取所述目标图片的预设类型的图片编码格式，其中，所述目标浏览器支持所述预设类型的图片编码格式；
将所述目标图片的统一资源定位符url替换为所述图片编码格式；
通过所述目标浏览器加载所述目标图片，并展示所述目标图片。
可选的，所述目标图片的图片格式为webp格式，所述预设类型的图片编码格式为base64。
可选的，在所述获取所述目标图片的预设类型的图片编码格式之前，所述方法还包括：
通过懒加载方式将所述目标图片预先加载到所述目标浏览器缓存中；
启动所述目标浏览器中的目标异步线程；
通过所述目标异步线程调用预设webpJS，将所述目标浏览器缓存中的所述目标图片转换为base64；
将所述base64存储于所述目标浏览器缓存中。
可选的，所述获取所述目标图片的预设类型的编码格式，包括：
从所述目标浏览器缓存中获取所述base64。
可选的，在通过所述目标浏览器加载所述目标图片，并展示所述目标图片之后，还包括：
删除目标浏览器缓存中的所述目标图片，以及所述base64。
根据本公开实施例的第二方面，提供了一种图片加载装置，包括：
图片格式获取模块，被配置为执行在检测到目标浏览器需要加载目标图片时，获取所述目标图片的图片格式；
图片编码格式获取模块，被配置为执行在判定所述目标浏览器不支持所述图片格式时，获取所述目标图片的预设类型的图片编码格式，其中，所述目标浏览器支持所述预设类型的图片编码格式；
统一资源定位符替换模块，被配置为执行将所述目标图片的统一资源定位符url替换为所述图片编码格式；
图片加载模块，被配置为执行通过所述目标浏览器加载所述目标图片，并展示所述目标图片。
可选的，所述目标图片的图片格式为webp格式，所述预设类型的图片编码格式为base64。
可选的，所述装置还包括：
图片预加载模块，被配置为执行在所述图片编码格式模块获取所述目标图片的预设类型的图片编码格式之前，通过懒加载方式将所述目标图片预先加载到所述目标浏览器缓存中；
线程启动模块，被配置为执行启动所述目标浏览器中的目标异步线程；
图片转化模块，被配置为执行通过所述目标异步线程调用预设webpJS，将所述目标浏览器缓存中的所述目标图片转换为base64；
base64存储模块，被配置为执行将所述base64存储于所述目标浏览器缓存中。
可选的，所述图片编码格式获取模块，被配置为执行：
从所述目标浏览器缓存中获取所述base64。
可选的，还包括：
删除模块，被配置为执行在通过所述目标浏览器加载所述目标图片，并展示所述目标图片之后，删除目标浏览器缓存中的所述目标图片，以及所述base64。
根据本公开实施例的第三方面，提供了一种电子设备，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现第一方面所述的图片加载方法。
根据本公开实施例的第四方面，提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行第一方面所述的图片加载方法。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
附图说明
图1是根据一示例性实施例示出的一种图片加载方法的流程图；
图2是根据一示例性实施例示出的另一种图片加载方法的流程图；
图3是根据一示例性实施例示出的一种图片加载装置的框图；
图4是根据一示例性实施例示出的一种电子设备的框图；
图5是根据一示例性实施例示出的一种图片加载装置的框图；
图6是根据一示例性实施例示出的另一种图片加载装置的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
WebP是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式。对于两张相同大小的WebP格式的图片和JPG格式的图片，WebP格式的图片比JPG格式的图片更加清晰。
但是，相关技术中，有些浏览器如IE浏览器不支持WebP格式的图片，因此，不支持WebP格式的图片的浏览器无法成功加载WebP格式的图片。
为了解决相关技术中存在的因浏览器不支持WebP格式的图片，而导致浏览器无法成功加载WebP格式的图片的问题。本公开实施例提供了一种图片加载方法、装置、电子设备及存储介质。
第一方面，首先对本公开实施例提供的一种图片加载方法进行详细介绍。
需要说明的是，本公开实施例提供的一种图片加载方法的执行主体为一种图片加载装置，该图片加载装置运行于电子设备中，该电子设备可以是终端或者服务器，本公开实施例对电子设备不做具体限定。
图1是根据一示例性实施例示出的一种图片加载方法的流程图。如图1所示，该方法可以包括以下步骤。
在步骤S11中，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式。
其中，目标浏览器可以为作为执行主体的电子设备中的任一浏览器。目标图片可以为目标浏览器需要加载的任一图片，且目标图片可以为css(Cascading Style Sheets，层叠样式表)。
具体的，当用户需要通过目标浏览器访问网页时，用户可以向作为执行主体的电子设备发送网页访问指令，此时，作为执行主体的电子设备可以接收到网页访问指令。并且，作为执行主体的电子设备可以检测要访问的网页是否包括图片，在检测到要访问的网页中包括图片时，即检测到目标浏览器需要加载目标图片，该目标图片为要访问的网页中包括的任一图片，此时，作为执行主体的电子设备可以获取目标图片的图片格式。
其中，目标图片的图片格式可以为：jpg格式，gif格式，bmp格式，tif格式，webp格式等。可以理解的是，目标图片的图片格式可以根据实际情况确定，本公开实施例对目标图片的图片格式不做具体限定。
在步骤S12中，在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式。
其中，目标浏览器支持预设类型的图片编码格式。
为了防止后续步骤中因目标浏览器不支持目标图片的图片格式，而导致目标浏览器无法成功加载目标图片。作为执行主体的电子设备获取到目标图片的图片格式之后，可以判断目标浏览器是否支持目标图片的图片格式。
例如，假设目标图片的图片格式为webp格式，目标浏览器为IE浏览器，由于IE浏览器不支持webp格式，此时，可以判定目标浏览器不支持目标图片的图片格式。
再例如，假设目标图片的图片格式为webp格式，目标浏览器为火狐浏览器，由于火狐浏览器支持webp格式，此时，可以判定目标浏览器支持目标图片的图片格式。
如果作为执行主体的电子设备判定目标浏览器不支持目标图片的图片格式，可以获取目标图片的预设类型的图片编码格式，并且，目标浏览器支持预设类型的图片编码格式，这样，有助于后续步骤中成功加载目标图片。
在一种实施方式中，目标图片的图片格式为webp格式，预设类型的图片编码格式为base64。其中，base64是一种图片编码格式，是一种基于64个可打印字符来表示二进制数据的方法。当然，预设类型可以是目标浏览器支持的任意一种图片编码格式，本公开实施例对预设类型的图片编码格式不做具体限定。
并且，获取目标图片的预设类型的图片编码格式的方式可以有多种。
在一种实施方式中，作为执行主体的电子设备可以启动异步线程，通过异步线程用预设webpJS目标图片转化为预设类型的图片编码格式。并且，由于将目标图片转化为预设类型的图片编码格式的过程是在目标异步线程中进行的，因此，不会造成线程阻塞，从而节省了作为执行主体的电子设备的性能，从而提升了用户体验。
在另一种实施方式中，作为执行主体的电子设备可以直接从浏览器缓存中获取目标图片的预设类型的图片编码格式，为了方案描述清楚，将在图2实施例中进行详细阐述。
在步骤S13中，将目标图片的统一资源定位符url替换为图片编码格式。
作为执行主体的电子设备获取目标图片的预设类型的图片编码格式后，在加载目标图片时，可以将目标图片的统一资源定位符url替换为预设类型的图片编码格式。
具体的，当预设类型的图片编码格式为base64时，可以将目标图片的url替换为base64，这样，有利于后续步骤中，目标浏览器能够成功加载目标图片。
在步骤S14中，通过目标浏览器加载目标图片，并展示目标图片。
在将目标图片的url替换为预设类型的图片编码格式后，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够成功加载目标图片，从而能够正常显示webp格式的图片。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
图2是根据一示例性实施例示出的一种图片加载方法的流程图。如图2所示，该方法可以包括以下步骤。
在步骤S21中，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式。
其中，目标浏览器可以为作为执行主体的电子设备中的任一浏览器。目标图片可以为目标浏览器需要加载的任一图片。
具体的，当用户需要通过目标浏览器访问网页时，用户可以向作为执行主体的电子设备发送网页访问指令，此时，作为执行主体的电子设备可以接收到网页访问指令。并且，作为执行主体的电子设备可以检测要访问的网页是否包括图片，在检测到要访问的网页中包括图片时，即检测到目标浏览器需要加载目标图片，该目标图片为要访问的网页中包括的任一图片，此时，作为执行主体的电子设备可以获取目标图片的图片格式。
其中，目标图片的图片格式可以为：jpg格式，gif格式，bmp格式，tif格式，webp格式等。可以理解的是，目标图片的图片格式可以根据实际情况确定，本公开实施例对目标图片的图片格式不做具体限定。
在步骤S22中，通过懒加载方式将目标图片预先加载到目标浏览器缓存中。
可以理解的是，懒加载是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
因此，作为执行主体的电子设备可以通过懒加载的方式将目标图片预先加载的目标浏览器的缓存中。
在步骤S23中，启动目标浏览器中的目标异步线程。
具体的，作为执行主体的电子设备在将目标图片预先加载到目标浏览器缓存中之后，可以启动目标浏览器的目标异步线程，以在后续步骤中，在目标异步线程中将目标图片转化为base64。
在步骤S24中，通过目标异步线程调用预设webpJS库，将目标浏览器缓存中的目标图片转换为base64。
作为执行主体的电子设备启动目标异步线程之后，可以调用预设webpJS将目标浏览器中缓存的目标图片转化为base64。并且，由于将目标浏览器中缓存的目标图片转化为base64的过程是在目标异步线程中进行的，因此，不会造成线程阻塞，从而节省了作为执行主体的电子设备的性能，从而提升了用户体验。
在步骤S25中，将base64存储于目标浏览器缓存中。
作为执行主体的电子设备将目标图片转化为base64之后，可以将目标图片的base64存储于目标浏览器缓存中，这样，后续步骤中，在作为执行主体的电子设备判定目标浏览器不支持图片格式时，可以从目标浏览器缓存中获取直接获取目标图片的base64，从而提高了获取目标图片的base64的效率。
在步骤S26中，在判定目标浏览器不支持图片格式时，从目标浏览器缓存中获取base64。
由于目标浏览器缓存中存储有目标图片的base64，因此，作为执行主体的电子设备判定目标浏览器不支持目标图片的图片格式时，可以直接从目标浏览器缓存中获取base64，提高了获取目标图片的base64的效率。
在步骤S27中，将目标图片的统一资源定位符url替换为base64。
作为执行主体的电子设备获取目标图片的base64后，在加载目标图片时，可以将目标图片的统一资源定位符url替换为base64。有利于后续步骤中，目标浏览器能够成功加载目标图片。
在步骤S28中，通过目标浏览器加载目标图片，并展示目标图片。
在将目标图片的url替换为base64后，由于目标浏览器支持base64，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够成功加载目标图片，从而能够正常显示webp格式的图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以直接从目标浏览器缓存中获取目标图片的base64，并可以将目标图片的url替换为目标图片的base64，由于目标浏览器支持base64，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
在图2所示实施例的基础上，在一种实施方式中，在通过目标浏览器加载目标图片，并展示目标图片之后，图片加载方法还可以包括：
删除目标浏览器缓存中的目标图片，以及目标图片的base64。
在该实施方式中，作为执行主体的电子设备通过目标浏览器加载目标图片，并展示图片之后，即表明目标浏览器已经成功加载了目标图片，此时，可以将目标浏览器中缓存的目标图片以及目标图片的base64删除，以达到节省目标浏览器缓存的效果。
可见，通过本公开实施例提供的技术方案，在通过目标浏览器加载目标图片，并展示目标图片之后，删除目标浏览器缓存中的目标图片，以及目标图片的base64，从而达到节省目标浏览器缓存的效果。
根据本公开实施例的第二方面，提供了一种图片加载装置，如图3所示，包括：
图片格式获取模块310，被配置为执行在检测到目标浏览器需要加载目标图片时，获取所述目标图片的图片格式。
图片编码格式获取模块320，被配置为执行在判定所述目标浏览器不支持所述图片格式时，获取所述目标图片的预设类型的图片编码格式，其中，所述目标浏览器支持所述预设类型的图片编码格式。
在一种可选的实施方式中，所述目标图片的图片格式为webp格式，所述预设类型的图片编码格式为base64。
统一资源定位符替换模块330，被配置为执行将所述目标图片的统一资源定位符url替换为所述图片编码格式。
图片加载模块340，被配置为执行通过所述目标浏览器加载所述目标图片，并展示所述目标图片。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
在一种可选的实施方式中，所述装置还包括：
图片预加载模块，被配置为执行在所述图片编码格式模块获取所述目标图片的预设类型的图片编码格式之前，通过懒加载方式将所述目标图片预先加载到所述目标浏览器缓存中；
线程启动模块，被配置为执行启动所述目标浏览器中的目标异步线程；
图片转化模块，被配置为执行通过所述目标异步线程调用预设webpJS，将所述目标浏览器缓存中的所述目标图片转换为base64；
base64存储模块，被配置为执行将所述base64存储于所述目标浏览器缓存中。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以直接从目标浏览器缓存中获取目标图片的base64，并可以将目标图片的url替换为目标图片的base64，由于目标浏览器支持base64，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
在一种可选的实施方式中，所述图片编码格式获取模块，被配置为执行：
从所述目标浏览器缓存中获取所述base64。
在一种可选的实施方式中，所述装置还包括：
删除模块，被配置为执行在通过所述目标浏览器加载所述目标图片，并展示所述目标图片之后，删除目标浏览器缓存中的所述目标图片，以及所述base64。
可见，通过本公开实施例提供的技术方案，在通过目标浏览器加载目标图片，并展示目标图片之后，删除目标浏览器缓存中的目标图片，以及目标图片的base64，从而达到节省目标浏览器缓存的效果。
根据本公开实施例的第三方面，提供了一种电子设备。图4是根据一示例性实施例示出的一种电子设备框图。参照图4，该电子设备包括：
处理器410；
用于存储所述处理器可执行指令的存储器420；
其中，所述处理器被配置为执行所述指令，以实现本公开所提供的图片加载方法。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
图5是根据一示例性实施例示出的一种图片加载装置500的框图。例如，装置500可以是移动电话，计算机，数字广播电子设备，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
参照图5，装置500可以包括以下一个或多个组件：处理组件502，存储器504，电力组件506，多媒体组件508，音频组件510，输入/输出(I/O)的接口512，传感器组件514，以及通信组件516。
处理组件502通常控制装置500的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件502可以包括一个或多个处理器520来执行指令，以完成上述的图片加载方法的全部或部分步骤。此外，处理组件502可以包括一个或多个模块，便于处理组件502和其他组件之间的交互。例如，处理组件502可以包括多媒体模块，以方便多媒体组件508和处理组件502之间的交互。
存储器504被配置为存储各种类型的数据以支持在设备500的操作。这些数据的示例包括用于在装置500上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器504可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
电源组件506为装置500的各种组件提供电力。电源组件506可以包括电源管理系统，一个或多个电源，及其他与为装置500生成、管理和分配电力相关联的组件。
多媒体组件508包括在所述装置500和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件508包括一个前置摄像头和/或后置摄像头。当设备500处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
音频组件510被配置为输出和/或输入音频信号。例如，音频组件510包括一个麦克风(MIC)，当装置500处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器404或经由通信组件516发送。在一些实施例中，音频组件510还包括一个扬声器，用于输出音频信号。
I/O接口512为处理组件502和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件514包括一个或多个传感器，用于为装置500提供各个方面的状态评估。例如，传感器组件514可以检测到设备500的打开/关闭状态，组件的相对定位，例如所述组件为装置500的显示器和小键盘，传感器组件514还可以检测装置500或装置500一个组件的位置改变，用户与装置500接触的存在或不存在，装置500方位或加速/减速和装置500的温度变化。传感器组件514可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件514还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件514还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件516被配置为便于装置500和其他设备之间有线或无线方式的通信。装置500可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件416经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件516还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，装置500可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器504，上述指令可由装置500的处理器520执行以完成上述方法。可选地，例如，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性非临时性计算机可读存储介质计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
图6是根据一示例性实施例示出的一种用于图片加载装置600的框图。例如，装置600可以被提供为一服务器。参照图6，装置600包括处理组件622，其进一步包括一个或多个处理器，以及由存储器632所代表的存储器资源，用于存储可由处理组件622的执行的指令，例如应用程序。存储器632中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件622被配置为执行指令，以执行上述图片加载方法。
装置600还可以包括一个电源组件626被配置为执行装置600的电源管理，一个有线或无线网络接口650被配置为将装置600连接到网络，和一个输入输出(I/O)接口658。装置600可以操作基于存储在存储器632的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
根据本公开实施例的第四方面，提供了本公开实施例还提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行本公开实施例提供的图片加载方法。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
根据本公开实施例的第五方面，提供了提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机实现第一方面所述的图片加载方法。
本公开实施例提供的技术方案，在检测到目标浏览器需要加载目标图片时，获取目标图片的图片格式；在判定目标浏览器不支持图片格式时，获取目标图片的预设类型的图片编码格式，其中，目标浏览器支持预设类型的图片编码格式；将目标图片的统一资源定位符url替换为图片编码格式；通过目标浏览器加载目标图片，并展示目标图片。
可见，通过本公开实施例提供的技术方案，在检测到目标浏览器不支持目标图片的图片格式，可以将目标图片的url替换为目标图片的预设类型的图片编码格式，由于目标浏览器支持预设类型的图片编码格式，因此，可以通过目标浏览器加载目标图片，并展示目标图片，这样，就可以让原本不支持webp格式的图片的浏览器能够兼容webp格式的图片，即能够成功加载目标图片，并正常显示webp格式的图片。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (8)

1.一种图片加载方法，其特征在于，包括：
在检测到目标浏览器需要加载目标图片时，获取所述目标图片的图片格式，所述目标图片的图片格式为webp格式；
通过懒加载方式将所述目标图片预先加载到所述目标浏览器缓存中；
启动所述目标浏览器中的目标异步线程；
通过所述目标异步线程调用预设webpJS，将所述目标浏览器缓存中的所述目标图片转换为base64；
将所述base64存储于所述目标浏览器缓存中；
在判定所述目标浏览器不支持所述图片格式时，获取所述目标图片的预设类型的图片编码格式，其中，所述目标浏览器支持所述预设类型的图片编码格式，所述预设类型的图片编码格式为base64；
将所述目标图片的统一资源定位符url替换为所述图片编码格式；
通过所述目标浏览器加载所述目标图片，并展示所述目标图片。
2.根据权利要求1所述的方法，其特征在于，所述获取所述目标图片的预设类型的编码格式，包括：
从所述目标浏览器缓存中获取所述base64。
3.根据权利要求1所述的方法，其特征在于，在通过所述目标浏览器加载所述目标图片，并展示所述目标图片之后，还包括：
删除目标浏览器缓存中的所述目标图片，以及所述base64。
4.一种图片加载装置，其特征在于，包括：
图片格式获取模块，被配置为执行在检测到目标浏览器需要加载目标图片时，获取所述目标图片的图片格式，所述目标图片的图片格式为webp格式；
图片预加载模块，被配置为执行在所述图片格式获取模块获取所述目标图片的预设类型的图片编码格式之前，通过懒加载方式将所述目标图片预先加载到所述目标浏览器缓存中；
线程启动模块，被配置为执行启动所述目标浏览器中的目标异步线程；
图片转化模块，被配置为执行通过所述目标异步线程调用预设webpJS，将所述目标浏览器缓存中的所述目标图片转换为base64；
base64存储模块，被配置为执行将所述base64存储于所述目标浏览器缓存中；
图片编码格式获取模块，被配置为执行在判定所述目标浏览器不支持所述图片格式时，获取所述目标图片的预设类型的图片编码格式，其中，所述目标浏览器支持所述预设类型的图片编码格式，所述预设类型的图片编码格式为base64；
统一资源定位符替换模块，被配置为执行将所述目标图片的统一资源定位符url替换为所述图片编码格式；
图片加载模块，被配置为执行通过所述目标浏览器加载所述目标图片，并展示所述目标图片。
5.根据权利要求4所述的装置，其特征在于，所述图片编码格式获取模块，被配置为执行：
从所述目标浏览器缓存中获取所述base64。
6.根据权利要求4或5所述的装置，其特征在于，还包括：
删除模块，被配置为执行在通过所述目标浏览器加载所述目标图片，并展示所述目标图片之后，删除目标浏览器缓存中的所述目标图片，以及所述base64。
7.一种电子设备，其特征在于，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现如权利要求1至3中任一项所述的图片加载方法。
8.一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至3中任一项所述的图片加载方法。
CN202010043718.4A 2020-01-15 2020-01-15 一种图片加载方法、装置、电子设备及存储介质 Active CN111259289B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN202010043718.4A CN111259289B (zh) 2020-01-15 2020-01-15 一种图片加载方法、装置、电子设备及存储介质
PCT/CN2021/072110 WO2021143828A1 (zh) 2020-01-15 2021-01-15 图片加载方法及电子设备
US17/862,594 US20220343056A1 (en) 2020-01-15 2022-07-12 Method for loading image and electronic device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010043718.4A CN111259289B (zh) 2020-01-15 2020-01-15 一种图片加载方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN111259289A CN111259289A (zh) 2020-06-09
CN111259289B true CN111259289B (zh) 2024-04-30

Family

ID=70948947

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010043718.4A Active CN111259289B (zh) 2020-01-15 2020-01-15 一种图片加载方法、装置、电子设备及存储介质

Country Status (3)

Country Link
US (1) US20220343056A1 (zh)
CN (1) CN111259289B (zh)
WO (1) WO2021143828A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111259289B (zh) * 2020-01-15 2024-04-30 北京达佳互联信息技术有限公司 一种图片加载方法、装置、电子设备及存储介质
CN112612964A (zh) * 2020-12-31 2021-04-06 武汉悦学帮网络技术有限公司 一种图片展示方法、装置、计算机设备和存储介质
CN112800372B (zh) * 2021-02-03 2023-06-13 网易（杭州）网络有限公司 页面加载方法、装置和电子设备
CN113836452A (zh) * 2021-07-12 2021-12-24 上海一谈网络科技有限公司 图片显示优化方法、系统、设备及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107066609A (zh) * 2017-04-27 2017-08-18 北京京东尚科信息技术有限公司 图片显示方法和装置
CN107577766A (zh) * 2017-09-04 2018-01-12 苏州英诺迈医学创新服务有限公司 一种网页3d目标的加载方法及装置
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9454607B1 (en) * 2010-12-10 2016-09-27 A9.Com, Inc. Image as database
US10121263B2 (en) * 2013-10-31 2018-11-06 Uc Mobile Co., Ltd. Methods and devices for image loading and methods and devices for video playback
US20210312474A1 (en) * 2019-09-17 2021-10-07 Brightedge Technologies, Inc. Dynamic General Configurability of Web Pages To Optimize Content for Search Performance and User Experiences
CN111259289B (zh) * 2020-01-15 2024-04-30 北京达佳互联信息技术有限公司 一种图片加载方法、装置、电子设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107066609A (zh) * 2017-04-27 2017-08-18 北京京东尚科信息技术有限公司 图片显示方法和装置
CN107577766A (zh) * 2017-09-04 2018-01-12 苏州英诺迈医学创新服务有限公司 一种网页3d目标的加载方法及装置
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质

Also Published As

Publication number Publication date
CN111259289A (zh) 2020-06-09
US20220343056A1 (en) 2022-10-27
WO2021143828A1 (zh) 2021-07-22

Similar Documents

Publication Publication Date Title
CN111259289B (zh) 一种图片加载方法、装置、电子设备及存储介质
CN105489194B (zh) 一种显示图像的方法和装置
CN104636106B (zh) 图片显示方法和装置、终端设备
CN106201734B (zh) 文件分享方法及装置
CN105808305B (zh) 静态资源的加载方法和装置
CN107220059B (zh) 应用界面的显示方法及装置
CN111314426A (zh) 网页资源获取方法、装置、电子设备及存储介质
CN105808304B (zh) 代码部署方法、装置及系统
CN104572230B (zh) 脚本文件的加载方法、脚本文件生成方法及装置
CN109992754B (zh) 文档处理方法及装置
CN109962958B (zh) 文档处理方法及装置
CN107123078A (zh) 显示图像的方法及装置
CN114339320B (zh) 一种虚拟资源处理方法、装置、设备及存储介质
CN112860625B (zh) 数据获取方法、数据存储方法、装置、设备及存储介质
CN105607958B (zh) 信息输入方法及装置
CN109981729B (zh) 文件处理方法、装置、电子设备及计算机可读存储介质
CN112416545A (zh) 一种任务处理方法及装置
CN113535161A (zh) 一种用户界面生成方法及装置
CN111724398A (zh) 一种图像显示方法及装置
CN107257384B (zh) 服务状态监控方法及装置
CN111753235B (zh) 一种页面加载的方法、装置及存储介质
CN110784721A (zh) 一种图片数据压缩方法、装置、电子设备及存储介质
CN111241097B (zh) 处理对象的方法、处理对象的装置及存储介质
CN111240757B (zh) 快应用控制方法、装置及存储介质
CN114727001B (zh) 一种处理图像数据的方法、装置及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant