Image loading method, device and storage medium

Abstract

The present application discloses a method, device and storage medium for loading an image, and relates to the field of computer technology. By intercepting an image loading request and modifying an image link, the problem of the image size being too large due to the difference in the image size loaded by components developed by different developers can be avoided, thereby shortening the first screen loading time. The method comprises: when a user accesses a page, obtaining an image link corresponding to a target component, and intercepting an image loading request corresponding to the target component; determining a link adjustment parameter based on the display width and display height of a visible area; adjusting the image link based on the link adjustment parameter to obtain an optimized image link; and loading an image in the visible area based on the optimized image link.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a method, device and storage medium for loading an image. Background Art

[0002] In order to reduce the burden on page developers and improve operational efficiency, currently, page developers can develop a series of page publishing components in advance, and then operators can drag and drop components and fill in configurations from a series of page publishing components according to actual business needs to complete page publishing.

[0003] However, due to different development experience, development habits and other human factors of different developers, the sizes of images loaded by components developed by different developers vary greatly. If the size of the image loaded by a component is too large, it will cause the first screen loading time of the page to be too long when the user visits the page configured by the component. Summary of the invention

[0004] The present application provides a method, device and storage medium for loading an image, which can avoid the problem of the loaded image size being too large due to the difference in image sizes loaded by components developed by different developers, thereby shortening the first screen loading time.

[0005] In order to achieve the above objectives, this application adopts the following technical solutions:

[0006] In a first aspect, the present application provides an image loading method, comprising: when a user visits a page, obtaining an image link corresponding to a target component, and intercepting an image loading request corresponding to the target component; determining a link adjustment parameter based on a display width and a display height of a visible area; adjusting the image link based on the link adjustment parameter to obtain an optimized image link; and loading an image in the visible area based on the optimized image link.

[0007] In the technical solution provided by the present application, when a user accesses a page, the image loading request corresponding to the target component configuring the page can be intercepted. After intercepting the image loading request, the original image link can be adjusted according to the display width and display height of the visible area. By adjusting the original image link, the size of the loaded image can be adjusted. It can be seen that the present application can optimize the size of the image loaded in the page by modifying the image link by intercepting the image loading request. Since the adjustment of the original image link is based on the display width and display height of the visible area, the size of the image loaded based on the technical solution provided by the present application is adapted to the visible area of ​​the page. Therefore, the present application can avoid the problem of excessive size of the loaded image due to the difference in the size of the image loaded by components developed by different developers, thereby shortening the first screen loading time.

[0008] Optionally, in a possible design, the above “determining the link adjustment parameter based on the display width and display height of the visible area” may include:

[0009] Determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter;

[0010] Determine link adjustment parameters based on image loading width and image loading height.

[0011] Optionally, in another possible design, before the above “determining the link adjustment parameter based on the display width and display height of the visible area”, the present application may further include:

[0012] Get the width and height of the DOM node of the page;

[0013] When it is determined that both the width of the DOM node and the height of the DOM node are not 0, the display width is determined according to the width of the DOM node, and the display height is determined according to the height of the DOM node.

[0014] Optionally, in another possible design, before the above “adjusting the image link based on the link adjustment parameter”, the application may further include:

[0015] When it is determined that the width of the DOM node is 0, the link adjustment parameter is determined according to the height and adaptive width of the DOM node;

[0016] When it is determined that the height of the DOM node is 0, the link adjustment parameter is determined according to the width and the adaptive height of the DOM node.

[0017] Optionally, in another possible design, the above “determining the link adjustment parameter based on the display width and display height of the visible area” includes:

[0018] When it is determined that the browser of the page supports the WebP format, the link adjustment parameters are determined based on the suffix, display width, and display height of the WebP format.

[0019] Optionally, in another possible design, the above-mentioned “obtaining the image link corresponding to the target component and intercepting the image loading request corresponding to the target component” includes:

[0020] When the image is loaded based on the src reference, traverse the DOM node of Vue to obtain the image link, and rewrite the src attribute through the preset API in Vue to intercept the image loading request;

[0021] When the image is loaded in lazy loading mode, modify the filter parameters in the lazyload plug-in to intercept the image loading request.

[0022] Optionally, in another possible design, the above “traversing Vue's DOM nodes to obtain image links” includes:

[0023] Based on the change observer, the loading of DOM nodes is monitored. When the DOM nodes are determined to be within the first screen height, the DOM nodes of Vue are traversed to obtain the image links.

[0024] In a second aspect, the present application provides a picture loading device, including: an interception module, a determination module, an adjustment module, and a picture loading module;

[0025] Specifically, the interception module is used to obtain the image link corresponding to the target component and intercept the image loading request corresponding to the target component when the user accesses the page;

[0026] A determination module, used to determine link adjustment parameters based on a display width and a display height of a visible area;

[0027] An adjustment module adjusts the image link based on the link adjustment parameter determined by the determination module to obtain an optimized image link;

[0028] The image loading module is used to load images in the visible area based on the optimized image link adjusted by the adjustment module.

[0029] Optionally, in a possible design, the determination module is specifically used for:

[0030] Determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter;

[0031] Determine link adjustment parameters based on image loading width and image loading height.

[0032] Optionally, in another possible design, the image loading device provided by the present application may further include: an acquisition module;

[0033] The acquisition module is used to acquire the width and height of the DOM node of the page before the determination module determines the link adjustment parameter based on the display width and display height of the visible area;

[0034] The determination module is further used 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 both the width of the DOM node and the height of the DOM node are not 0.

[0035] Optionally, in another possible design, the determination module is further configured to determine the link adjustment parameter according to the height and adaptive width of the DOM node when it is determined that the width of the DOM node is 0 before the adjustment module adjusts the image link based on the link adjustment parameter;

[0036] The determination module is further used to determine the link adjustment parameter according to the width and adaptive height of the DOM node when it is determined that the height of the DOM node is 0.

[0037] Optionally, in another possible design, the determination module is further used to:

[0038] When it is determined that the browser of the page supports the WebP format, the link adjustment parameters are determined based on the suffix, display width, and display height of the WebP format.

[0039] Optionally, in another possible design, the interception module is specifically used for:

[0040] When the image is loaded based on the src reference, traverse the DOM node of Vue to obtain the image link, and rewrite the src attribute through the preset API in Vue to intercept the image loading request;

[0041] When the image is loaded in lazy loading mode, modify the filter parameters in the lazyload plug-in to intercept the image loading request.

[0042] Optionally, in another possible design, the interception module is further used to:

[0043] Based on the change observer, the loading of DOM nodes is monitored. When the DOM nodes are determined to be within the first screen height, the DOM nodes of Vue are traversed to obtain the image links.

[0044] In a third aspect, the present application provides an image loading device, comprising a memory, a processor, a bus and a communication interface; the memory is used to store computer execution instructions, and the processor is connected to the memory through a bus; when the image loading device is running, the processor executes the computer execution instructions stored in the memory, so that the image loading device executes the image loading method provided in the first aspect above.

[0045] Optionally, the image loading device may further include a transceiver, which is used to execute the steps of sending and receiving data, signaling or information under the control of the processor of the image loading device, for example, obtaining the width and height of the DOM node of the page.

[0046] Further optionally, the image loading device may be a physical machine for implementing the loading of images in a page, or may be a part of a physical machine, for example, a chip system in a physical machine. The chip system is used to support the image loading device to implement the functions involved in the first aspect, for example, receiving, sending or processing the data and / or information involved in the above-mentioned image loading method. The chip system includes a chip, and may also include other discrete devices or circuit structures.

[0047] In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored. When a computer executes the instructions, the computer executes the image loading method provided in the first aspect.

[0048] In a fifth aspect, the present application provides a computer program product, which includes computer instructions. When the computer instructions are executed on a computer, the computer executes the image loading method provided in the first aspect.

[0049] It should be noted that the above computer instructions may be stored in whole or in part on a computer-readable storage medium, wherein the computer-readable storage medium may be packaged together with the processor of the image loading device, or may be packaged separately from the processor of the image loading device, which is not limited in this application.

[0050] The description of the second, third, fourth and fifth aspects of the present application can refer to the detailed description of the first aspect; and the beneficial effects of the description of the second, third, fourth and fifth aspects can refer to the beneficial effect analysis of the first aspect, which will not be repeated here.

[0051] In this application, the name of the above-mentioned image loading device does not limit the device or functional module itself. In actual implementation, these devices or functional modules may appear with other names. As long as the functions of each device or functional module are similar to those of this application, they fall within the scope of the claims of this application and their equivalent technologies.

[0052] These and other aspects of the present application will become more apparent from the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 A schematic diagram of a process of loading an image provided in an embodiment of the present application;

[0054] Figure 2 A flowchart of another method for loading pictures provided in an embodiment of the present application;

[0055] Figure 3 A flowchart of another method for loading pictures provided in an embodiment of the present application;

[0056] Figure 4 A flowchart of another method for loading pictures provided in an embodiment of the present application;

[0057] Figure 5 A schematic diagram of the structure of a picture loading device provided in an embodiment of the present application;

[0058] Figure 6 A schematic diagram of the structure of another image loading device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0059] The following is a detailed description of the image loading method, device and storage medium provided in the embodiments of the present application in conjunction with the accompanying drawings.

[0060] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0061] The terms "first" and "second" and the like in the specification and drawings of this application are used to distinguish different objects, or to distinguish different processing of the same object, rather than to describe a specific order of objects.

[0062] In addition, the terms "including" and "having" and any variations thereof mentioned in the description of the present application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include other steps or units that are not listed, or may optionally include other steps or units that are inherent to these processes, methods, products or devices.

[0063] 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 descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0064] In the description of the present application, unless otherwise specified, “plurality” means two or more.

[0065] In order to reduce the burden on page developers and improve operational efficiency, currently, page developers can develop a series of page publishing components in advance, and then operators can drag and drop components and fill in configurations from a series of page publishing components according to business needs to complete page publishing.

[0066] However, due to different development experience, development habits and other human factors of different developers, the sizes of images loaded by components developed by different developers vary greatly. If the size of the image loaded by a component is too large, it will cause the first screen loading time of the page to be too long when the user visits the page configured by the component.

[0067] In response to the problems existing in the above-mentioned prior art, an embodiment of the present application provides an image loading method, which can optimize the size of the image loaded in the page by intercepting the image loading request and modifying the image link. This can avoid the problem of the loaded image size being too large due to the difference in the image size loaded by components developed by different developers, thereby shortening the first screen loading time.

[0068] The image loading method provided in the embodiment of the present application can be applied to an image loading device, which can be a physical machine (such as a server) or a virtual machine (VM) deployed on a physical machine. When the user of the image loading device determines that a user has accessed a page, the image loading request is intercepted to optimize the loading of the image in the page.

[0069] The image loading method provided in the embodiment of the present application is described in detail below with reference to the accompanying drawings.

[0070] It should be noted that the processing process of the image loading device for each target component of the configuration page in the embodiment of the present application is the same, and the processing of a target component by the image loading device is taken as an example for explanation below.

[0071] Reference Figure 1 , the picture loading method provided in the embodiment of the present application includes S101-S104:

[0072] S101. When a user accesses a page, obtain an image link corresponding to a target component, and intercept an image loading request corresponding to the target component.

[0073] Exemplarily, the page in the embodiment of the present application may be an H5 (HTML5) page. Of course, in actual applications, it may also be other pages, and the embodiment of the present application does not limit this.

[0074] Since different developers may select different image loading methods when developing components, the embodiment of the present application may optionally select a method for intercepting image loading requests based on the image loading method when intercepting image loading requests.

[0075] In one possible implementation, when the image is loaded based on the src (image address referenced by the img tag) reference, the Document Object Model (DOM) node of Vue (a progressive framework for building user interfaces) can be traversed to obtain the image link, and the src attribute can be rewritten through the preset Application Programming Interface (API) in Vue to intercept the image loading request.

[0076] Vue is not only easy to use, but also easy to integrate with third-party libraries or existing projects, and it runs fast. Therefore, in the embodiment of the present application, the development of pages can be implemented based on Vue. Element.prototype.setAttribute is an API for DOM object operations in Vue, which can be used to intercept and rewrite tag attributes. Therefore, in the embodiment of the present application, the DOM node of Vue can be traversed to obtain the image link, and the src attribute can be rewritten through Element.prototype.setAttribute in Vue to intercept the image loading request.

[0077] In another possible implementation, when the image loading method is lazy loading (v-lazy), the filter parameters in the lazyload plug-in can be modified to intercept the image loading request.

[0078] Optionally, the embodiment of the present application can monitor the loading of DOM nodes based on a mutation observer, and when it is determined that the DOM nodes are within the height of the first screen, traverse the DOM nodes of Vue to obtain image links.

[0079] Due to the different development experience and habits of different developers and other human factors, some developers did not use v-lazy to perform lazy loading of images when developing components. In this way, some images that are not loaded on the first screen will also be loaded. The loading of non-first screen images will slow down the rendering speed of the first screen and cause the first screen loading time to be too long. At the same time, it will consume excess bandwidth and cause invalid memory usage. For non-first screen images, the embodiment of the present application can monitor the loading of DOM nodes based on Mutation Observer, and wait until the user drags the scroll bar to the position of the first screen before processing the image loading request. In this way, the loading of non-first screen images can be avoided, the first screen rendering speed can be improved, the first screen loading time can be further shortened, and the resource bandwidth loading occupancy can be reduced.

[0080] S102: Determine a link adjustment parameter based on the display width and display height of the visible area.

[0081] S103: Adjust the image link based on the link adjustment parameter to obtain an optimized image link.

[0082] Optionally, the embodiment of the present application can determine the link adjustment parameters in the following manner: determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter; determine the link adjustment parameters based on the image loading width and the image loading height.

[0083] The width adjustment parameter and the height adjustment parameter may be adjustment parameters determined in advance by humans, and the width adjustment parameter and the height adjustment parameter may be equal or different. For example, the width adjustment parameter and the height adjustment parameter may both be 2.

[0084] Exemplarily, the display width * display height is 200*150 (pixels), the width adjustment parameter and the height adjustment parameter are both 2, then the adjusted image size is 400*300 (pixels). If the original image link is: https: / / cimg1.fenqile.com / … / demo.png, then the link adjustment parameter can be 400x300, and the optimized image link is: https: / / cimgs1.fenqile.com / … / demo_400x300.png. When the visible area is a picture display area 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 will be relatively long, but in fact only 400*300 (pixels) pictures need to be loaded to be clear enough, and loading too large pictures will cause a waste of network bandwidth. It can be seen that the embodiment of the present application can reduce the size of the picture, shorten the first screen loading time, and reduce the waste of network bandwidth by modifying the picture link.

[0085] Optionally, in an embodiment of the present application, when it is determined that the browser of the page supports the WebP format, the link adjustment parameters can be determined based on the suffix, display width, and display height of the WebP format.

[0086] For example, when the original image link is: https: / / cimg1.fenqile.com / … / demo.png, and the display width*display height is 200*150 (pixels), and the width adjustment parameter and the height adjustment parameter are both 2, the link adjustment parameter can be 400x300.png.webp?q80, and the optimized image link is: https: / / cimgs1.fenqile.com / … / demo_400x300.png.webp?q80. Among them, q80 means that the image quality is compressed to 80%. It can be seen that in the embodiment of the present application, by adding the WebP format suffix to the image link, the image can be compressed, which can further shorten the first screen loading time and reduce the network bandwidth occupation.

[0087] Optionally, an embodiment of the present application can obtain the width of the DOM node and the height of the DOM node of the page; when it is determined that the width of the DOM node and the height of the DOM node are not 0, the display width is determined according to the width of the DOM node, and the display height is determined according to the height of the DOM node.

[0088] In actual applications, the width of the DOM node or the height of the DOM node may be 0 due to reasons such as delays in the calculation method of the DOM node. Therefore, in an embodiment of the present application, when it is determined that the width of the DOM node and the height of the DOM node are not 0, the display width and display height of the visible area can be determined based on the width and height of the DOM node, thereby determining the correct link adjustment parameters and obtaining the optimized image link.

[0089] Optionally, in an embodiment of the present application, when the width of the DOM node is determined to be 0, the link adjustment parameters can be determined based on the height and adaptive width of the DOM node; when the height of the DOM node is determined to be 0, the link adjustment parameters can be determined based on the width and adaptive height of the DOM node.

[0090] 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.png.webp?q80, and if the original image link is: https: / / cimg1.fenqile.com / … / demo.png, the optimized image link may be: https: / / cimgs1.fenqile.com / … / demo_nxheight.png.webp?q80, where n represents the adaptive width.

[0091] For another example, if the height of the DOM node is determined to be 0 and the width of the DOM node is width, and the web browser supports the WebP format, the link adjustment parameter may be widthxn.png.webp?q80. If the original image link is: https: / / cimg1.fenqile.com / … / demo.png, the optimized image link may be: https: / / cimgs1.fenqile.com / … / demo_widthxn.png.webp?q80. Where n represents the adaptive height.

[0092] S104: Loading pictures in the visible area based on the optimized picture link.

[0093] In the technical solution provided by the embodiment of the present application, when a user accesses a page, the image loading request corresponding to the target component configuring the page can be intercepted. After intercepting the image loading request, the original image link can be adjusted according to the display width and display height of the visible area. By adjusting the original image link, the size of the loaded image can be adjusted. It can be seen that the embodiment of the present application can optimize the size of the image loaded in the page by intercepting the image loading request to modify the image link. Since the adjustment of the original image link is based on the display width and display height of the visible area, the size of the image loaded based on the technical solution provided by the embodiment of the present application is adapted to the visible area of ​​the page. Therefore, the embodiment of the present application can avoid the problem of the size of the loaded image being too large due to the difference in the size of the image loaded by the components developed by different developers, thereby shortening the first screen loading time.

[0094] Based on the above description, Figure 2 As shown, Figure 1 Step S101 in can be replaced by S1011-S1012:

[0095] S1011. When a user accesses a page, determine a method for loading an image.

[0096] S1012. When the image loading method is based on the src reference, traverse the DOM node of Vue to obtain the image link, and rewrite the src attribute through the preset API in Vue to intercept the image loading request; when the image loading method is lazy loading, modify the filter parameter in the lazyload plug-in to intercept the image loading request.

[0097] Optional, such as Figure 3 As shown, Figure 2 Step S1012 in can be replaced by S1013:

[0098] S1013. When the image is loaded based on the src reference, the loading of the DOM node is monitored based on the change observer. When it is determined that the DOM node is within the first screen height, the DOM node of Vue is traversed to obtain the image link, and the src attribute is rewritten through the preset API in Vue to intercept the image loading request. When the image is loaded based on the lazy loading method, the filter parameter in the lazyload plug-in is modified to intercept the image loading request.

[0099] Optional, such as Figure 4 As shown, the embodiment of the present application also provides a method for loading an image, including S401-S4010:

[0100] S401. When a user accesses a page, obtain an image link corresponding to a target component, and intercept an image loading request corresponding to the target component.

[0101] S402: Determine whether the image link is an optimized link.

[0102] If it is determined to be an optimized link, step S4010 is executed; if it is determined not to be an optimized link, step S403 is executed.

[0103] S403: Determine whether the browser of the page supports the WebP format.

[0104] If it is determined that the browser of the page supports the WebP format, execute step S404; if it is determined that the browser of the page does not support the WebP format, execute step S405.

[0105] S404. Add the WebP format suffix after the image link.

[0106] S405: Determine whether the width and height of the DOM node of the page are both 0.

[0107] When it is determined that the width and height of the DOM node of the page are both 0, step S4010 is executed; when it is determined that the width and height of the DOM node of the page are not both 0, step S406 is executed.

[0108] S406: Determine whether one of the width and height of the DOM node of the page is 0.

[0109] When it is determined that one of the width and height of the DOM node of the page is 0, step S408 is executed; when it is determined that both the width and height of the DOM node of the page are not 0, step S407 is executed.

[0110] S407: Determine the display width and display height according to the width and height of the DOM node, and determine the link adjustment parameter based on the display width and display height of the visible area, as well as the width adjustment parameter and the height adjustment parameter.

[0111] After step S407, step S409 is executed.

[0112] S408. When it is determined that the width of the DOM node is 0, determine the link adjustment parameter according to the height and adaptive width of the DOM node; when it is determined that the height of the DOM node is 0, determine the link adjustment parameter according to the width and adaptive height of the DOM node.

[0113] S409: Based on the link adjustment parameters, the image link is adjusted to obtain an optimized image link, and the image is loaded in the visible area based on the optimized image link.

[0114] S4010, return to the image link.

[0115] like Figure 5 As shown, an embodiment of the present application further provides a picture loading device, which includes: an interception module 11, a determination module 12, an adjustment module 13 and a picture loading module 14.

[0116] The interception module 11 executes S101 in the above method embodiment, the determination module 12 executes S102 in the above method embodiment, the adjustment module 13 executes S103 in the above method embodiment, and the picture loading module 14 executes S104 in the above method embodiment.

[0117] Specifically, the interception module 11 is used to obtain the image link corresponding to the target component and intercept the image loading request corresponding to the target component when the user accesses the page;

[0118] A determination module 12, configured to determine a link adjustment parameter based on a display width and a display height of a visible area;

[0119] An adjustment module 13 adjusts the image link based on the link adjustment parameter determined by the determination module 12 to obtain an optimized image link;

[0120] The picture loading module 14 is used to load pictures in the visible area based on the optimized picture link adjusted by the adjustment module 13 .

[0121] Optionally, in a possible design, the determination module 12 is specifically configured to:

[0122] Determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter;

[0123] Determine link adjustment parameters based on image loading width and image loading height.

[0124] Optionally, in another possible design, the image loading device provided by the present application may further include: an acquisition module;

[0125] An acquisition module, used for acquiring the width and height of the DOM node of the page before the determination module 12 determines the link adjustment parameter based on the display width and display height of the visible area;

[0126] The determination 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 both the width of the DOM node and the height of the DOM node are not 0.

[0127] Optionally, in another possible design, the determination module 12 is further configured to determine the link adjustment parameter according to the height and adaptive width of the DOM node when it is determined that the width of the DOM node is 0 before the adjustment module 13 adjusts the image link based on the link adjustment parameter;

[0128] The determination module 12 is further configured to determine the 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.

[0129] Optionally, in another possible design, the determining module 12 is further configured to:

[0130] When it is determined that the browser of the page supports the WebP format, the link adjustment parameters are determined based on the suffix, display width, and display height of the WebP format.

[0131] Optionally, in another possible design, the interception module 11 is specifically used for:

[0132] When the image is loaded based on the src reference, traverse the DOM node of Vue to obtain the image link, and rewrite the src attribute through the preset API in Vue to intercept the image loading request;

[0133] When the image is loaded in lazy loading mode, modify the filter parameters in the lazyload plug-in to intercept the image loading request.

[0134] Optionally, in another possible design, the interception module 11 is further used to:

[0135] Based on the change observer, the loading of DOM nodes is monitored. When the DOM nodes are determined to be within the first screen height, the DOM nodes of Vue are traversed to obtain the image links.

[0136] Optionally, the image loading device may further include a storage module, and the storage module is used to store program codes of the image loading device, etc.

[0137] like Figure 6As shown, an embodiment of the present application also provides a picture loading device, including a memory 41, a processor 42 (42-1 and 42-2), a bus 43 and a communication interface 44; the memory 41 is used to store computer execution instructions, and the processor 42 is connected to the memory 41 through the bus 43; when the picture loading device is running, the processor 42 executes the computer execution instructions stored in the memory 41, so that the picture loading device executes the picture loading method provided in the above embodiment.

[0138] In a specific implementation, as an embodiment, the processor 42 may include one or more central processing units (CPUs), such as Figure 6 As an embodiment, the image loading device may include multiple processors 42, such as Figure 6 42-1 and processor 42-2 are shown in FIG. Each CPU in these processors 42 may be a single-core processor (single-CPU) or a multi-core processor (multi-CPU). The processor 42 here may refer to one or more devices, circuits, and / or processing cores for processing data (e.g., computer program instructions).

[0139] The memory 41 may be a read-only memory (ROM) or other types of static storage devices that can store static information and instructions, a random access memory (RAM) or other types of dynamic storage devices that can store information and instructions, or 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 compressed optical disc, laser disc, optical disc, digital versatile disc, Blu-ray disc, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 41 may exist independently and be connected to the processor 42 via a bus 43. The memory 41 may also be integrated with the processor 42.

[0140] In a specific implementation, the memory 41 is used to store the data in the present application and the computer execution instructions corresponding to the software program for executing the present application. The processor 42 can load various functions of the image loading device by running or executing the software program stored in the memory 41 and calling the data stored in the memory 41.

[0141] The communication interface 44 uses any transceiver or other device for communicating with other devices or communication networks, such as a control system, a radio access network (RAN), a wireless local area network (WLAN), etc. The communication interface 44 may include a receiving unit to implement a receiving function, and a sending unit to implement a sending function.

[0142] The bus 43 may be an industry standard architecture (ISA) bus, a peripheral component interconnect (PCI) bus, or an extended industry standard architecture (EISA) bus. The bus 43 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 6 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0143] As an example, combining Figure 5 , the functions implemented by the acquisition module in the image loading device are similar to Figure 6 The functions implemented by the receiving unit in the image loading device are the same as those implemented by the adjustment module in the image loading device. Figure 6 The functions implemented by the processor in the image loading device are the same as those implemented by the storage module in the image loading device. Figure 6 The memory in implements the same function.

[0144] The explanation of the relevant contents in this embodiment can refer to the above method embodiment, which will not be repeated here.

[0145] Through the description of the above implementation methods, technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device and unit described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0146] An embodiment of the present application also provides a computer-readable storage medium, in which instructions are stored. When a computer executes the instructions, the computer executes the image loading method provided in the above embodiment.

[0147] Among them, the computer-readable storage medium, for example, can be but is not limited to an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, RAM, 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, or any suitable combination of the above, or any other form of computer-readable storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an application-specific integrated circuit (ASIC). In an embodiment of the present application, the computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by or in combination with an instruction execution system, device or device.

[0148] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for loading an image, characterized in that: include: When a user accesses a page, an image link corresponding to a target component is obtained, and an image loading request corresponding to the target component is intercepted; The obtaining of the image link corresponding to the target component and intercepting the image loading request corresponding to the target component include: determining the interception method for the image loading request according to the loading method of the image corresponding to the target component; obtaining the image link, and intercepting the image loading request according to the interception method for the image loading request; wherein, intercepting the image loading request according to the interception method for the image loading request includes: when the image loading method is a loading method based on src reference, traversing the DOM node of Vue to obtain the image link, and rewriting the src attribute through the preset API in Vue to intercept the image loading request; when the image loading method is a lazy loading method, modifying the filter parameter in the lazyload plug-in to intercept the image loading request; Determine link adjustment parameters based on display width and display height of the visible area; Based on the link adjustment parameter, the picture link is adjusted to obtain an optimized picture link; Loading pictures in the visible area based on the optimized picture link; The determining of the link adjustment parameter based on the display width and display height of the visible area includes: Determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter; Determining the link adjustment parameter based on the image loading width and the image loading height; Before determining the link adjustment parameter based on the display width and display height of the visible area, the method further includes: Get the width and height of the DOM node of the page; When it is determined that both 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; The traversing of the DOM node of Vue to obtain the image link includes: Based on the change observer monitoring the loading of the DOM node, when it is determined that the DOM node is within the height of the first screen, traverse the DOM node of Vue to obtain the image link.

2. The image loading method according to claim 1, characterized in that: Before adjusting the picture link based on the link adjustment parameter, the method further includes: When it is determined that the width of the DOM node is 0, determining the link adjustment parameter according to the height and adaptive width of the DOM node; When it is determined that the height of the DOM node is 0, the link adjustment parameter is determined according to the width and the adaptive height of the DOM node.

3. The image loading method according to claim 1, characterized in that: The determining of the link adjustment parameter based on the display width and display height of the visible area includes: When it is determined that the browser of the page supports the WebP format, the link adjustment parameter is determined based on the suffix of the WebP format, the display width, and the display height.

4. A picture loading device, characterized in that: include: The interception module is used to obtain the image link corresponding to the target component and intercept the image loading request corresponding to the target component when the user accesses the page; The obtaining of the image link corresponding to the target component and intercepting the image loading request corresponding to the target component include: determining the interception method for the image loading request according to the loading method of the image corresponding to the target component; obtaining the image link, and intercepting the image loading request according to the interception method for the image loading request; wherein, intercepting the image loading request according to the interception method for the image loading request includes: when the image loading method is a loading method based on src reference, traversing the DOM node of Vue to obtain the image link, and rewriting the src attribute through the preset API in Vue to intercept the image loading request; when the image loading method is a lazy loading method, modifying the filter parameter in the lazyload plug-in to intercept the image loading request; A determination module, used to determine link adjustment parameters based on a display width and a display height of a visible area; An adjustment module, which adjusts the image link based on the link adjustment parameter determined by the determination module to obtain an optimized image link; A picture loading module, used for loading pictures in the visible area based on the optimized picture link adjusted by the adjustment module; The determination module is specifically used to: determine the image loading width based on the display width and the width adjustment parameter; and determine the image loading height based on the display height and the height adjustment parameter; determine the link adjustment parameter based on the image loading width and the image loading height; The device also includes: an acquisition module; The acquisition module is used to acquire the width of the DOM node of the page and the height of the DOM node before determining the link adjustment parameter based on the display width and display height of the visible area; The determination module is further configured to, when it is determined that both the width of the DOM node and the height of the DOM node are not 0, 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; The interception module is also specifically used for: monitoring the loading of the DOM node based on the change observer, and when it is determined that the DOM node is within the height of the first screen, traversing the DOM node of Vue to obtain the image link.

5. A picture loading device, characterized in that: It includes a memory, a processor, a bus and a communication interface; the memory is used to store computer-executable instructions, and the processor is connected to the memory via the bus; When the image loading device is running, the processor executes the computer execution instructions stored in the memory, so that the image loading device executes the image loading method according to any one of claims 1 to 3.

6. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, and when a computer executes the instructions, the computer executes the image loading method according to any one of claims 1 to 3.

Images