WebP image loading method, system, device and medium for browser end

Abstract

The present invention discloses a method, system, device and medium for loading WebP images on a browser side, the method comprising the following steps: creating a WebP image based on a first detection function, detecting the browser's WebP image compatibility based on the first detection function and the WebP image; in response to the WebP image compatibility being compatible, calling a second identification adding function to add a support identification to the browser; introducing a javascript file to the browser based on the first detection function and the second identification adding function; controlling the browser to adaptively load WebP format images or WebP format background images according to the javascript file and image loading requirements; the present invention can detect whether the browser is compatible with the WebP image format, and select to load WebP format images or background images according to specific scenarios, without relying on a server, thereby reducing the coding difficulty of front-end developers.

Description

Technical Field

[0001] The present invention relates to the technical field of image loading, and in particular to a method, system, device and medium for loading WebP images on a browser side. Background Art

[0002] With the rapid development of Internet technology and the explosive growth of multimedia content, images have become an indispensable part of modern web pages. They not only enrich the visual performance of web pages, but also greatly improve the efficiency of information transmission. However, although traditional image formats such as JPEG and PNG have been widely used in web design, their compression efficiency and loading performance are no longer up to the standard when facing the efficient loading requirements of modern web pages, especially on mobile devices. These traditional images are often large in size and slow to load, which directly affects the user's browsing experience, especially when the network conditions are poor or the device performance is limited. This problem is particularly prominent.

[0003] To meet this challenge, the industry has introduced a new image format, WebP. With its excellent compression rate and image quality, WebP can significantly reduce the size of images while ensuring image clarity, thereby speeding up image loading and optimizing user experience. Especially on mobile devices, WebP format images can more efficiently utilize limited network bandwidth and device resources, providing users with a smoother web browsing experience.

[0004] However, despite the many advantages of the WebP format, its browser compatibility has become an issue that cannot be ignored. Currently, not all browsers support WebP format images, which to some extent limits the widespread application of WebP. To solve this problem, the industry has proposed two main solutions: (1) The server determines the browser compatibility and returns the image in the corresponding format: This method requires the server to determine whether the client browser supports the WebP format based on the request header information of the client browser, and decide what format of image to return accordingly. Although this method solves the compatibility problem of WebP to a certain extent, it requires the server to perform additional configuration and encoding work, which undoubtedly increases the development difficulty and cost for developers who are not familiar with server configuration.

[0005] (2) Use <picture>Elements and <source> Child elements: This method is implemented in HTML5 <picture>Elements and <source> The sub-element provides the browser with the ability to choose to load images of different formats. However, this method also has certain limitations. It can only be used to load image elements, but is not compatible with the loading of background images, which limits its application scenarios to a certain extent. In addition, using <picture>Elements also require developers to have a certain understanding of HTML and CSS, which increases the complexity of development.

[0006] In summary, although the industry has proposed some solutions to deal with the browser compatibility issues of the WebP format, these solutions have their own shortcomings and fail to fully meet the needs of modern web design for efficient loading and wide compatibility. Summary of the invention

[0007] The purpose of the present invention is to provide a method, system, device and medium for loading WebP images on a browser side, thereby solving all or one of the above-mentioned problems existing in the prior art.

[0008] In order to solve the above technical problems, the specific technical solutions of the present invention are as follows: In one aspect, the present invention provides a method for loading a WebP image on a browser, comprising the following steps: Compatibility testing steps: Setting a first detection function, creating a Webp picture based on the first detection function, and detecting the Webp picture compatibility of the browser based on the first detection function and the Webp picture; Steps to add a logo: Setting a second identification adding function, in response to the webp image compatibility being compatible, calling the second identification adding function to add a support identification for the browser; Function writing steps: Adding a function based on the first detection function and the second identification introduces a javascript file into the browser; Adaptive loading steps: According to the javascript file and the image loading requirements, the browser is controlled to adaptively load the WebP format image or the WebP format background image.

[0009] As an improved solution, the compatibility detection step further includes: Call the first detection function to pass in the return parameter; In the function body of the first detection function, a picture object is created through a constructor; Set a callback function for the picture object, and when the callback function is triggered, call back the returned parameters according to the width and height of the picture object; Set the src attribute of the picture object to a 1px*1px WebP picture in base64 format, triggering the callback function of the picture object; In response to the callback function calling back the returned parameter, it is determined that the webp image compatibility of the browser is compatible.

[0010] As an improved solution, the identification adding step further includes: Set window.supportWebp=true in the function body of the second flag adding function; Call the first code to add a class named supportWebp to the html element of the browser; The first code is: document.documentElement.classList.add('supportWebp').

[0011] As an improved solution, the function writing step further includes: The first detection function and the second identification adding function are introduced into the page element of the browser as javascript files.

[0012] As an improved solution, the function writing step further includes: Call the first detection function and pass the second identification adding function as an input parameter; Write the first detection function and the second identification adding function into a javascript file; Confirm the browser page that needs to load the WebP image, and introduce the javascript file into the element of the browser page.

[0013] As an improved solution, the adaptive loading step further includes: In response to the browser needing to use The element loads the WebP format image and adds an extra <script>元素，在标签中通过所述javascript文件判断全局属性supportWebp是否为true；动态修改所述元素的src属性所引用的图片地址。

[0014] 作为一种改进的方案，所述自适应加载步骤，进一步还包括：响应于所述浏览器需要在页面中加载WebP格式背景图，在<style>元素中通过<body>元素选择器设置background属性为png格式的背景图；通过<html>元素上的supportWebp类名和<body>元素选择器设置background属性为WebP格式背景图。

[0015] 另一方面，本发明还提供一种浏览器端用WebP图像加载系统，包括：兼容性检测模块，用于：设置第一检测函数，基于所述第一检测函数创建Webp图片，基于所述第一检测函数和所述Webp图片检测浏览器的webp图片兼容性；标识添加模块，用于：设置第二标识添加函数，响应于所述webp图片兼容性为兼容，调用所述第二标识添加函数为所述浏览器添加支持标识；函数写入模块，用于：基于所述第一检测函数和所述第二标识添加函数为所述浏览器引入javascript文件；自适应加载模块，用于：根据所述javascript文件以及图片加载需求，控制所述浏览器进行WebP格式图片或WebP格式背景图的自适应加载。

[0016] 另一方面，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述浏览器端用WebP图像加载方法的步骤。

[0017] 另一方面，本发明还提供一种计算机设备，所述计算机设备包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：所述存储器，用于存放计算机程序；所述处理器，用于通过运行所述存储器上所存放的程序来执行所述浏览器端用WebP图像加载方法的步骤。

[0018] 本发明技术方案的有益效果是：1.本发明所述的浏览器端用WebP图像加载方法，可以实现检测浏览器是否兼容WebP图片格式，并根据具体场景选择加载 WebP 格式的图片或背景图片，无需依赖服务器，降低了前端开发人员的编码难度，支持开发者根据实际应用场景的需求进行自主开发，具有较高的灵活性和适用性，弥补了现有技术的缺陷，具有较高的应用价值。

[0019] 2.本发明所述的浏览器端用WebP图像加载系统，可以通过系统模块的相互配合，进而实现本发明所述的浏览器端用WebP图像加载方法。

[0020] 3.本发明所述的计算机可读存储介质，可以实现引导系统模块进行配合，进而实现本发明所述的浏览器端用WebP图像加载方法，且本发明所述的计算机可读存储介质还有效提高所述浏览器端用WebP图像加载方法的可操作性。

[0021] 4.本发明所述的计算机设备，可以实现存储并执行所述计算机可读存储介质，进而实现本发明所述的浏览器端用WebP图像加载方法。附图说明

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

[0023] 图1是本发明实施例1所述浏览器端用WebP图像加载方法的流程示意图；图2是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S100以及步骤S200的部分实现代码示意图；图3是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S300的部分实现代码示意图；图4是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S401的部分实现代码示意图；图5是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S401的实现界面示意图；图6是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S402的部分实现代码示意图；图7是本发明实施例1所述浏览器端用WebP图像加载方法中步骤S407的实现界面示意图；图8是本发明实施例2所述浏览器端用WebP图像加载系统的架构示意图；图9是本发明实施例4所述计算机设备的结构示意图；附图中的标记说明如下：1501、处理器；1502、通信接口；1503、存储器；1504、通信总线。具体实施方式

[0024] 下面结合附图对本发明的较佳实施例进行详细阐述，以使本发明的优点和特征能更易于被本领域技术人员理解，从而对本发明的保护范围做出更为清楚明确的界定。

[0025] 在本发明的描述中，需要说明的是，本发明所描述的实施例是本发明一部分实施例，而不是全部的实施例；基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0026] 本文的说明书和权利要求书及上述附图中的术语"第一”、"第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本文的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语"包括”和"具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、装置、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。实施例1

[0027] 本实施例提供一种浏览器端用WebP图像加载方法，如图1~图7所示，包括以下步骤：S100、兼容性检测步骤：在本步骤中，设置checkWebp函数（即第一检测函数），基于checkWebp函数创建Webp图片，基于checkWebp函数和Webp图片检测浏览器的webp图片兼容性，具体如下：S101、声明checkWebp的函数；S102、调用checkWebp函数传入浏览器支持WebP时的回传参数fn，fn的类型为Function；S103、在checkWebp函数体中通过Image构造函数创建图片对象webImg；S104、设置webImg的回调函数onload；onload在触发时判断webImg的宽和高是否都是1，若都是1，则回调fn参数；S105、设置webImg的src属性为一个1px*1px的base64格式的WebP图片，进而触发webImg的onload函数，实现WebP图片的加载；S106、当回调fn参数时，判断浏览器的webp图片兼容性为兼容。

[0028] S200、标识添加步骤：在本步骤中，设置addSupport函数（第二标识添加函数），当webp图片兼容性为兼容时，调用addSupport函数为浏览器添加支持标识，具体如下：S201、声明addSupport函数；S202、在addSupport函数体中设置window.supportWebp=true；调用代码"document.documentElement.classList.add('supportWebp')”在html元素上添加名为supportWebp的class；在上述步骤中，基于checkWebp函数加载一个宽度和高度都是1px的base64格式的WebP图片，并在图片加载成功后，通过addSupport函数往浏览器的全局对象window下挂载一个supportWebp变量，在文档的根元素<html>上添加一个名为supportWebp的class.，进而确定浏览器支持加载Webp图片，并进行标识。

[0029] S300、函数写入步骤：在本步骤中，为了使浏览器页面能够根据应用场景进行WebP 格式的图片或背景图片的适应性加载，将checkWebp函数和addSupport函数作为javascript文件引入浏览器的页面元素中，具体如下：S301、调用checkWebp函数，将addSupport函数作为入参传入；S302、将前述步骤的checkWebp函数和addSupport函数写为一个javascript文件，如图2所示；S303、确认需要加载WebP图片的浏览器页面，并在该页面的<head>元素中引入前述javascript文件，如图3所示。

[0030] S400、自适应加载步骤：在本步骤中，浏览器根据引入的javascript文件以及图片加载需求，自适应进行WebP格式的图片或背景图的加载，具体步骤如下：S401、响应于需要在页面中使用元素加载WebP图片，执行如下操作：S4011、在页面中加入额外<script>元素，在标签中通过javascript判断全局属性supportWebp是否为true；S4012、动态的修改元素的src属性所引用的图片地址，如图4所示；最终，基于浏览器调试工具的Network选项卡观察，支持WebP格式的浏览器只会加载WebP格式的图片，如图5所示；S402、响应于需要在页面中加载WebP格式的背景图，执行如下操作：S4021、在<style>元素中通过<body>元素选择器设置background属性为png格式的背景图；S4022、通过<html>元素上的supportWebp类名和<body>元素选择器设置background属性为WebP格式的背景图，如图6所示；最终，基于浏览器调试工具的Network选项卡观察，支持WebP格式的浏览器只加载WebP格式的背景图，如图7所示。

[0031] 综上所述，本方法基于函数的调用，实现在浏览器端判断浏览器兼容性，并使支持WebP 格式的浏览器能够根据具体场景选择加载 WebP 格式的图片或背景图片。

[0032] 需要说明的是，上述举例仅仅是为了解释本发明，并不能因此限定本发明的保护范围。实施例2

[0033] 本实施例基于与实施例1中所述的一种浏览器端用WebP图像加载方法相同的发明构思，提供一种浏览器端用WebP图像加载系统，如图8所示，包括：兼容性检测模块，用于：设置第一检测函数，基于所述第一检测函数创建Webp图片，基于所述第一检测函数和所述Webp图片检测浏览器的webp图片兼容性；标识添加模块，用于：设置第二标识添加函数，响应于所述webp图片兼容性为兼容，调用所述第二标识添加函数为所述浏览器添加支持标识；函数写入模块，用于：基于所述第一检测函数和所述第二标识添加函数为所述浏览器引入javascript文件；自适应加载模块，用于：根据所述javascript文件以及图片加载需求，控制所述浏览器进行WebP格式图片或WebP格式背景图的自适应加载。实施例3

[0034] 本实施例提供一种计算机可读存储介质，包括：所述存储介质用于储存将上述实施例1所述的浏览器端用WebP图像加载方法实现所用的计算机软件指令，其包含用于执行上述为所述浏览器端用WebP图像加载方法所设置的程序；具体的，该可执行程序可以内置在实施例2所述的浏览器端用WebP图像加载系统中，这样，浏览器端用WebP图像加载系统就可以通过执行内置的可执行程序实现所述实施例1所述的浏览器端用WebP图像加载方法。

[0035] 此外，本实施例具有的计算机可读存储介质可以采用一个或多个可读存储介质的任意组合，其中，可读存储介质包括电、光、电磁、红外线或半导体的系统、装置或器件，或者以上任意组合。实施例4

[0036] 本实施例提供一种电子设备，如图9所示，电子设备可以包括：处理器1501、通信接口1502、存储器1503和通信总线1504，其中，处理器1501，通信接口1502，存储器1503通过通信总线1504完成相互间的通信。

[0037] 存储器1503，用于存放计算机程序；处理器1501，用于执行存储器1503上所存放的计算机程序时，实现上述实施例1中所述浏览器端用WebP图像加载方法的步骤。

[0038] 作为本发明的一种实施方式，上述终端提到的通信总线可以是外设部件互连标准(Peripheral Component Interconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustry Standard Architecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

[0039] 作为本发明的一种实施方式，通信接口用于上述终端与其他设备之间的通信。

[0040] 作为本发明的一种实施方式，存储器可以包括随机存取存储器(Random AccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

[0041] 作为本发明的一种实施方式，上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

[0042] 区别于现有技术，采用本申请一种浏览器端用WebP图像加载方法、系统、设备及介质，可以检测浏览器是否兼容WebP图片格式，并根据具体场景选择加载 WebP 格式的图片或背景图片，无需依赖服务器，降低了前端开发人员的编码难度，支持开发者根据实际应用场景的需求进行自主开发，具有较高的灵活性和适用性，弥补了现有技术的缺陷，具有较高的应用价值。

[0043] 应理解，在本文的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本文实施例的实施过程构成任何限定。

[0044] 还应理解，在本文实施例中，术语"和 / 或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系。例如，A和 / 或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符" / ”，一般表示前后关联对象是一种"或”的关系。

[0045] 本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本文的范围。

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

[0047] 在本文所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

[0048] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本文实施例方案的目的。

[0049] 另外，在本文各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

[0050] 所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本文的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本文各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims

1. A method for loading WebP images on a browser, characterized in that: The following steps are involved: Compatibility testing steps: Setting a first detection function, creating a Webp picture based on the first detection function, and detecting the Webp picture compatibility of the browser based on the first detection function and the Webp picture; Steps to add a logo: Setting a second identification adding function, in response to the webp image compatibility being compatible, calling the second identification adding function to add a support identification for the browser; Function writing steps: Adding a function based on the first detection function and the second identification introduces a javascript file into the browser; Adaptive loading steps: According to the javascript file and the image loading requirements, the browser is controlled to adaptively load the WebP format image or the WebP format background image.

2. The method for loading WebP images on a browser according to claim 1, wherein: The compatibility detection step further comprises: Call the first detection function to pass in the return parameter; In the function body of the first detection function, a picture object is created through a constructor; Set a callback function for the picture object, and when the callback function is triggered, call back the returned parameters according to the width and height of the picture object; Set the src attribute of the picture object to a 1px*1px WebP picture in base64 format, triggering the callback function of the picture object; In response to the callback function calling back the returned parameter, it is determined that the webp image compatibility of the browser is compatible.

3. The method for loading WebP images on a browser according to claim 1, wherein: The identification adding step further comprises: Set window.supportWebp=true in the function body of the second flag adding function; Call the first code to add a class named supportWebp to the html element of the browser; The first code is: document.documentElement.classList.add('supportWebp').

4. The method for loading WebP images on a browser according to claim 1, wherein: The function writing step further comprises: The first detection function and the second identification adding function are introduced into the page element of the browser as javascript files.

5. The method for loading WebP images on a browser according to claim 4, wherein: The function writing step further includes: Call the first detection function and pass the second identification adding function as an input parameter; Write the first detection function and the second identification adding function into a javascript file; Confirm the browser page that needs to load the WebP image, and introduce the javascript file into the element of the browser page.

6. The method for loading WebP images on a browser according to claim 1, wherein: The adaptive loading step further comprises: In response to the browser needing to use The element loads the WebP format image and adds an extra <script>元素，在标签中通过所述javascript文件判断全局属性supportWebp是否为true；动态修改所述元素的src属性所引用的图片地址。7.根据权利要求1所述的浏览器端用WebP图像加载方法，其特征在于：所述自适应加载步骤，进一步还包括：响应于所述浏览器需要在页面中加载WebP格式背景图，在<style>元素中通过<body>元素选择器设置background属性为png格式的背景图；通过<html>元素上的supportWebp类名和<body>元素选择器设置background属性为WebP格式背景图。8.一种浏览器端用WebP图像加载系统，其特征在于，包括：兼容性检测模块，用于：设置第一检测函数，基于所述第一检测函数创建Webp图片，基于所述第一检测函数和所述Webp图片检测浏览器的webp图片兼容性；标识添加模块，用于：设置第二标识添加函数，响应于所述webp图片兼容性为兼容，调用所述第二标识添加函数为所述浏览器添加支持标识；函数写入模块，用于：基于所述第一检测函数和所述第二标识添加函数为所述浏览器引入javascript文件；自适应加载模块，用于：根据所述javascript文件以及图片加载需求，控制所述浏览器进行WebP格式图片或WebP格式背景图的自适应加载。9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1~7中任一项所述浏览器端用WebP图像加载方法的步骤。10.一种计算机设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：所述存储器，用于存放计算机程序；所述处理器，用于通过运行所述存储器上所存放的程序来执行权利要求1~7中任一项所述浏览器端用WebP图像加载方法的步骤。< / script>

Images