CN114327720A - Picture loading method and device and storage medium - Google Patents
Picture loading method and device and storage medium Download PDFInfo
- Publication number
- CN114327720A CN114327720A CN202111621402.XA CN202111621402A CN114327720A CN 114327720 A CN114327720 A CN 114327720A CN 202111621402 A CN202111621402 A CN 202111621402A CN 114327720 A CN114327720 A CN 114327720A
- Authority
- CN
- China
- Prior art keywords
- picture
- loading
- link
- height
- width
- 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.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 186
- 238000000034 method Methods 0.000 claims abstract description 27
- 230000000007 visual effect Effects 0.000 claims abstract description 12
- 238000004891 communication Methods 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000013461 design Methods 0.000 description 20
- 230000006870 function Effects 0.000 description 10
- 238000011161 development Methods 0.000 description 7
- 230000003044 adaptive effect Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000006978 adaptation Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 239000002699 waste material Substances 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 230000003111 delayed effect Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000004904 shortening Methods 0.000 description 1
- 230000011664 signaling Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a picture loading method, a picture loading device and a storage medium, relates to the technical field of computers, and solves the problem that the size of a loaded picture is too large due to the difference of the sizes of the pictures loaded by components developed by different developers by intercepting a picture loading request in a mode of modifying picture links, so that the first screen loading time can be shortened. The method comprises the following steps: under the condition that a user accesses a page, acquiring a picture link corresponding to a target component, and intercepting a picture loading request corresponding to the target component; determining a link adjustment parameter based on the display width and the display height of the visual area; adjusting the picture link based on the link adjustment parameter to obtain an optimized picture link; and loading the pictures in the visible area based on the optimized picture links.
Description
Technical Field
The embodiment of the application relates to the technical field of computers, in particular to a picture loading method and device and a storage medium.
Background
In order to reduce the burden of page developers and improve the operation efficiency. At present, a series of page publishing components can be developed in advance by a page developer, and then an operator drags and fills in configuration of the components from the series of page publishing components according to actual business requirements to complete the publishing of the page.
However, due to different development experiences of different developers, different development habits, and other human factors, the sizes of pictures loaded by components developed by different developers vary greatly. If the size of the picture loaded by a certain component is too large, the first screen loading time of the page is too long when the user accesses the page configured by the component.
Disclosure of Invention
The application provides a picture loading method, a picture loading device and a storage medium, which can avoid the problem that the size of a loaded picture is too large due to the difference of the sizes of the pictures loaded by components developed by different developers, so that the first screen loading time can be shortened.
In order to achieve the purpose, the technical scheme is as follows:
in a first aspect, the present application provides a method for loading an image, including: under the condition that a user accesses a page, acquiring a picture link corresponding to a target component, and intercepting a picture loading request corresponding to the target component; determining a link adjustment parameter based on the display width and the display height of the visual area; adjusting the picture link based on the link adjustment parameter to obtain an optimized picture link; and loading the pictures in the visible area based on the optimized picture links.
According to the technical scheme, when a user accesses the page, the image loading request corresponding to the target component for configuring the page can be intercepted, the original image link can be adjusted according to the display width and the display height of the visual area after the image loading request is intercepted, and the size of the loaded image can be adjusted through adjustment of the original image link. It can be seen that the method and the device for modifying the picture link by intercepting the picture loading request can optimize the size of the picture loaded in the page, and the adjustment of the original picture link is performed based on the display width and the display height of the visible area, so that the size of the picture loaded based on the technical scheme provided by the application is suitable for the visible area of the page. Therefore, the problem that the size of the loaded picture is too large due to the difference of the sizes of the pictures loaded by the components developed by different developers can be avoided, and therefore the first screen loading time can be shortened.
Optionally, in a possible design, the "determining the link adjustment parameter based on the display width and the display height of the visible area" may include:
determining a picture loading width based on the display width and the width adjustment parameter; determining a picture loading height based on the display height and the height adjustment parameter;
determining link adjustment parameters based on the picture loading width and the picture loading height.
Optionally, in another possible design, before the "determining the link adjustment parameter based on the display width and the display height of the visible area", the application may further include:
acquiring the width and height of a DOM node of a page;
and under the condition that the width of the DOM node and the height of the DOM node are not 0, determining the display width according to the width of the DOM node, and determining the display height according to the height of the DOM node.
Optionally, in another possible design, before the "adjusting the picture link based on the link adjustment parameter", the application may further include:
determining a link adjustment parameter according to the height and the self-adaptive width of the DOM node under the condition of determining that the width of the DOM node is 0;
and under the condition that the height of the DOM node is determined to be 0, determining a link adjustment parameter according to the width and the self-adaptive height of the DOM node.
Optionally, in another possible design, the "determining the link adjustment parameter based on the display width and the display height of the visible area" includes:
in a case where it is determined that the browser of the page supports the WebP format, the link adjustment parameter is determined based on a suffix, a display width, and a display height of the WebP format.
Optionally, in another possible design manner, the "acquiring a picture link corresponding to a target component and intercepting a picture loading request corresponding to the target component" includes:
under the condition that the loading mode of the picture is based on src reference, traversing a DOM node of Vue to obtain a picture link, rewriting a src attribute through a preset API in Vue, and intercepting a picture loading request;
and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
Optionally, in another possible design, the "traversing the DOM node of Vue to obtain the picture link" includes:
and monitoring the loading of the DOM nodes based on the change observer, and traversing Vue the DOM nodes to obtain the picture links under the condition that the DOM nodes are determined to be within the height of the first screen.
In a second aspect, the present application provides a picture loading apparatus, including: the device comprises an interception module, a determination module, an adjustment module and an image loading module;
specifically, the intercepting module is used for acquiring a picture link corresponding to the target component and intercepting a picture loading request corresponding to the target component under the condition that a user accesses a page;
the determining module is used for determining link adjusting parameters based on the display width and the display height of the visual area;
the adjusting module is used for adjusting the picture link based on the link adjusting parameter determined by the determining module to obtain the optimized picture link;
and the picture loading module is used for loading the picture in the visible area based on the optimized picture link obtained by the adjustment of the adjustment module.
Optionally, in a possible design manner, the determining module is specifically configured to:
determining a picture loading width based on the display width and the width adjustment parameter; determining a picture loading height based on the display height and the height adjustment parameter;
determining link adjustment parameters based on the picture loading width and the picture loading height.
Optionally, in another possible design, the picture loading apparatus provided in the present application may further include: an acquisition module;
the acquisition module is used for acquiring the width and the height of the DOM node of the page before the determination module determines the link adjustment parameter based on the display width and the display height of the visual area;
and the determining module is also used for determining the display width according to the width of the DOM node and determining the display height according to the height of the DOM node under the condition that the width of the DOM node and the height of the DOM node are not 0.
Optionally, in another possible design manner, the determining module is further configured to determine, before the adjusting module adjusts the picture link based on the link adjustment parameter, the link adjustment parameter according to the height and the adaptive width of the DOM node under the condition that the width of the DOM node is determined to be 0;
and the determining module is also used for determining the link adjusting parameters according to the width and the self-adaptive height of the DOM node under the condition of determining that the height of the DOM node is 0.
Optionally, in another possible design manner, the determining module is further specifically configured to:
in a case where it is determined that the browser of the page supports the WebP format, the link adjustment parameter is determined based on a suffix, a display width, and a display height of the WebP format.
Optionally, in another possible design, the intercepting module is specifically configured to:
under the condition that the loading mode of the picture is based on src reference, traversing a DOM node of Vue to obtain a picture link, rewriting a src attribute through a preset API in Vue, and intercepting a picture loading request;
and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
Optionally, in another possible design, the intercepting module is further specifically configured to:
and monitoring the loading of the DOM nodes based on the change observer, and traversing Vue the DOM nodes to obtain the picture links under the condition that the DOM nodes are determined to be within the height of the first screen.
In a third aspect, the present application provides a picture loading apparatus, including a memory, a processor, a bus, and a communication interface; the memory is used for storing computer execution instructions, and the processor is connected with the memory through a bus; when the picture loading apparatus is running, the processor executes the computer execution instructions stored in the memory, so as to make the picture loading apparatus execute the picture loading method provided by the above first aspect.
Optionally, the image loading apparatus may further include a transceiver, and the transceiver is configured to perform steps of transceiving data, signaling, or information, for example, acquiring a width of a DOM node of a page and a height of the DOM node, under the control of the processor of the image loading apparatus.
Further optionally, the picture loading apparatus may be a physical machine for implementing loading of the picture in the page, or may be a part of the physical machine, for example, a chip system in the physical machine. The chip system is configured to support the picture loading apparatus to implement the functions related to the first aspect, for example, to receive, send or process data and/or information related to the picture loading method. The chip system includes a chip and may also include other discrete devices or circuit structures.
In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored, and when the instructions are executed by a computer, the computer is enabled to execute the picture loading method provided in the first aspect.
In a fifth aspect, the present application provides a computer program product comprising computer instructions which, when run on a computer, cause the computer to perform the picture loading method as provided in the first aspect.
It should be noted that all or part of the computer instructions may be stored on the computer readable storage medium. The computer-readable storage medium may be packaged with a processor of the image loading apparatus, or may be packaged with a processor of the image loading apparatus separately, which is not limited in this application.
For the descriptions of the second, third, fourth and fifth aspects in this application, reference may be made to the detailed description of the first aspect; in addition, for the beneficial effects described in the second aspect, the third aspect, the fourth aspect and the fifth aspect, reference may be made to beneficial effect analysis of the first aspect, and details are not repeated here.
In the present application, the names of the above-mentioned picture loading apparatuses do not limit the devices or the functional modules themselves, and in actual implementation, the devices or the functional modules may appear by other names. Insofar as the functions of the respective devices or functional modules are similar to those of the present application, they fall within the scope of the claims of the present application and their equivalents.
These and other aspects of the present application will be more readily apparent from the following description.
Drawings
Fig. 1 is a schematic flowchart of a picture loading method according to an embodiment of the present application;
fig. 2 is a schematic flowchart of another picture loading method according to an embodiment of the present application;
fig. 3 is a schematic flowchart of another image loading method according to an embodiment of the present application;
fig. 4 is a schematic flowchart of another image loading method according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of a picture loading apparatus according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of another picture loading apparatus according to an embodiment of the present application.
Detailed Description
The following describes in detail a picture loading method, an apparatus and a storage medium provided in an embodiment of the present application with reference to the drawings.
The term "and/or" herein is merely an association describing an associated object, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone.
The terms "first" and "second" and the like in the description and drawings of the present application are used for distinguishing different objects or for distinguishing different processes for the same object, and are not used for describing a specific order of the objects.
Furthermore, the terms "including" and "having," and any variations thereof, as referred to in the description of the present application, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus.
It should be noted that in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design described herein as "exemplary" or "e.g.," is not necessarily to be construed as preferred or advantageous over other embodiments or designs. Rather, use of the word "exemplary" or "such as" is intended to present concepts related in a concrete fashion.
In the description of the present application, the meaning of "a plurality" means two or more unless otherwise specified.
In order to reduce the burden of page developers and improve the operation efficiency. At present, a series of page publishing components can be developed in advance by a page developer, and then an operator drags and fills in configuration of the components from the series of page publishing components according to business requirements to complete the publishing of the page.
However, due to different development experiences of different developers, different development habits, and other human factors, the sizes of pictures loaded by components developed by different developers vary greatly. If the size of the picture loaded by a certain component is too large, the first screen loading time of the page is too long when the user accesses the page configured by the component.
In view of the problems in the prior art, the embodiment of the present application provides a picture loading method, which can optimize the size of a picture loaded in a page by intercepting a picture loading request and modifying a picture link, and can avoid the problem of an oversize picture loaded due to the difference in the sizes of pictures loaded by components developed by different developers, thereby shortening the first screen loading time.
The image loading method provided by the embodiment of the application can be applied to an image loading device, and the image loading device can be a physical machine (such as a server) or a Virtual Machine (VM) deployed on the physical machine. And intercepting a picture loading request to optimize the loading of the picture in the page by a picture loading device user under the condition that the user is determined to access the page.
The following describes in detail a picture loading method provided in an embodiment of the present application with reference to the accompanying drawings.
It should be noted that, in the embodiment of the present application, the processing procedure of the image loading apparatus for each target component of the configuration page is the same, and the following description takes the processing of one target component by the image loading apparatus as an example.
Referring to fig. 1, the image loading method provided in the embodiment of the present application includes S101 to S104:
s101, under the condition that a user accesses a page, acquiring a picture link corresponding to a target component, and intercepting a picture loading request corresponding to the target component.
For example, the page in the embodiment of the present application may be an H5(HTML5) page, and of course, in practical applications, the page may also be another page, which is not limited in the embodiment of the present application.
Since different developers may use different image loading manners when developing components, optionally, in the embodiment of the present application, when intercepting an image loading request, the intercepting manner of the image loading request may be selected according to the image loading manner.
In a possible implementation manner, in a case that the loading manner of the picture is based on the loading manner referred by src (image address referred by img tag), a Document Object Model (DOM) node of a (progressive framework for constructing a user Interface) may be traversed Vue to obtain a picture link, and an src attribute is rewritten through a preset Application Programming Interface (API) in Vue to intercept a picture loading request.
Vue is not only easy to get, but also convenient to integrate with third-party libraries or existing projects, and the running speed is fast, therefore, the development of pages can be realized based on Vue in the embodiment of the application. Element. Therefore, in the embodiment of the present application, the DOM node of Vue may be traversed to obtain the picture link, and the src attribute is rewritten by element.
In another possible implementation manner, in the case that the loading manner of the picture is a lazy loading (v-lazy) manner, a filter parameter in a delayed loading (lazyload) plug-in may be modified, and the picture loading request may be intercepted.
Optionally, in the embodiment of the present application, the DOM node is monitored based on a change viewer (music Observer), and when it is determined that the DOM node is within the height of the first screen, the DOM node of traversal Vue is traversed to obtain the picture link.
Because different developers have different development experiences and development habits and other human factors, some developers do not adopt v-lazy to load pictures when developing components, and thus some pictures which are not loaded on the first screen are also loaded. Loading of a non-first-screen picture can slow down the rendering speed of the first screen, and can also result in overlong first-screen loading time and waste of redundant bandwidth, thereby causing invalid occupation of a memory. For a non-first-screen picture, the embodiment of the application can monitor the loading of the DOM node based on the rotation Observer, and process the picture loading request after the user drags the scroll bar to the position of the first screen. Therefore, loading of non-first-screen pictures can be avoided, the first-screen rendering speed is improved, the first-screen loading time is further shortened, and meanwhile the occupied amount of resource bandwidth loading can be reduced.
And S102, determining link adjustment parameters based on the display width and the display height of the visual area.
S103, adjusting the picture link based on the link adjusting parameter to obtain the optimized picture link.
Optionally, in the embodiment of the present application, the link adjustment parameter may be determined in the following manner: determining a picture loading width based on the display width and the width adjustment parameter; determining a picture loading height based on the display height and the height adjustment parameter; determining link adjustment parameters based on the picture loading width and the picture loading height.
The width adjustment parameter and the height adjustment parameter may be adjustment parameters determined in advance manually, and the width adjustment parameter and the height adjustment parameter may be equal or different. Illustratively, the width adjustment parameter and the height adjustment parameter may both be 2.
Illustratively, the display width indicates a height of 200 × 150 (pixels), and the width adjustment parameter and the height adjustment parameter are both 2, so that the adjusted picture size is 400 × 300 (pixels). If the original picture is linked as: https:// cimg1.fenqile. com/…/demo. png, the link adjustment parameter may be 400x300, and the optimized picture link is: https:// cimgs1.fenqile. com/…/demo _400 × 300.png. When the visible area is a picture display area with a size of 200 × 150 (pixels), if the size of the loaded picture corresponding to a certain component is 1500 × 1000 (pixels), the first screen loading time is relatively long, and actually, only 400 × 300 (pixels) of pictures need to be loaded to be clear enough, and the network bandwidth is wasted due to the loading of an excessively large picture. Therefore, the size of the picture can be reduced by modifying the picture link mode, the first screen loading time is shortened, and the waste of network bandwidth is reduced.
Optionally, in this embodiment of the application, when it is determined that the browser of the page supports the WebP format, the link adjustment parameter may be determined based on a suffix, a display width, and a display height of the WebP format.
Illustratively, in the original picture link, there are: https:// cimg1.fenqile.com/…/demo.png, and the display width indicates a height of 200 x 150 (pixels), and when both the width adjustment parameter and the height adjustment parameter are 2, the link adjustment parameter may be 400 × 300.png.webpq80, and the optimized picture links as: https:// cimgs1.fenqile. com/…/demo _400 × 300.png. webpq80. Wherein q80 is the picture quality compressed into 80%. It can be seen that in the embodiment of the application, the picture can be compressed by adding the postfix in the WebP format to the picture link, so that the initial screen loading time can be further shortened, and the occupation of the network bandwidth can be reduced.
Optionally, the width and the height of the DOM node of the page may be obtained in the embodiment of the present application; and under the condition that the width of the DOM node and the height of the DOM node are not 0, determining the display width according to the width of the DOM node, and determining the display height according to the height of the DOM node.
In practical application, the situation that the width of the obtained DOM node or the height of the DOM node is 0 may occur due to reasons such as time delay of the calculation mode of the DOM node, so in the embodiment of the application, the display width and the display height of the visual area can be determined according to the width and the height of the DOM node under the condition that the width of the DOM node and the height of the DOM node are not 0, so that correct link adjustment parameters are determined, and optimized picture links are obtained.
Optionally, in this embodiment of the application, when the width of the DOM node is determined to be 0, the link adjustment parameter may be determined according to the height and the adaptive width of the DOM node; in the case where the height of the DOM node is determined to be 0, the link adjustment parameter may be determined according to the width and the adaptive height of the DOM node.
For example, if it is determined that the width of the DOM node is 0 and the height of the DOM node is height, and the web browser supports the WebP format, the link adjustment parameter may be nxheight. https:// cimg1.fenqile. com/…/demo. png, the optimized picture links may be: https:// cimgs1.fenqile. com/…/demo _ nxheight. png. webpq80. Where n represents the adaptation width.
For another example, if it is determined that the height of the DOM node is 0 and the width of the DOM node is width, and the web browser supports the WebP format, the link adjustment parameter may be width × n.png.webpq80, if the original image is linked as: https:// cimg1.fenqile. com/…/demo. png, the optimized picture links may be: https:// cimgs1.fenqile.com/…/demo _ widthxn.png.webpq80. Where n represents the adaptation height.
And S104, loading the picture in the visible area based on the optimized picture link.
According to the technical scheme, when a user accesses the page, the image loading request corresponding to the target component configured with the page can be intercepted, the original image link can be adjusted according to the display width and the display height of the visual area after the image loading request is intercepted, and the size of the loaded image can be adjusted by adjusting the original image link. It can be seen that, in the embodiment of the present application, the size of the picture loaded in the page can be optimized by intercepting the picture loading request and modifying the picture link, and since the adjustment of the original picture link is performed based on the display width and the display height of the visible area, the size of the picture loaded based on the technical scheme provided by the embodiment of the present application is adapted to the visible area of the page. Therefore, the problem that the size of the loaded picture is too large due to the difference of the sizes of the pictures loaded by the components developed by different developers can be solved, and therefore the first screen loading time can be shortened.
In summary, as shown in FIG. 2, step S101 in FIG. 1 can be replaced by steps S1011-S1012:
and S1011, determining the loading mode of the picture under the condition that the user accesses the page.
S1012, under the condition that the picture loading mode is based on src reference, traversing Vue DOM nodes to obtain picture links, rewriting src attributes through a preset API in Vue, and intercepting a picture loading request; and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
Alternatively, as shown in fig. 3, step S1012 in fig. 2 may be replaced with S1013:
s1013, when the picture loading mode is based on src reference, monitoring the loading of DOM nodes based on a change viewer, and when the DOM nodes are determined to be within the height of the first screen, traversing Vue to obtain picture links, rewriting src attributes through a preset API in Vue, and intercepting a picture loading request; and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
Optionally, as shown in fig. 4, an embodiment of the present application further provides a picture loading method, including S401 to S4010:
s401, under the condition that a user accesses a page, acquiring a picture link corresponding to a target component, and intercepting a picture loading request corresponding to the target component.
S402, judging whether the picture link is an optimized link or not.
In a case where it is determined that the link is optimized, step S4010 is performed; in the case where it is determined that it is not an optimized link, step S403 is performed.
S403, judging whether the browser of the page supports the WebP format.
In a case where it is determined that the browser of the page supports the WebP format, performing step S404; in a case where it is determined that the browser of the page does not support the WebP format, step S405 is performed.
And S404, adding a postfix in a WebP format after the picture is linked.
S405, judging whether the width of the DOM node of the page and the height of the DOM node are both 0.
Executing step S4010 when it is determined that the width of the DOM node of the page and the height of the DOM node are both 0; in a case where it is determined that the width of the DOM node of the page and the height of the DOM node are not both 0, step S406 is performed.
S406, judging whether one of the width of the DOM node and the height of the DOM node of the page is 0.
In a case where it is determined that one of the width of the DOM node and the height of the DOM node of the page is 0, performing step S408; in a case where it is determined that neither the width of the DOM node of the page nor the height of the DOM node is 0, step S407 is performed.
S407, determining the display width and the display height according to the width and the height of the DOM node, and determining a link adjustment parameter based on the display width and the display height of the visible area, and the width adjustment parameter and the height adjustment parameter.
After step S407, step S409 is executed.
S408, determining link adjustment parameters according to the height and the self-adaptive width of the DOM node under the condition of determining that the width of the DOM node is 0; and under the condition that the height of the DOM node is determined to be 0, determining a link adjustment parameter according to the width and the self-adaptive height of the DOM node.
And S409, adjusting the picture link based on the link adjustment parameter to obtain an optimized picture link, and loading the picture in the visible area based on the optimized picture link.
And S4010, returning picture links.
As shown in fig. 5, an embodiment of the present application further provides an image loading apparatus, where the image loading apparatus includes: the system comprises an interception module 11, a determination module 12, an adjustment module 13 and a picture loading module 14.
The intercepting module 11 executes S101 in the above method embodiment, the determining module 12 executes S102 in the above method embodiment, the adjusting module 13 executes S103 in the above method embodiment, and the picture loading module 14 executes S104 in the above method embodiment.
Specifically, the intercepting module 11 is configured to, when a user accesses a page, obtain a picture link corresponding to a target component, and intercept a picture loading request corresponding to the target component;
a determining module 12, configured to determine a link adjustment parameter based on the display width and the display height of the visible area;
the adjusting module 13 adjusts the picture link based on the link adjusting parameter determined by the determining module 12 to obtain an optimized picture link;
and the picture loading module 14 is configured to load the picture in the visible region based on the optimized picture link adjusted by the adjusting module 13.
Optionally, in a possible design, the determining module 12 is specifically configured to:
determining a picture loading width based on the display width and the width adjustment parameter; determining a picture loading height based on the display height and the height adjustment parameter;
determining link adjustment parameters based on the picture loading width and the picture loading height.
Optionally, in another possible design, the picture loading apparatus provided in the present application may further include: an acquisition module;
an obtaining module, configured to obtain a width of a DOM node and a height of the DOM node of the page before the determining module 12 determines the link adjustment parameter based on the display width and the display height of the visible area;
the determining module 12 is further configured to determine the display width according to the width of the DOM node and determine the display height according to the height of the DOM node when it is determined that the width of the DOM node and the height of the DOM node are not both 0.
Optionally, in another possible design manner, the determining module 12 is further configured to determine, before the adjusting module 13 adjusts the picture link based on the link adjustment parameter, a link adjustment parameter according to the height and the adaptive width of the DOM node under the condition that the width of the DOM node is determined to be 0;
the determining module 12 is further configured to determine a link adjustment parameter according to the width and the adaptive height of the DOM node when it is determined that the height of the DOM node is 0.
Optionally, in another possible design, the determining module 12 is further specifically configured to:
in a case where it is determined that the browser of the page supports the WebP format, the link adjustment parameter is determined based on a suffix, a display width, and a display height of the WebP format.
Optionally, in another possible design, the intercepting module 11 is specifically configured to:
under the condition that the loading mode of the picture is based on src reference, traversing a DOM node of Vue to obtain a picture link, rewriting a src attribute through a preset API in Vue, and intercepting a picture loading request;
and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
Optionally, in another possible design, the intercepting module 11 is further specifically configured to:
and monitoring the loading of the DOM nodes based on the change observer, and traversing Vue the DOM nodes to obtain the picture links under the condition that the DOM nodes are determined to be within the height of the first screen.
Optionally, the image loading apparatus may further include a storage module, where the storage module is configured to store a program code of the image loading apparatus.
As shown in fig. 6, an embodiment of the present application further provides a picture loading apparatus, which includes a memory 41, a processor 42(42-1 and 42-2), a bus 43, and a communication interface 44; the memory 41 is used for storing computer execution instructions, and the processor 42 is connected with the memory 41 through a bus 43; when the picture loading apparatus is running, the processor 42 executes the computer-executable instructions stored in the memory 41 to make the picture loading apparatus execute the picture loading method provided in the above-mentioned embodiment.
In particular implementations, processor 42 may include one or more Central Processing Units (CPUs), such as CPU0 and CPU1 shown in FIG. 6, as one embodiment. And as an example, the picture loading means may comprise a plurality of processors 42, such as the processor 42-1 and the processor 42-2 shown in fig. 6. Each of the processors 42 may be a single-Core Processor (CPU) or a multi-Core Processor (CPU). Processor 42 may refer herein to one or more devices, circuits, and/or processing cores that process data (e.g., computer program instructions).
The memory 41 may be, but is not limited to, a read-only memory 41 (ROM) or other type of static storage device that can store static information and instructions, a Random Access Memory (RAM) or other type of dynamic storage device that can store information and instructions, an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer. The memory 41 may be self-contained and coupled to the processor 42 via a bus 43. The memory 41 may also be integrated with the processor 42.
In a specific implementation, the memory 41 is used for storing data in the present application and computer-executable instructions corresponding to software programs for executing the present application. The processor 42 may load various functions of the apparatus by running or executing software programs stored in the memory 41, and calling data stored in the memory 41.
The communication interface 44 is any device, such as a transceiver, for communicating with other devices or communication networks, such as a control system, a Radio Access Network (RAN), a Wireless Local Area Network (WLAN), and the like. The communication interface 44 may include a receiving unit implementing a receiving function and a transmitting unit implementing a transmitting function.
The bus 43 may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an extended ISA (enhanced industry standard architecture) bus, or the like. The bus 43 may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown in FIG. 6, but this is not intended to represent only one bus or type of bus.
As an example, in conjunction with fig. 5, the acquiring module in the picture loading apparatus implements the same function as that implemented by the receiving unit in fig. 6, the adjusting module in the picture loading apparatus implements the same function as that implemented by the processor in fig. 6, and the storing module in the picture loading apparatus implements the same function as that implemented by the memory in fig. 6.
For the explanation of the related contents in this embodiment, reference may be made to the above method embodiments, which are not described herein again.
Through the above description of the embodiments, it is clear to those skilled in the art that, for convenience and simplicity of description, the foregoing division of the functional modules is merely used as an example, and in practical applications, the above function distribution may be completed by different functional modules according to needs, that is, the internal structure of the device may be divided into different functional modules to complete all or part of the above described functions. For the specific working processes of the system, the apparatus and the unit described above, reference may be made to the corresponding processes in the foregoing method embodiments, and details are not described here again.
The embodiment of the present application further provides a computer-readable storage medium, where instructions are stored in the computer-readable storage medium, and when the instructions are executed by a computer, the computer is enabled to execute the image loading method provided by the foregoing embodiment.
The computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a RAM, a ROM, an erasable programmable read-only memory (EPROM), a register, a hard disk, an optical fiber, a CD-ROM, an optical storage device, a magnetic storage device, any suitable combination of the foregoing, or any other form of computer readable storage medium known in the art. An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be integral to the processor. The processor and the storage medium may reside in an Application Specific Integrated Circuit (ASIC). In embodiments of the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The above description is only an embodiment of the present application, but the scope of the present application is not limited thereto, and any changes or substitutions within the technical scope of the present disclosure should be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A picture loading method is characterized by comprising the following steps:
under the condition that a user accesses a page, acquiring a picture link corresponding to a target component, and intercepting a picture loading request corresponding to the target component;
determining a link adjustment parameter based on the display width and the display height of the visual area;
adjusting the picture link based on the link adjustment parameter to obtain an optimized picture link;
and loading the picture in the visible area based on the optimized picture link.
2. The method for loading pictures according to claim 1, wherein the determining link adjustment parameters based on the display width and the display height of the visual area comprises:
determining a picture loading width based on the display width and the width adjustment parameter; determining a picture loading height based on the display height and the height adjustment parameter;
determining the link adjustment parameter based on the picture loading width and the picture loading height.
3. The picture loading method according to claim 1, wherein before determining the link adjustment parameter based on the display width and the display height of the visible region, the method further comprises:
acquiring the width of a DOM node of a page and the height of the DOM node;
and under the condition that the width of the DOM node and the height of the DOM node are not 0, determining the display width according to the width of the DOM node, and determining the display height according to the height of the DOM node.
4. The method for loading pictures according to claim 3, wherein before the adjusting the picture link based on the link adjustment parameter, the method further comprises:
determining the link adjustment parameter according to the height and the self-adaptive width of the DOM node under the condition that the width of the DOM node is determined to be 0;
and under the condition that the height of the DOM node is determined to be 0, determining the link adjusting parameter according to the width and the self-adaptive height of the DOM node.
5. The method for loading pictures according to claim 1, wherein the determining link adjustment parameters based on the display width and the display height of the visual area comprises:
determining the link adjustment parameter based on a suffix of the WebP format, the display width, and the display height, if it is determined that a browser of a page supports the WebP format.
6. The method according to any one of claims 1 to 5, wherein the obtaining of the picture link corresponding to the target component and the intercepting of the picture loading request corresponding to the target component include:
under the condition that the loading mode of the picture is based on src reference, traversing a DOM node of Vue to obtain the picture link, rewriting the src attribute through a preset API in Vue, and intercepting the picture loading request;
and under the condition that the loading mode of the picture is a lazy loading mode, modifying the filter parameter in the lazyload plug-in, and intercepting the picture loading request.
7. The method for loading pictures according to claim 6, wherein the step of obtaining the picture link from the DOM node of the traversal Vue comprises:
and monitoring the loading of the DOM nodes based on the change observer, and traversing Vue the DOM nodes to acquire the picture links under the condition that the DOM nodes are determined to be within the height of the first screen.
8. A picture loading apparatus, comprising:
the intercepting module is used for acquiring the picture link corresponding to the target component and intercepting the picture loading request corresponding to the target component under the condition that a user accesses a page;
the determining module is used for determining link adjusting parameters based on the display width and the display height of the visual area;
the adjusting module is used for adjusting the picture link based on the link adjusting parameter determined by the determining module to obtain an optimized picture link;
and the picture loading module is used for loading the picture in the visible area based on the optimized picture link obtained by the adjustment of the adjustment module.
9. The picture loading device is characterized by comprising a memory, a processor, a bus and a communication interface; the memory is used for storing computer execution instructions, and the processor is connected with the memory through the bus;
when the picture loading device runs, the processor executes the computer-executable instructions stored in the memory to cause the picture loading device to execute the picture loading method according to any one of claims 1 to 7.
10. A computer-readable storage medium having stored therein instructions, which when executed by a computer, cause the computer to execute the picture loading method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111621402.XA CN114327720A (en) | 2021-12-28 | 2021-12-28 | Picture loading method and device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111621402.XA CN114327720A (en) | 2021-12-28 | 2021-12-28 | Picture loading method and device and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114327720A true CN114327720A (en) | 2022-04-12 |
Family
ID=81014459
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111621402.XA Pending CN114327720A (en) | 2021-12-28 | 2021-12-28 | Picture loading method and device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114327720A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| TW201514842A (en) * | 2013-10-09 | 2015-04-16 | Yi-Chung Tsai | Method and system for displaying a web page on a device by automatically adapting the web page to the size of the browser of the device |
| CN106254217A (en) * | 2016-08-09 | 2016-12-21 | 百度在线网络技术（北京）有限公司 | Instant messaging comprises the treating method and apparatus of the message of URL address |
| CN107800769A (en) * | 2017-09-15 | 2018-03-13 | 北京麒麟合盛网络技术有限公司 | A kind of webpage deployment method and device |
| CN110929197A (en) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | Method and device for previewing and loading webpage picture |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
-
2021
- 2021-12-28 CN CN202111621402.XA patent/CN114327720A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| TW201514842A (en) * | 2013-10-09 | 2015-04-16 | Yi-Chung Tsai | Method and system for displaying a web page on a device by automatically adapting the web page to the size of the browser of the device |
| CN106254217A (en) * | 2016-08-09 | 2016-12-21 | 百度在线网络技术（北京）有限公司 | Instant messaging comprises the treating method and apparatus of the message of URL address |
| CN107800769A (en) * | 2017-09-15 | 2018-03-13 | 北京麒麟合盛网络技术有限公司 | A kind of webpage deployment method and device |
| CN110929197A (en) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | Method and device for previewing and loading webpage picture |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484383B (en) | Page rendering method, device and equipment | |
| CN106569856B (en) | A kind of loading method and device of application view resource file | |
| WO2016026384A1 (en) | Client page display method, device and system | |
| CN107463400B (en) | Hot updating method of mobile application and terminal equipment | |
| CN107818008B (en) | Page loading method and device | |
| CN111782339B (en) | Container creation method and device, electronic equipment and storage medium | |
| CN105989098B (en) | Icon package generation method and server, and icon processing method and system | |
| CN107798064B (en) | Page processing method, electronic device and computer readable storage medium | |
| US20160078010A1 (en) | Device And Method For Presenting Pictures | |
| CN109961331B (en) | Page processing method and system, computer system and readable storage medium | |
| WO2020042328A1 (en) | Page loading method, terminal, page response method and server | |
| CN111444455A (en) | Browser compatible method, system, computer device and storage medium | |
| US20170017380A1 (en) | Mobile enabling a web application developed without mobile rendering capabilities | |
| CN111274512A (en) | Page loading method, device and medium | |
| CA3154032A1 (en) | Page obtaining method, device and system | |
| CN112612982A (en) | Webpage preloading method and device and computer equipment | |
| CN109800370A (en) | Display methods, device, computer equipment and the storage medium of Webpage | |
| CN111079048A (en) | Page loading method and device | |
| CN109670126B (en) | Cross-border access acceleration method and device | |
| US9270727B1 (en) | Facilitating access to data in network page generation code | |
| CN109635263B (en) | Column width fixed display method and device based on WEB ultra-wide table and electronic equipment | |
| CN110909273B (en) | Page generation method and related system | |
| CN112926002A (en) | Service request processing method and device | |
| CN113467738A (en) | Screen adaptation method and device for display object, electronic equipment and storage medium | |
| CN114327720A (en) | Picture loading method and device 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 |