CN112800372A - Page loading method and device and electronic equipment - Google Patents
Page loading method and device and electronic equipment Download PDFInfo
- Publication number
- CN112800372A CN112800372A CN202110146604.7A CN202110146604A CN112800372A CN 112800372 A CN112800372 A CN 112800372A CN 202110146604 A CN202110146604 A CN 202110146604A CN 112800372 A CN112800372 A CN 112800372A
- Authority
- CN
- China
- Prior art keywords
- picture
- page
- webp format
- format
- pictures
- 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.)
- Granted
Links
Images
Classifications
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a page loading method, a page loading device and electronic equipment, wherein the method comprises the following steps: responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format; if the display of the pictures in the WebP format is supported, the pictures in the WebP format are loaded through the cascading style sheet of the designated page, and the loaded pictures are displayed in the designated page. In the method, picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a page are stored in a cascading style sheet corresponding to the page in advance; when the page is loaded, the picture displayed in the page can be acquired through the picture link stored in the cascading style sheet according to the picture format supported and displayed by the browser, and the picture link in the page resource does not need to be replaced, so that the page loading speed is increased, and the user experience is also improved.
Description
Technical Field
The invention relates to the technical field of page development, in particular to a page loading method and device and electronic equipment.
Background
With the increasing maturity of the display effect of the web pages, the pictures are more and more widely used in browsers. In traditional page development, pictures in a JPG format or a PNG format are usually used directly, but the compression efficiency of the pictures in the format is low, so that the network transmission quantity of the pictures is huge, and the experience of a user for browsing a webpage is poor.
The WebP format is a picture format capable of providing lossy compression and lossless compression at the same time, so that the picture in the WebP format can reduce the size of picture resources, the same picture display effect as a picture in a non-WebP format can be ensured, and the flow consumption for loading the picture resources can be saved. Therefore, a picture format conversion mode is provided in the related art, the mode detects a webpage resource corresponding to a webpage to be displayed by a browser through a resource loader, and if the resource loader detects that a picture link of a non-WebP format picture exists in the webpage resource and the browser supports displaying of the WebP format picture, the picture link of the non-WebP format picture in the webpage resource is replaced by the picture link of the WebP format picture. However, in this way, only the picture links in the page structure are modified, which results in that the picture links in the page resources need to be detected and replaced each time the page is loaded, and the page loading time is long, which affects the user experience.
Disclosure of Invention
The invention aims to provide a page loading method, a page loading device and electronic equipment, so that page loading time is shortened, and user experience is improved.
In a first aspect, the present invention provides a page loading method, including: responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format; if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet of the designated page, and displaying the loaded pictures in the designated page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a designated page.
In an optional embodiment, the cascading style sheet stores in advance a non-WebP format picture link corresponding to a picture that can be displayed on a designated page; the picture link in the WebP format corresponding to the picture which can be displayed by the designated page and stored in the cascading style sheet is obtained through the following modes: converting a picture in a non-WebP format in pictures which can be displayed on a designated page into a picture in a WebP format through a preset construction tool to obtain a picture link in the WebP format; and saving the picture link in the WebP format to a cascading style sheet.
In an alternative embodiment, the building tool comprises a Webpack tool.
In an optional implementation manner, the step of detecting whether the target browser supports displaying the picture in the WebP format includes: detecting whether a target browser can successfully draw the picture in the WebP format; and if the drawing is successful, determining that the target browser supports displaying the picture in the WebP format.
In an optional implementation manner, the step of detecting whether the target browser can successfully draw the picture in the WebP format includes: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; and if the picture in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the picture in the WebP format.
In an optional embodiment, the step of loading the picture in the WebP format through the cascading style sheet of the designated page if the step of supporting display of the picture in the WebP format includes: if the target browser supports displaying the pictures in the WebP format, adding a preset first class name to a page tag of a specified page; and loading the pictures in the WebP format through the cascading style sheet of the designated page according to the page label of the designated page.
In an optional embodiment, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the step of loading the picture in the WebP format through the cascading style sheet of the designated page according to the page tag of the designated page includes: searching a WebP format picture link corresponding to a first class name in a cascading style sheet according to the first class name carried in the page label; and loading the picture in the WebP format based on the picture link in the WebP format.
In an optional embodiment, the method further comprises: if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through a cascading style sheet of the designated page; and displaying the loaded pictures in a specified page.
In an optional embodiment, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the step of loading the picture in the non-WebP format through the cascading style sheet of the designated page if the target browser does not support the display of the picture in the WebP format includes: if the target browser does not support the display of the pictures in the WebP format, adding a preset second class name into a page tag of the specified page; searching a non-WebP format picture link corresponding to a second class name in a cascading style sheet according to the second class name carried in the page label; and loading the picture in the non-WebP format based on the picture link in the non-WebP format.
In an alternative embodiment, the non-WebP format includes a JPG format and/or a PNG format.
In a second aspect, the present invention provides a page loading apparatus, including: the detection module is used for responding to a loading request of a specified page in the target browser and detecting whether the target browser supports displaying a picture in a WebP format; the loading module is used for loading the pictures in the WebP format through a cascading style sheet of the designated page and displaying the loaded pictures in the designated page if the display of the pictures in the WebP format is supported; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a designated page.
In a third aspect, the present invention provides an electronic device comprising a processor and a memory, the memory storing machine executable instructions capable of being executed by the processor, the processor executing the machine executable instructions to implement the page loading method of any one of the preceding embodiments.
In a fourth aspect, the present invention provides a computer-readable storage medium having stored thereon computer-executable instructions that, when invoked and executed by a processor, cause the processor to implement the page loading method of any one of the preceding embodiments.
The embodiment of the invention has the following beneficial effects:
the invention provides a page loading method, a page loading device and electronic equipment.A page loading request of a specified page in a target browser is responded to at first, and whether the target browser supports displaying a picture in a WebP format or not is detected; if the display of the pictures in the WebP format is supported, the pictures in the WebP format are loaded through a cascading style sheet which stores the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and the loaded pictures are displayed in the designated page. In the method, picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, the picture displayed in the page can be acquired through the picture link stored in the cascading style sheet according to the picture format supported and displayed by the browser, and the picture link in the page resource does not need to be replaced, so that the page loading speed is increased, and the user experience is improved.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by the practice of the invention as set forth above.
In order to make the aforementioned and other objects, features and advantages of the present invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and other drawings can be obtained by those skilled in the art without creative efforts.
Fig. 1 is a flowchart of a page loading method according to an embodiment of the present invention;
fig. 2 is a flowchart of another page loading method according to an embodiment of the present invention;
fig. 3 is a flowchart of another page loading method according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of a page loading apparatus according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The method for converting the picture format comprises the steps of detecting a webpage resource corresponding to a webpage to be displayed by a browser through a resource loader, and replacing a picture link of a non-WebP format picture in the webpage resource with a picture link of a WebP format picture if the resource loader detects that the picture link of the non-WebP format picture exists in the webpage resource and the browser supports displaying of the WebP format picture. However, in this way, only the picture links in the page structure are modified, which results in that the picture links in the page resources need to be detected and replaced each time the page is loaded, and the page loading time is long, which affects the user experience.
Based on the above problems, embodiments of the present invention provide a page loading method and apparatus, and an electronic device. In order to facilitate understanding of the embodiment of the present invention, a page loading method disclosed in the embodiment of the present invention is first described in detail, and as shown in fig. 1, the method includes the following specific steps:
step S102, responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format.
The target browser may be a browser that the user wants to log in or a browser that is logging in, and the browser may be various browsers provided by various manufacturers. The designated page is a page (which can also be a webpage) which the user wants to access and can be displayed in the target browser; when a user accesses the specified page, the user may send a loading request for the specified page in the target browser through a terminal device (the terminal device may be a mobile terminal, such as a mobile phone or a tablet computer, or may be a computer), and when receiving the loading request, it may immediately detect whether the target browser supports displaying a picture in a WebP format.
In a specific implementation, a detection script may be set in the target browser, where the detection script is used to detect whether the target browser supports displaying pictures in the WebP format, and when a loading request for a specified page is received, the target browser may automatically execute the detection script to automatically detect whether the target browser supports displaying pictures in the WebP format. The detection codes in the detection scripts are set in advance by research and development personnel in the development process.
Step S104, if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet of a specified page, and displaying the loaded pictures in the specified page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a designated page.
The Cascading Style Sheets (CSSs) is generally a computer Language used for representing file styles such as HTML (HyperText Markup Language) or XML (Extensible Markup Language); the cascading style sheet can not only statically modify the webpage, but also dynamically format each element of the webpage by matching with various script languages, and can accurately control the typesetting of the element positions in the webpage at pixel level, support almost all font and size styles and have the capability of editing webpage objects and model styles; meanwhile, CSS describes the problem of how elements on a screen, paper, audio, etc. media should be rendered.
The contents stored in the cascading style sheet are preprocessed in a page development stage, and the preprocessed cascading style sheet stores the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed by the appointed page. The pretreatment process can be as follows: the method comprises the steps of converting pictures in non-WebP format in pictures which can be displayed on a designated page into pictures in WebP format, storing picture links corresponding to the pictures in WebP format and picture links corresponding to the pictures in non-WebP format into a cascading style sheet, and enabling the cascading style sheet to store the picture links corresponding to two picture formats of one picture. That is, the picture links stored in the cascading style sheet are divided into a part supporting the webP format and a part not supporting the webP format.
If the target browser supports displaying the pictures in the WebP format (or the target browser can use the pictures in the WebP format), the pictures in the WebP format can be loaded through the picture links in the WebP format stored in the cascading style sheet of the designated page, and then the loaded pictures in the WebP format are displayed in the designated page, so that the loading of the designated page is completed. If the target browser does not support the display of the pictures in the WebP format, the pictures in the non-WebP format can be loaded through the picture links in the non-WebP format stored in the cascading style sheet of the designated page, and then the loaded pictures in the non-WebP format are displayed in the designated page, so that the loading of the designated page is completed. Therefore, the method can be compatible with various complex environments, can improve the loading speed of the page to the maximum extent, and can reduce the traffic use.
The page loading method provided by the embodiment of the invention comprises the steps of firstly responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format; if the display of the pictures in the WebP format is supported, the pictures in the WebP format are loaded through a cascading style sheet which stores the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and the loaded pictures are displayed in the designated page. In the method, picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, the picture displayed in the page can be acquired through the picture link stored in the cascading style sheet according to the picture format supported and displayed by the browser, and the picture link in the page resource does not need to be replaced, so that the page loading speed is increased, and the user experience is improved.
The embodiment of the present invention further provides another page loading method, which is implemented on the basis of the above-mentioned embodiment, and the method mainly describes a specific process of detecting whether a target browser supports displaying a picture in a WebP format (specifically, implemented by the following step S202), and if supporting displaying a picture in a WebP format, loads a specific process of displaying a picture in a WebP format through a cascading style sheet of a designated page (specifically, implemented by the following steps S206 to S208); as shown in fig. 2, the method comprises the following specific steps:
step S202, responding to a loading request of a specified page in a target browser, and detecting whether the target browser can successfully draw a picture in a WebP format; if the drawing is successful, executing step S204; otherwise, step S210 is performed.
In specific implementation, a browser usually has a drawing function, when a loading request of a specified page is received, a preset detection script is automatically executed to detect whether a target browser can successfully draw a picture in a WebP format, and if the target browser can successfully draw the picture, the target browser is determined to support displaying the picture in the WebP format; and if the drawing cannot be successfully drawn, determining that the target browser does not support the display of the picture in the WebP format.
Specifically, the process of detecting whether the target browser can successfully draw the picture in the WebP format may include: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; if the pictures in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the pictures in the WebP format; and if the picture in the WebP format with the specified size cannot be drawn, determining that the target browser cannot successfully draw the picture in the WebP format. The preset drawing mode may be set according to research and development requirements, for example, a canvas mode or other drawing modes may be used; the specified size may be set according to the development requirement, for example, 1 pixel, 2 pixels or more may be set. In some embodiments, to enable detection of whether the fast target browser supports pictures in WebP format, the specified size may be set to a 1-pixel size.
In some embodiments, if the target browser is able to successfully draw a picture in WebP format, the target browser will return the first symbol; if the target browser cannot successfully draw the picture in the WebP format, the target browser returns a second symbol; and then determining whether the target browser supports displaying the pictures in the WebP format or not according to the symbols returned by the target browser. The first symbol and the second symbol are two different symbols, which may be set according to research and development requirements, and both the first symbol and the second symbol may be composed of numbers, characters, symbols, or character strings, for example, the first symbol may be set to "TRUE" or "support" or the like, and the second symbol may be set to "FALSE" or "nonsupport" or the like.
And step S204, determining that the target browser supports displaying the pictures in the WebP format.
Step S206, add the preset first category name to the page tag of the designated page.
When the current browser supports displaying a picture in a WebP format, a preset first class name is added to a page tag of a specified page, where the first class name may be a class name, a specific setting symbol of the first class name needs to be set according to the requirement of a research and development staff, and the first class name may be composed of one or more of symbols, numbers, letters, or character strings, and the setting rule of the first class name may be, for example: the English letters, the numbers and the names of the < - > and the _ > are adopted; and may begin with lower case letters and not with numbers, "-" and "_", the first category name may be set to "support" or "aabb- -" or the like.
In a specific implementation, the page tag may be an HTML tag, which is the most basic unit in an HTML language, where content of a page needs to be in the HTML tag, information such as title, character format, language, compatibility, keywords, description, and the like is displayed in a head tag of the page, and content of the page needs to be displayed needs to be nested in a body tag of the page.
Step S208, loading a picture in a WebP format through a cascading style sheet of the designated page according to the page tag of the designated page; step S212 is performed.
In a specific implementation, since the browser generally supports displaying the pictures in the non-WebP format, the cascading style sheet generally stores in advance the picture links in the non-WebP format corresponding to the pictures that can be displayed on the designated page. In order to implement the embodiment of the present invention, the image link in the WebP format corresponding to the image that can be displayed on the designated page needs to be stored in the cascading style sheet, and the specific setting manner may be: converting a picture in a non-WebP format in pictures which can be displayed on a designated page into a picture in a WebP format through a preset construction tool to obtain a picture link in the WebP format; and then saving the picture links in the WebP format to a cascading style sheet.
The building tool can be a Webpack tool, the Webpack tool is usually an open-source front-end packaging tool, the Webpack tool provides a modularization development mode lacking in front-end development, various static resources are regarded as modules, and optimized codes are generated from the modules. In the development process of using the construction tool, in order to implement a process of automatically converting a picture in a non-WebP format into a picture in a WebP format, a preset picture format conversion plug-in needs to be added in a plug-in list option (for example, a plug-in list option of the Webpack tool) of the construction tool, and the picture format conversion plug-in is arranged after the page plug-in.
The image links in the webP format can be automatically added into the cascading style sheet through the construction tool, the development personnel are not required to manually add the image links, the development personnel are not required to write codes to convert the images in the non-WebP format into the images in the WebP format, and the image format conversion plug-in the construction tool can be automatically completed, so that the labor cost is saved.
In a specific implementation, since the generation of the page is also generated by converting the page by using a page plug-in, according to the implementation logic sequence of the present invention, the picture format conversion plug-in needs to be executed after the page plug-in, so that the detection code for detecting the browser compatibility (that is, the detection code for detecting whether the browser supports displaying pictures in the WebP format) can be added to the page. In some embodiments, detection code to detect browser compatibility may be automatically added to the top-most head tag of a page at the time of build tool package build. The method can automatically detect the support condition of the browser to the webP format picture according to the detection code added by the page script, so that whether the webP format picture is used or not is determined, and the method is high in compatibility.
In some embodiments, the non-WebP format includes a JPG (joint photographic experts group) format and/or a PNG (Portable Network Graphics) format. That is, the non-WebP format may include only the JPG format, may include only the PNG format, and may include both the JPG format and the PNG format. In a specific implementation, the non-WebP format may further include other picture formats (e.g., gif formats), and the specific non-WebP format includes which formats are set according to development requirements, which are not listed here.
In some embodiments, the cascading style sheet further stores a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format, where the second class name may be a class name, the second class name is a class name different from the first class name, a specific symbol of the second class name is set in advance according to a research and development requirement, and the second class name may be composed of one or more of symbols, numbers, letters, or character strings, and the setting rule of the second class name may be, for example: the English letters, the numbers and the names of the < - > and the _ > are adopted; and may begin with lower case letters and not begin with numbers, "-" and "_", the second type name may be set to "nonsupport" or "ccdd- -" or the like.
In specific implementation, when the picture link in the WebP format is stored in the cascading style sheet, the picture link in the WebP format can carry the first type name, so that the picture link in the WebP format is marked by the first type name. Similarly, when the picture link in the non-WebP format is saved in the cascading style sheet, the picture link in the non-WebP format may carry a second type name, so as to mark the picture link in the non-WebP format by the second type name.
In the step S208, based on the first class name carried by the page tag of the designated page, the picture link in the WebP format corresponding to the first class name indicated by the page tag is searched in the cascading style sheet, and then the picture in the WebP format is loaded according to the picture link. After the loading is finished, the pictures displayed in the designated page are all in a WebP format, so that the loading speed of the page is increased.
Step S210, determining that the target browser does not support displaying the pictures in the WebP format, and loading the pictures in the non-WebP format through a cascading style sheet of a designated page; step S212 is performed.
If the target browser cannot successfully draw the picture in the WebP format, determining that the target browser does not support displaying the picture in the WebP format, and at the moment, loading the picture in the non-WebP format through a cascading style sheet of a designated page. After the loading is finished, the pictures displayed in the designated page are all in a non-WebP format, and the designated page can also be understood as using conventional pictures.
In step S212, the loaded picture is displayed in the designated page.
The non-webP format is taken as JPG/PNG as an example, and the embodiment of the invention is briefly described as follows: in the development process of using webpack, the JPG/PNG image is automatically converted into a webP format picture, and simultaneously, picture links in the cascading style sheet are divided into a webP supporting part (equivalent to a picture link in a WebP format) and a webP non-supporting part (equivalent to a picture link in a non-WebP format). Loading a detection code for judging whether the browser supports displaying of the webP format picture by the client into a page code, and directly loading contents of a cascading style sheet of the webP supporting part if the browser supports displaying of the webP format picture according to a detection judgment result of the client; if the browser does not support, the contents of the original JPG/PNG part cascading style sheet are used, so that various complex environments are compatible.
The page loading method comprises the steps of firstly responding to a loading request of a specified page in a target browser, and detecting whether the target browser can successfully draw a picture in a WebP format; if the drawing is successful, determining that the target browser supports displaying the picture in the WebP format, adding a preset first class name into a page tag of a specified page, and then loading the picture in the WebP format through a cascading style sheet of the specified page according to the page tag of the specified page; if the drawing cannot be successfully performed, determining that the target browser does not support the display of the pictures in the WebP format, and loading the pictures in the non-WebP format through a cascading style sheet of the designated page; and finally, displaying the loaded picture in a specified page. In the mode, if the browser supports displaying of the pictures in the webP format, the contents corresponding to the webP format are directly used in the cascading style sheet, so that the page loading speed is increased; if the browser does not support the display of the webP format picture, the original non-WebP format picture is still used, and the mode does not cause any damage to the page content and is beneficial to the stability of the page display.
The embodiment of the present invention further provides another page loading method, which is implemented on the basis of the above-mentioned embodiment, and the method mainly describes a specific process of loading a picture in a WebP format through a cascading style sheet of a designated page according to a page tag of the designated page under the condition that a picture link in a WebP format and a picture link in a non-WebP format, which correspond to a picture that can be displayed by the designated page, and a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format are stored in the cascading style sheet (specifically, implemented through the following step S308); as shown in fig. 3, the method comprises the following specific steps:
step S302, receiving a loading request of a specified page in a target browser.
Step S304, detecting whether the target browser supports displaying the picture in the WebP format; if so, go to step S306, otherwise, go to step S310.
When a loading request of a specified page is received in a target browser, whether the target browser supports displaying pictures in a WebP format or not is automatically detected. In a specific implementation, the detection method may be: drawing a picture in a webP format with the size of 1 pixel by using a canvas mode through a target browser, if the drawing is successful, the target browser supports the display of the picture in the WebP format, and the target browser returns a Boolean value 'TRUE'; if the rendering fails, the target browser does not support displaying pictures in WebP format, and the target browser returns a Boolean value of "FALSE".
In some embodiments, it may be decided to add a class name of the first class name or the second class name to the page tag according to a boolean value returned by the target browser, so that the subsequent step may determine which picture format picture to load according to the class name added in the page tag.
Step S306, adding the first class name to the page tag of the specified page.
Step S308, searching a picture link in a WebP format corresponding to the first class name in a cascading style sheet according to the first class name carried in the page label; loading a picture in a WebP format based on the picture link in the WebP format; step S314 is performed.
If the target browser supports displaying of the pictures in the WebP format, the first class name is added to a page tag of the designated page, then picture links in the WebP format corresponding to the first class name are searched in a cascading style sheet according to the first class name carried in the page tag, the position for storing the pictures in the WebP format is determined through the picture links in the WebP format, and the pictures in the WebP format are loaded from the position.
Step S310, adding the second class name to the page tag of the specified page.
Step S312, searching the picture link in the non-WebP format corresponding to the second class name in the cascading style sheet according to the second class name carried in the page label; loading a picture in a non-WebP format based on the picture link in the non-WebP format; step S314 is performed.
If the target browser does not support the display of the pictures in the WebP format, adding the second class name to the page tag of the designated page, searching the picture link in the non-WebP format corresponding to the second class name in the cascading style sheet according to the second class name carried in the page tag, determining the position for storing the pictures in the non-WebP format through the picture link in the non-WebP format, and loading the pictures in the non-WebP format from the position.
Step S314, displaying the loaded picture in a designated page.
The page loading method comprises the steps of firstly responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format; if so, adding the first class name into a page tag of the designated page, and searching a picture link in a WebP format corresponding to the first class name in the cascading style sheet according to the first class name carried in the page tag; loading a picture in a WebP format based on the picture link in the WebP format; if not, adding the second class name into a page tag of the designated page, and searching a non-WebP format picture link corresponding to the second class name in the cascading style sheet according to the second class name carried in the page tag; loading a picture in a non-WebP format based on the picture link in the non-WebP format; and then displaying the loaded pictures in a specified page. According to the mode, if the browser supports the use of the webP format, the style sheet content of the webP part is directly loaded, and if the browser does not support the use of the original picture part style sheet content, the method is compatible with various complex environments, the loading speed of the webpage is increased to the maximum extent, and the flow use is reduced.
Corresponding to the foregoing method embodiment, an embodiment of the present invention provides a page loading apparatus, as shown in fig. 4, where the apparatus includes:
and the detection module 40 is configured to detect whether the target browser supports displaying pictures in the WebP format in response to a loading request of a specified page in the target browser.
The loading module 41 is configured to, if the display of the pictures in the WebP format is supported, load the pictures in the WebP format through the cascading style sheet of the designated page, and display the loaded pictures in the designated page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a designated page.
The page loading device firstly responds to a loading request of a specified page in a target browser and detects whether the target browser supports displaying a picture in a WebP format; if the display of the pictures in the WebP format is supported, the pictures in the WebP format are loaded through a cascading style sheet which stores the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and the loaded pictures are displayed in the designated page. In the method, picture links in a WebP format and picture links in a non-WebP format corresponding to pictures which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, the picture displayed in the page can be acquired through the picture link stored in the cascading style sheet according to the picture format supported and displayed by the browser, and the picture link in the page resource does not need to be replaced, so that the page loading speed is increased, and the user experience is improved.
Specifically, the cascading style sheet pre-stores a non-WebP format picture link corresponding to a picture that can be displayed on a designated page; the device further comprises a picture link storage module, which is used for: converting a picture in a non-WebP format in pictures which can be displayed on a designated page into a picture in a WebP format through a preset construction tool to obtain a picture link in the WebP format; and saving the picture link in the WebP format to a cascading style sheet.
In particular implementations, the building tool includes a Webpack tool.
Further, the detecting module 40 is further configured to: detecting whether a target browser can successfully draw a picture in a WebP format; and if the drawing is successful, determining that the target browser supports displaying the picture in the WebP format.
Specifically, the detecting module 40 is further configured to: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; and if the picture in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the picture in the WebP format.
Further, the loading module 41 includes: the tag setting module is used for adding a preset first class name into a page tag of a specified page if the target browser supports displaying pictures in a WebP format; a picture acquisition module to: and loading the pictures in the WebP format through the cascading style sheet of the designated page according to the page label of the designated page.
Specifically, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the image acquisition module is further configured to: searching a WebP format picture link corresponding to a first class name in a cascading style sheet according to the first class name carried in the page label; and loading the picture in the WebP format based on the picture link in the WebP format.
Further, the loading module 41 is further configured to: if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through a cascading style sheet of the designated page; and displaying the loaded pictures in a specified page.
Specifically, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the loading module 41 is further configured to: if the target browser does not support the display of the pictures in the WebP format, adding a preset second class name into a page tag of the specified page; searching a non-WebP format picture link corresponding to the second class name in a cascading style sheet according to the second class name carried in the page label; and loading the picture in the non-WebP format based on the picture link in the non-WebP format.
In particular implementations, the non-WebP format includes a JPG format and/or a PNG format.
The page loading device provided by the embodiment of the present invention has the same implementation principle and technical effect as the page loading method embodiment, and for brief description, no mention is made in the device embodiment, and reference may be made to the corresponding contents in the method embodiment.
An embodiment of the present invention further provides an electronic device, as shown in fig. 5, the electronic device includes a processor 101 and a memory 100, where the memory 100 stores machine executable instructions that can be executed by the processor 101, and the processor 101 executes the machine executable instructions to implement the page loading method.
Further, the electronic device shown in fig. 5 further includes a bus 102 and a communication interface 103, and the processor 101, the communication interface 103, and the memory 100 are connected through the bus 102.
The memory 100 may include a high-speed Random Access Memory (RAM) and may further include a non-volatile memory (non-volatile memory), such as at least one disk memory. The communication connection between the network element of the system and at least one other network element is realized through at least one communication interface 103 (which may be wired or wireless), and the internet, a wide area network, a local network, a metropolitan area network, and the like can be used. The bus 102 may be an ISA bus, PCI bus, EISA bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one double-headed arrow is shown in FIG. 5, but this does not indicate only one bus or one type of bus.
The processor 101 may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware or instructions in the form of software in the processor 101. The processor 101 may be a general-purpose processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like; the device can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components.
The various methods, steps and logic blocks disclosed in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present invention may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The storage medium is located in the memory 100, and the processor 101 reads the information in the memory 100, and completes the steps of the method of the foregoing embodiment in combination with the hardware thereof.
The embodiment of the present invention further provides a computer-readable storage medium, where the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are called and executed by a processor, the computer-executable instructions cause the processor to implement the page loading method.
The page loading method and apparatus and the computer program product of the electronic device provided by the embodiments of the present invention include a computer-readable storage medium storing a program code, where instructions included in the program code may be used to execute the method described in the foregoing method embodiments, and specific implementations may refer to the method embodiments and are not described herein again.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicate orientations or positional relationships based on the orientations or positional relationships shown in the drawings, and are only for convenience of description and simplicity of description, but do not indicate or imply that the device or element being referred to must have a particular orientation, be constructed and operated in a particular orientation, and thus, should not be construed as limiting the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
Finally, it should be noted that: the above-mentioned embodiments are only specific embodiments of the present invention, which are used for illustrating the technical solutions of the present invention and not for limiting the same, and the protection scope of the present invention is not limited thereto, although the present invention is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive the technical solutions described in the foregoing embodiments or equivalent substitutes for some technical features within the technical scope of the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the embodiments of the present invention, and they should be construed as being included therein. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (13)
1. A page loading method, characterized in that the method comprises:
responding to a loading request of a specified page in a target browser, and detecting whether the target browser supports displaying a picture in a WebP format;
if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through the cascading style sheet of the specified page, and displaying the loaded pictures in the specified page; the cascading style sheet stores the picture link in the WebP format and the picture link in the non-WebP format corresponding to the pictures which can be displayed by the specified page.
2. The method according to claim 1, wherein the cascading style sheet pre-stores a non-WebP format picture link corresponding to a picture that can be displayed on the designated page;
the picture link in the WebP format corresponding to the picture which can be displayed by the designated page and stored in the cascading style sheet is obtained in the following way:
converting a picture in a non-WebP format in pictures which can be displayed on the designated page into a picture in the WebP format through a preset construction tool to obtain a picture link in the WebP format;
and saving the picture link in the WebP format to the cascading style sheet.
3. The method of claim 2, wherein the build tool comprises a Webpack tool.
4. The method according to claim 1, wherein the step of detecting whether the target browser supports displaying pictures in a WebP format comprises:
detecting whether the target browser can successfully draw the picture in the WebP format;
and if the drawing is successful, determining that the target browser supports displaying the picture in the WebP format.
5. The method of claim 4, wherein the step of detecting whether the target browser can successfully draw the picture in the WebP format comprises:
detecting whether the target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; and if the picture in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the picture in the WebP format.
6. The method of claim 1, wherein the step of loading the pictures in the WebP format through the cascading style sheet of the designated page if the step of displaying the pictures in the WebP format is supported comprises:
if the target browser supports displaying the pictures in the WebP format, adding a preset first class name to a page tag of the specified page;
and loading the pictures in the WebP format through the cascading style sheet of the specified page according to the page tag of the specified page.
7. The method of claim 6, wherein the cascading style sheet further comprises: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the step of loading the picture in the WebP format through the cascading style sheet of the designated page according to the page tag of the designated page comprises the following steps:
searching a picture link in the WebP format corresponding to a first class name in the cascading style sheet according to the first class name carried in the page label;
and loading the pictures in the WebP format based on the picture links in the WebP format.
8. The method of claim 1, further comprising:
if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through the cascading style sheet of the specified page; and displaying the loaded pictures in the specified page.
9. The method of claim 8, wherein the cascading style sheet further comprises: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format;
the step of loading the picture in the non-WebP format through the cascading style sheet of the specified page if the target browser does not support displaying the picture in the WebP format comprises the following steps:
if the target browser does not support displaying the pictures in the WebP format, adding a preset second class name to a page tag of the specified page;
searching the picture link in the non-WebP format corresponding to the second class name in the cascading style sheet according to the second class name carried in the page label;
and loading the picture in the non-WebP format based on the picture link in the non-WebP format.
10. The method of any of claims 1-9, wherein the non-WebP format comprises a JPG format and/or a PNG format.
11. An apparatus for page loading, the apparatus comprising:
the detection module is used for responding to a loading request of a specified page in a target browser and detecting whether the target browser supports displaying a picture in a WebP format;
the loading module is used for loading the pictures in the WebP format through the cascading style sheet of the specified page and displaying the loaded pictures in the specified page if the display of the pictures in the WebP format is supported; the cascading style sheet stores the picture link in the WebP format and the picture link in the non-WebP format corresponding to the pictures which can be displayed by the specified page.
12. An electronic device comprising a processor and a memory, the memory storing machine executable instructions executable by the processor, the processor executing the machine executable instructions to implement the page loading method of any one of claims 1 to 10.
13. A computer-readable storage medium having stored thereon computer-executable instructions which, when invoked and executed by a processor, cause the processor to implement the page loading method of any of claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110146604.7A CN112800372B (en) | 2021-02-03 | 2021-02-03 | Page loading method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110146604.7A CN112800372B (en) | 2021-02-03 | 2021-02-03 | Page loading method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112800372A true CN112800372A (en) | 2021-05-14 |
| CN112800372B CN112800372B (en) | 2023-06-13 |
Family
ID=75813840
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110146604.7A Active CN112800372B (en) | 2021-02-03 | 2021-02-03 | Page loading method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112800372B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113836452A (en) * | 2021-07-12 | 2021-12-24 | 上海一谈网络科技有限公司 | Picture display optimization method, system, equipment and storage medium |
| CN114095783A (en) * | 2021-11-29 | 2022-02-25 | 中国平安财产保险股份有限公司 | Picture uploading method and device, computer equipment and storage medium |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2014052960A (en) * | 2012-09-10 | 2014-03-20 | Ricoh Co Ltd | Image processing apparatus and program |
| CN108965430A (en) * | 2018-07-16 | 2018-12-07 | 深圳鼎盛电脑科技有限公司 | Image acquisition method, device, computer equipment and storage medium |
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN109525796A (en) * | 2018-12-12 | 2019-03-26 | 四川商通实业有限公司 | A kind of Webp picture format conversion method |
| CN110246266A (en) * | 2019-06-19 | 2019-09-17 | 深圳市丰巢科技有限公司 | A kind of information displaying method, device, equipment and medium |
| CN111104631A (en) * | 2019-11-30 | 2020-05-05 | 四川商通实业有限公司 | Webp picture format conversion method |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN112099790A (en) * | 2020-09-10 | 2020-12-18 | 北京百度网讯科技有限公司 | Method, device and equipment for determining page theme and storage medium |
-
2021
- 2021-02-03 CN CN202110146604.7A patent/CN112800372B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2014052960A (en) * | 2012-09-10 | 2014-03-20 | Ricoh Co Ltd | Image processing apparatus and program |
| CN108965430A (en) * | 2018-07-16 | 2018-12-07 | 深圳鼎盛电脑科技有限公司 | Image acquisition method, device, computer equipment and storage medium |
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN109525796A (en) * | 2018-12-12 | 2019-03-26 | 四川商通实业有限公司 | A kind of Webp picture format conversion method |
| CN110246266A (en) * | 2019-06-19 | 2019-09-17 | 深圳市丰巢科技有限公司 | A kind of information displaying method, device, equipment and medium |
| CN111104631A (en) * | 2019-11-30 | 2020-05-05 | 四川商通实业有限公司 | Webp picture format conversion method |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN112099790A (en) * | 2020-09-10 | 2020-12-18 | 北京百度网讯科技有限公司 | Method, device and equipment for determining page theme and storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113836452A (en) * | 2021-07-12 | 2021-12-24 | 上海一谈网络科技有限公司 | Picture display optimization method, system, equipment and storage medium |
| CN114095783A (en) * | 2021-11-29 | 2022-02-25 | 中国平安财产保险股份有限公司 | Picture uploading method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112800372B (en) | 2023-06-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8064727B2 (en) | Adaptive image maps | |
| US7954055B2 (en) | Systems and methods for content delivery over a wireless communication medium to a portable computing device | |
| CN112800372B (en) | Page loading method and device and electronic equipment | |
| CN103605502B (en) | Form page display method and server | |
| CN104050238A (en) | Map labeling method and map labeling device | |
| CN109492177B (en) | web page blocking method based on web page semantic structure | |
| CN113382083B (en) | Webpage screenshot method and device | |
| CN111708535A (en) | Image-text display control method and device and electronic equipment | |
| JP2023541186A (en) | Visualization page rendering method, device, equipment and storage medium | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| US20160012022A1 (en) | User terminal device and scroll method supporting high-speed web scroll of web document | |
| CN103823841A (en) | Method and device for increasing browsing speed for mobile terminal client | |
| CN111428162A (en) | Page screenshot method and device | |
| CN103136208B (en) | A kind of method of Showing Picture and device | |
| CN112417338A (en) | Page adaptation method, system and equipment | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN112612964A (en) | Picture display method and device, computer equipment and storage medium | |
| CN112906351A (en) | PDF document generation method and device | |
| US20140331117A1 (en) | Application-based dependency graph | |
| CN112187622A (en) | Instant message display method and device and server | |
| CN113127776A (en) | Breadcrumb path generation method and device and terminal equipment | |
| CN110990732A (en) | Loading method, device and equipment based on webpage and storage medium | |
| CN101233494B (en) | Plug-in module execution method, browser execution method, mailer execution method and terminal device | |
| CN110321506A (en) | Webpage data loading method, device, computer equipment and storage medium | |
| CN116070052A (en) | Interface data transmission method, device, terminal and storage medium |
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 |