Picture loading method, picture loading device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a picture loading method, a picture loading device, an electronic device and a storage medium, and belong to the technical field of data processing. The method comprises: sending a picture acquisition request to a server; receiving picture resources returned by the server according to the picture acquisition request to obtain target image data; wherein the target image data comprises first image data; intercepting a header file of the first image data to obtain target resource file streams; performing attribute analysis on the target resource file streams to obtain target resource information data; and performing first rendering on a current page according to the target resource information data to obtain a first target interface. Through intercepting and analyzing the header file of the picture resources returned by the server, the embodiments of the present application can obtain picture attribute data on the client side; and the method does not need to be deployed on the server, can reduce the processing pressure of the server, and can be applied to more application scenarios.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to an image loading method, an image loading device, an electronic device, and a storage medium. Background Technology

[0002] In the financial sector, when using financial programs or websites through client-side applications, it is often necessary to display a large number of images and tables on the page. The tables are usually in image format. These images are generally quite large in file size, which often results in slow image loading speeds.

[0003] Currently, when clients request image resources from servers using financial applications or websites, they typically wait for all the content of the image resource to be downloaded before parsing the relevant content. This cannot meet the needs of scenarios where financial applications or websites require image attribute data in advance to improve image loading speed. Related technologies use an interface / field on the server to inform the client of the attribute data of the image resource that the currently displayed page will retrieve. However, this method increases the server's processing load and can only handle remote image resources deployed within the server, limiting its application scope. Summary of the Invention

[0004] The main objective of this application is to propose an image loading method, an image loading device, an electronic device, and a storage medium. By intercepting and parsing the header file of the image resources returned by the server, image attribute data can be obtained on the client in advance, reducing the processing pressure on the server and making it applicable to more scenarios.

[0005] To achieve the above objectives, a first aspect of this application proposes an image loading method, the method comprising:

[0006] Send an image retrieval request to the server;

[0007] The system receives image resources returned by the server based on the image acquisition request, and obtains target image data; wherein, the target image data includes first image data;

[0008] Header interception is performed on the first image data to obtain the target resource file stream;

[0009] The target resource file stream is parsed to obtain target resource information data;

[0010] The first target interface is obtained by rendering the target resource information data on the current page.

[0011] In some embodiments, the step of intercepting the header of the first image data to obtain the target resource file stream includes:

[0012] Register resource interceptors;

[0013] The resource interceptor performs header file interception on the first image data to obtain the target resource file stream.

[0014] In some embodiments, the step of parsing the attributes of the target resource file stream to obtain target resource information data includes:

[0015] The target resource file stream is parsed to obtain the target resource type data;

[0016] According to the preset parsing rules, the target resource type data is parsed and the fields are queried to obtain the target parsed field data;

[0017] The target resource file stream is parsed based on the target parsing field data to obtain the target resource information data.

[0018] In some embodiments, the step of parsing the target resource file stream based on the target parsing field data to obtain the target resource information data includes:

[0019] Based on the target parsing field data, the target resource file stream is subjected to field extraction to obtain the field data to be parsed;

[0020] The target resource information data is obtained by parsing the field data to be parsed according to the preset field parsing rules.

[0021] In some embodiments, the target resource information data includes the width and height data of the image resource; the step of performing a first rendering on the current page based on the target resource information data to obtain a first target interface includes:

[0022] Obtain the parameter data of the current page to get the display constraint data;

[0023] Based on the width data and the height data, the original size data is obtained;

[0024] Based on the display constraint data, the original size data is compared to obtain the scaling ratio data.

[0025] The first image data is scaled according to the scaling ratio data to obtain the first target display data;

[0026] The first target display data is rendered on the current page to obtain the first target interface.

[0027] In some embodiments, the first image data is in a downloading state; the target image data further includes second image data, the second image data being in a download completed state; after performing a first rendering on the current page based on the target resource information data to obtain a first target interface, the method further includes:

[0028] The second image data is scaled according to the scaling ratio data to obtain the second target display data;

[0029] The second target display data is rendered on the first target interface to obtain the second target interface.

[0030] In some embodiments, sending an image retrieval request to the server includes:

[0031] Obtain the image loading request triggered by the current page;

[0032] The image retrieval request is sent to the server according to the image loading request.

[0033] To achieve the above objectives, a second aspect of this application provides an image loading apparatus, the apparatus comprising:

[0034] The request processing module is used to send image retrieval requests to the server;

[0035] The resource receiving module is used to receive the image resources returned by the server according to the image acquisition request, and obtain the target image data; wherein, the target image data includes first image data;

[0036] The resource interception module is used to intercept the header file of the first image data to obtain the target resource file stream;

[0037] The resource parsing module is used to parse the attributes of the target resource file stream to obtain target resource information data;

[0038] The first rendering module is used to perform a first rendering on the current page based on the target resource information data to obtain the first target interface.

[0039] To achieve the above objectives, a third aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0040] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0041] The image loading method, device, electronic device, and storage medium proposed in this application involve sending an image acquisition request to a server; receiving image resources returned by the server based on the image acquisition request to obtain target image data; wherein the target image data includes first image data; intercepting the header file of the first image data to obtain a target resource file stream; parsing the attributes of the target resource file stream to obtain target resource information data; and finally, performing a first rendering on the current page based on the target resource information data to obtain a first target interface. This method intercepts and parses the header file of the image resources returned by the server, thereby enabling the client to obtain image attribute data in advance, allowing the current page to be rendered based on the image attribute data; furthermore, this method does not require deployment on a server, reducing the server's processing load and making it applicable to a wider range of application scenarios. Attached Figure Description

[0042] Figure 1 This is a schematic diagram of the implementation environment of the image loading method provided in the embodiments of this application;

[0043] Figure 2 This is a flowchart of the image loading method provided in the embodiments of this application;

[0044] Figure 3 yes Figure 2 The flowchart of step S101 in the text;

[0045] Figure 4 yes Figure 2 The flowchart of step S103 in the process;

[0046] Figure 5 yes Figure 2 The flowchart of step S104 in the process;

[0047] Figure 6 This is a flowchart of an image loading method provided in another embodiment of this application;

[0048] Figure 7 yes Figure 2 The flowchart of step S105 in the process;

[0049] Figure 8 This is a flowchart of an image loading method provided in another embodiment of this application;

[0050] Figure 9 This is a schematic diagram of the structure of the image loading device provided in the embodiments of this application;

[0051] Figure 10 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0052] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0053] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0054] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0055] First, let's analyze the terms used in this application:

[0056] Resource interceptors are used to intercept resources that the server returns based on user requests.

[0057] In the financial sector, using financial applications or websites via client-side typically requires displaying numerous images and tables on the page, with tables often in image format. These images are generally large in file size, frequently resulting in slow loading times. In practice, there are scenarios where clients using financial applications or websites need to obtain image attribute data in advance. Image attributes include, but are not limited to, width, height, size, and type data. Currently, when a client requests image resources from the server, it generally waits until all content of the image resource has been downloaded before parsing the relevant content, which cannot meet the needs of scenarios requiring advance access to image attribute data; furthermore, the larger the image resource, the longer the waiting time for obtaining the attributes.

[0058] For example, there's the issue of page jumps during rendering. When the currently displayed page is laying out an image list, and there's a need to scale the images proportionally to their original sizes, the page uses a preset default size because it hasn't yet obtained the dimensions of each image. Once each image has finished downloading, it's rendered based on the parsed dimensions. Some images, due to their large size, take a long time to download. This means that rendering might only begin long after some images in the list have finished, causing page jumps and impacting the user experience.

[0059] In related technologies, before requesting image resources, an interface / field is set on the server to inform the client of the attribute data of the image resource to be obtained. This approach has the following drawbacks: the server needs to additionally process the image attributes to return them to the client, increasing the server's processing load; the client needs to add extra processing to the interface logic, increasing the maintenance difficulty when implementing related business requirements; adding an interface / field means adding additional instability, usually limited by network interface and bandwidth processing capabilities; and it cannot handle remote image resources not deployed on internal servers, limiting its application scope.

[0060] Optimizing slow page loading speeds can improve user experience, reduce waiting time, and increase conversion rates. Furthermore, financial clients and websites need to ensure data accuracy and security. Optimizing image loading efficiency and reducing page loading time can improve website stability and security, reducing the probability of errors and the risk of attacks.

[0061] Based on this, embodiments of this application provide an image loading method, an image loading device, an electronic device, and a storage medium. By intercepting and parsing the header file of the image resources returned by the server, image attribute data can be obtained before the image resources are downloaded, reducing the processing pressure on the server and making it applicable to more scenarios.

[0062] The image loading method, image loading device, electronic device, and storage medium provided in this application are specifically described through the following embodiments. First, the image loading method in this application embodiment is described.

[0063] The image loading method of this application embodiment is applied in a network architecture, which includes a client and a server. In one application scenario, please refer to... Figure 1 In the network architecture, there can be one client, such as client 210, and server 100 communicates with client 210 through the network; there can also be two clients, such as client 210 and client 220, and server 100 communicates with clients 210 and 220 through the network; there can also be three or more clients, such as client 210, client 220, ... client N, and server 100 communicates with clients 210, client 220, ... client N through the network.

[0064] The image loading method provided in this application relates to the field of data processing technology. The image loading method provided in this application can be applied to a terminal or can be software running on a terminal. In some embodiments, the terminal can be a smartphone, desktop computer, tablet computer, laptop computer, etc.; the software can be an application implementing the image loading method, etc., but is not limited to the above forms.

[0065] This application can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a specific task or implement a specific abstract data type. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0066] It should be noted that in all specific embodiments of this application, when processing data related to user identity or characteristics, such as user information, user image data, user historical data, and user location information, user permission or consent is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards. In addition, when embodiments of this application require access to sensitive personal information of users, separate permission or consent from the user is obtained through pop-ups or redirection to a confirmation page. Only after obtaining the user's separate permission or consent is the necessary user-related data required for the proper functioning of these embodiments acquired.

[0067] Figure 2 This is an optional flowchart of the image loading method provided in the embodiments of this application. Figure 2 The method may include, but is not limited to, steps S101 to S105:

[0068] Step S101: Send an image retrieval request to the server;

[0069] Step S102: Receive the image resources returned by the server based on the image acquisition request to obtain the target image data; wherein, the target image data includes the first image data;

[0070] Step S103: The header file of the first image data is intercepted to obtain the target resource file stream;

[0071] Step S104: Perform attribute parsing on the target resource file stream to obtain target resource information data;

[0072] Step S105: Perform the first rendering on the current page based on the target resource information data to obtain the first target interface.

[0073] Steps S101 to S105 of this embodiment involve sending an image retrieval request to the server; then receiving the image resources returned by the server based on the image retrieval request to obtain target image data; wherein, the target image data includes first image data. Next, the header file of the first image data is intercepted to obtain the target resource file stream; the target resource file stream is parsed to obtain target resource information data; finally, the first rendering is performed on the current page based on the target resource information data to obtain the first target interface. This method intercepts and parses the header file of the image resources returned by the server, thereby enabling the client to obtain image attribute data, allowing the current page to be rendered based on the image attribute data; furthermore, this method does not require deployment on a server, reducing the server's processing load and making it applicable to more application scenarios.

[0074] Please see Figure 3 In some embodiments, step S101 may include, but is not limited to, steps S201 to S202:

[0075] Step S201: Obtain the image loading request triggered by the current page;

[0076] Step S202: Send an image retrieval request to the server based on the image loading request.

[0077] Steps S201 to S202, as illustrated in this embodiment, involve obtaining an image loading request triggered by the current page and sending an image retrieval request to the server based on that request. By sending the image loading request triggered by the current page to the server, the image resources returned by the server are obtained and then intercepted and parsed.

[0078] In step S201 of some embodiments, the current page can be a web page or the display interface of an application, and is not limited thereto.

[0079] In step S202 of some embodiments, when sending an image retrieval request to the server, the image retrieval request is sent to the server by calling the loading method.

[0080] It should be noted that, in addition to sending image retrieval requests to internal servers, it can also send image retrieval requests to image resources on external web pages, and is not limited to this.

[0081] In step S102 of some embodiments, when the server processes the image acquisition request and returns the corresponding image resources, the image resource processing module receives and downloads the image resources returned by the server to obtain target image data. This target image data is the image resource that the current webpage needs to load. Specifically, the target image data includes first image data, which is in a downloading state, meaning that all image resources have not been downloaded completely. This first image data is used for header file parsing to obtain the resource information data required for rendering the current page. Ultimately, it enables the acquisition of image attribute data before the image resources are completely downloaded, allowing the current page to be rendered based on the image attribute data and avoiding page jumps during rendering.

[0082] It should be noted that the first image data refers to the image resources that have just been received and downloaded, and are in a downloading state. Specifically, the first image data in the downloading state may include some image resources that have been downloaded and some image resources that are still being downloaded; or all image resources may be in the downloading state, and this embodiment does not impose any restrictions on this.

[0083] Please see Figure 4 In some embodiments, step S103 may include, but is not limited to, steps S301 to S302:

[0084] Step S301: Register the resource interceptor;

[0085] Step S302: The header file of the first image data is intercepted according to the resource interceptor to obtain the target resource file stream.

[0086] Steps S301 to S302, as illustrated in this embodiment, involve registering a resource interceptor and intercepting the header of the first image data using the resource interceptor to obtain the target resource file stream. This method obtains the target resource file stream by intercepting the header of the first image data. This is done to obtain image attribute data before the image resource download is complete, enabling the current page to be rendered based on the image attribute data and avoiding page jumps during rendering.

[0087] In some embodiments, the image resource processing module includes:

[0088] The parsing module calls the read method to obtain information from the file stream.

[0089] The interceptor module calls the interception method to intercept the target, and calls the parsing module to process the information of the file stream.

[0090] The registration module calls the registration method to register with the interceptor module, so as to intercept and process the returned image resources and call back the read method to process the file stream.

[0091] In step S301 of some embodiments, registering a resource interceptor involves the registration module calling a registration method to register with the interceptor module, thereby obtaining the resource interceptor. This resource interceptor is used to intercept the image resources returned by the server based on the image retrieval request, that is, to intercept the first image data in the target image data.

[0092] Specifically, in step S302 of some embodiments, the header file of the first image data is intercepted according to the resource interceptor to obtain the target resource file stream. The target resource file stream is the header file of the image data, including but not limited to image attribute information such as image type, image width, image height, image depth, color type, and compression method.

[0093] Please see Figure 5 In some embodiments, step S104 may include, but is not limited to, steps S401 to S403:

[0094] Step S401: Perform type parsing on the target resource file stream to obtain target resource type data;

[0095] Step S402: Query the parsing fields of the target resource type data according to the preset parsing rules to obtain the target parsing field data;

[0096] Step S403: Perform attribute parsing on the target resource file stream based on the target parsing field data to obtain target resource information data.

[0097] Steps S401 to S403, as illustrated in this embodiment, involve parsing the target resource file stream to obtain target resource type data; querying the parsing fields of the target resource type data according to preset parsing rules to obtain target parsing field data; and parsing the target resource file stream's attributes based on the target parsing field data to obtain target resource information data. This method, by performing type parsing, parsing field querying, and attribute parsing on the target resource file stream (i.e., the header file of the image resource), ultimately obtains target resource information data. This enables the acquisition of image attribute data, i.e., target resource information data, before the image resource download is complete, allowing the current page to be rendered based on the target resource information data.

[0098] In step S401 of some embodiments, target resource type data is parsed from the target resource file stream. The image resource type, such as PNG, JPEG, GIF, etc., can be obtained from the first four bytes of the target resource file stream. The specific format and byte correspondence is shown in Table 1. Table 1 is a file header reference table for common image files. For example, the hexadecimal representation of JPEG type is FF D8 FF E0, the hexadecimal representation of PNG type is 89 50 4E 47, the hexadecimal representation of GIF type is 47 49 46 38, and the hexadecimal representation of TIFFG type is 49 49 2A 00.

[0099] type hexadecimal representation JPEG FF D8 FF E0 PNG 89 50 4E 47 GIF 47 49 46 38 TIFF 49 49 2A 00

[0100] Table 1

[0101] In step S402 of some embodiments, the target parsing field corresponding to the target resource type data is obtained according to the preset parsing rules, so as to parse the target resource type in a targeted manner, obtain the attribute data of the required image resource, and finally obtain the target resource information data.

[0102] Specifically, in one embodiment, for example, the hexadecimal representation of the header of an image is [89 50 4E47 0D 0A 1A 0A 00 00 00 0D 49 48 44 52]. According to Table 1, the first four bytes of the header are 89 504E 47, indicating that the image is in PNG format. Therefore, if width and height data are needed, the target parsing field for the PNG image can be obtained according to the preset parsing rules. This target parsing field is the file header data block IHDR (13 bytes), which contains basic information about the image data stored in the PNG file, including resolution, bit depth, color mode, and compression method. It is the first data block in the PNG data stream.

[0103] It should be noted that the PNG format image is used as an example only, and is not limited to PNG format images.

[0104] Please see Figure 6 In some embodiments, step S403 may also include, but is not limited to, steps S501 to S502:

[0105] Step S501: Extract fields from the target resource file stream based on the target parsing field data to obtain the field data to be parsed;

[0106] Step S502: Parse the field data to be parsed according to the preset field parsing rules to obtain the target resource information data.

[0107] Steps S501 to S502, as shown in the embodiments of this application, involve extracting fields from the target resource file stream based on the target parsing field data to obtain the field data to be parsed; and parsing the field data to be parsed according to preset field parsing rules to obtain the target resource information data.

[0108] By extracting and parsing fields from the target resource file stream, target resource information data is obtained. This enables the acquisition of image attribute data, i.e., target resource information data, before the image resource download is complete, allowing the current page to be rendered based on the target resource information data.

[0109] In step S501 of some embodiments, the target parsing field data is determined based on the target resource type data required by the image acquisition request. Since images of the same type have a fixed format, it is only necessary to specify a particular field to obtain the required attribute data. For example, when the width and height data of an image resource are needed, the target parsing field data is set to the height and width data fields corresponding to each image type. Finally, the corresponding fields of the target resource file stream are extracted based on the target parsing data to obtain the field data to be parsed.

[0110] In step S502 of some embodiments, after obtaining the data of the field to be parsed, it is necessary to use a preset field parsing rule to parse what the field to be parsed specifically represents. Common image resource header files will use hexadecimal representation.

[0111] Specifically, taking a JPEG image as an example, the specific parsed field data is shown in Table 2.

[0112] Table 2 is a table comparing the header field types of JPEG format.

[0113] TAG type Fields name Other notes SOI 0xFFD8 Start of Image Must bring APP0 0xFFE0 application0 Must bring APPn 0xFFEn applicationn Optional with DQT 0xFFDB Define Quantization Table Must bring SOF 0xFFC0 Start of Frame Must bring DHT 0xFFC4 Define Huffman Table Must bring SOS 0xFFDA Start of Scan Must bring COMPRESS DATA / … Must bring EOI 0xFFD9 End of Image Must bring

[0114] Table 2

[0115] It should be noted that the header of a JPEG image includes, but is not limited to, the TAG types shown in Table 1. The Start of Frame (SOF) section in Table 2 contains information such as the image's width and height, sampling progress, and table segmentation. The specific width and height values ​​can be read by parsing the corresponding positions. Compressed data contains the image's actual content information and is the largest portion of the image's file size. Because the content of each image is inconsistent, there is no uniform field in the COMPRESS DATA section. The actual image content information is located between the Start of Scan Line (SOS) and the End of File (EOI). The SOF marker information precedes this, therefore, this part is read earlier than the entire image file content.

[0116] For example, consider a few bytes of the SOF field of a JPEG image: [0x00 11 08 02D003E0 03 01 22 00 02 11 01 03 11 01].

[0117] Here, 0x0011 indicates that the SOF contains a total of 17 bytes; 0x08 represents the sampling precision, which is almost always 8 bits for sampling precision, meaning that one pixel can have 2^32 bits. 8 =256-level transition. 0x02 D0 represents the image height, i.e., 0x02D0 = 720 pixels high; 0x03 E0 represents the image width, i.e., 0x03E0 = 992 pixels wide. 0x03 represents the number of component tables, which is 3, representing the Y, U, and V tables respectively. In 0x01 22 00, the first byte 01 represents the quantization table number as 1, the second 22 represents that the horizontal / vertical sampling factors are both 2, and the third 00 represents that the quantization table id = 0. In 0x02 11 01, the first byte 02 represents the quantization table number as 2, the second 11 represents that the horizontal / vertical sampling factors are both 1, and the third 00 represents that the quantization table id = 1. In 0x03 11 01, the first byte 01 represents the quantization table number as 3, the second 11 represents that the horizontal / vertical sampling factors are both 1, and the third 00 represents that the quantization table id = 2;

[0118] It should be noted that the sampling factor indicates that the width and height sampling factors of the Y component of the image are both 2, while the sampling factors of the UV components are both 1. Therefore, in the same direction (horizontal or vertical), the Y component has twice as many sampling points as the UV component. If the width and height of the Y component of the image are W and H respectively, then the U and V components are sampled only W / 2 and H / 2 points, which also means that the original image size is 1.5 * W * H. The first table of the image may have 2 and 1, 1 and 2, or both 1, but the sampling factor of the second and third tables is always 1.

[0119] Quantization table: The Y component uses one quantization table, and the UV component uses another table, because there are usually only two DQT tables.

[0120] Please see Figure 7 In some embodiments, the target resource information data includes the width and height data of the image resource, and step S105 includes, but is not limited to, steps S601 to S605:

[0121] Step S601: Obtain the parameter data of the current page to get the display constraint data;

[0122] Step S602: Obtain the original dimension data based on the width and height data;

[0123] Step S603: Perform size comparison processing on the original size data based on the display constraint data to obtain the scaling ratio data;

[0124] Step S604: Scale the first image data according to the scaling ratio data to obtain the first target display data;

[0125] Step S605: The first target display data is rendered on the current page to obtain the first target interface.

[0126] Steps S601 to S605, as illustrated in this embodiment, involve obtaining display constraint data by acquiring parameter data of the current page; obtaining original size data based on width and height data; performing size comparison processing on the original size data according to the display constraint data to obtain scaling ratio data; scaling the first image data according to the scaling ratio data to obtain first target display data; and performing a first rendering on the current page using the first target display data to obtain a first target interface. This method adjusts the size of the image resources during rendering based on the target resource information data of the image obtained before the image resources are downloaded, ensuring that the current page can be rendered using the target resource information data, thus avoiding page jumps during rendering.

[0127] It should be noted that the display parameters are different for each terminal device. The page will obtain display constraint data based on the current page's parameter data, which is used to adaptively adjust the display content of the current page, including but not limited to scaling of image size, aspect ratio of the page, font size, etc.

[0128] It should be noted that this embodiment obtains the image's width and height data before the image resource download is complete. This allows the current page to render based on the image's width and height data, preventing page jumps during rendering of the downloaded image resource. However, in other application scenarios, different attribute data can be obtained by setting different parsing fields, and it is not limited to a specific field.

[0129] In step S605 of some embodiments, if the first image data contains both image resources in a downloading state and image resources in a completed downloading state, then the first target display data includes two states: a virtual image corresponding to the image resources in the downloading state, and real image data corresponding to the image resources in the completed downloading state. The virtual image is used to pre-fix the position of the image resources on the current page, thereby avoiding page jumps caused by the inability to render image resources simultaneously, which would negatively impact user experience.

[0130] If all image resources in the first image data are in the downloading or download-complete state, then the first target display data is a virtual image, which is used to pre-fix the position of the image resources on the current page, thereby avoiding the problem of page jumping due to the inability of image resources to be rendered at the same time, which would affect the user experience.

[0131] Please see Figure 8 In some embodiments, the data status of the first image data is "downloading"; the target image data also includes second image data, the data status of which is "downloading complete"; after step S105, the image loading method further includes, but is not limited to, steps S701 to S702:

[0132] Step S701: Scale the second image data according to the scaling ratio data to obtain the second target display data;

[0133] Step S702: The second target display data is rendered a second time on the first target interface to obtain the second target interface.

[0134] In steps S701 to S702 of this embodiment, after all image resources have been downloaded, second image data is obtained. This second image data is then scaled to obtain second target display data. This second target display data is then loaded onto the first target interface, i.e., a second rendering, ultimately resulting in the second target interface as the final display interface. This method avoids page jumping issues caused by differences in image resource sizes during the first and second renderings.

[0135] In step S701 of some embodiments, after all the requested image resources have been downloaded, the second image data is obtained; the second image is scaled according to the scaling ratio data to obtain the second target display data.

[0136] It should be noted that the size of the data displayed for the second target is the same as the size of the data displayed for the corresponding first target.

[0137] In step S702 of some embodiments, performing a second rendering of the second target display data on the first target interface involves rendering the second target display data a second time at the location where the first target display data was rendered, i.e., loading the image and displaying the second target display data. Since the size of the second target display data is consistent with the size of the corresponding first target display data, the page jumps that would occur during the second rendering due to inconsistent image sizes between the two renderings will not happen.

[0138] It should be noted that the rendering mechanisms for the first and second renderings are the same, but their rendering times are sequential, with the first rendering occurring before the second rendering.

[0139] It should be noted that if the image resource is small, the download can be completed quickly upon receiving the image resource from the server, and the first image data can be in a completed download state. Specifically, only the first rendering is needed to complete the image loading process without causing page jumps.

[0140] In one embodiment, using the image loading method of this application in a financial program may include the following steps:

[0141] The client obtains the image loading request triggered by the current page of the financial application;

[0142] The client sends an image retrieval request to the server based on the image loading request;

[0143] The server receives the image retrieval request;

[0144] The server sends the image resource to the client based on the image retrieval request;

[0145] The client receives the image resources returned by the server based on the image retrieval request and obtains the target image data; wherein, the target image data includes the first image data;

[0146] Client-side registration of resource interceptors;

[0147] The client intercepts the header of the first image data using a resource interceptor to obtain the target resource file stream.

[0148] The client performs type parsing on the target resource file stream to obtain the target resource type data;

[0149] The client queries the target resource type data according to the preset parsing rules to obtain the target parsed field data;

[0150] The client extracts fields from the target resource file stream based on the target parsing field data to obtain the field data to be parsed;

[0151] The client parses the data of the fields to be parsed according to the preset field parsing rules to obtain the target resource information data; the target resource information data includes the width and height data of the image resource;

[0152] The client obtains the parameter data of the current page and gets the display constraint data;

[0153] The client obtains the original size data based on the width and height data;

[0154] The client performs a size comparison on the original size data based on the display constraint data to obtain the scaling ratio data;

[0155] The client scales the first image data according to the scaling ratio data to obtain the first target display data;

[0156] The client renders the first target data on the current page of the financial program to obtain the first target interface.

[0157] The client's first image data is in the downloading state; the target image data also includes second image data, which is in the download completed state.

[0158] The client scales the second image data according to the scaling ratio data to obtain the second target display data;

[0159] The client renders the data from the second target interface into a second target interface.

[0160] This method intercepts and parses the header files of image resources returned by the server, enabling the acquisition of image attribute data—i.e., target resource information—before the image resource download is complete. This allows the current page to be rendered based on the target resource information, resulting in the first target interface. Once the image resource download is complete, the second image data is obtained, scaled, and then rendered on the first target interface. This avoids page jumps caused by different image sizes during the second rendering, thus improving the slow page loading speed of financial applications. Furthermore, this method does not require server deployment, reducing server processing load and making it applicable to a wider range of application scenarios.

[0161] In addition, this image loading method can also be used for page loading on financial websites. Users often browse financial information on financial websites, so they often need to load images and tables. The image loading method in this application can improve the user experience, reduce page loading time, and reduce user waiting time; it can also improve the stability and security of the website, reducing the probability of errors and the risk of being attacked.

[0162] In addition, this image loading method can also be used in the page loading process of other applications or websites. The specific process is basically the same as the specific embodiment of the image loading method described above, and will not be repeated here.

[0163] Please see Figure 9 This application also provides an image loading apparatus that can implement the above-described image loading method. The apparatus includes:

[0164] Request processing module 801 is used to send image retrieval requests to the server;

[0165] The resource receiving module 802 is used to receive the image resources returned by the server according to the image acquisition request, and obtain the target image data; wherein, the target image data includes the first image data;

[0166] Resource interception module 803 is used to intercept the header of the first image data to obtain the target resource file stream;

[0167] Resource parsing module 804 is used to parse the attributes of the target resource file stream to obtain target resource information data;

[0168] The first rendering module 805 is used to perform the first rendering on the current page based on the target resource information data to obtain the first target interface.

[0169] In some embodiments, the request processing module 801 further includes:

[0170] The request retrieval unit is used to retrieve image loading requests triggered by the current page;

[0171] The request sending unit is used to send an image retrieval request to the server based on the image loading request.

[0172] In some embodiments, the resource interception module 803 further includes:

[0173] The registration unit is used to register resource interceptors;

[0174] The interception processing unit is used to intercept the header of the first image data according to the resource interceptor to obtain the target resource file stream.

[0175] In some embodiments, the resource resolution module 804 further includes:

[0176] The type resolution unit is used to resolve the type of the target resource file stream to obtain the target resource type data;

[0177] The field query unit is used to perform parsing field queries on the target resource type data according to preset parsing rules to obtain the target parsed field data;

[0178] The attribute parsing unit is used to parse the target resource file stream based on the target parsing field data to obtain the target resource information data.

[0179] In some embodiments, the attribute parsing module further includes:

[0180] The field extraction unit is used to extract fields from the target resource file stream based on the target parsed field data to obtain the field data to be parsed.

[0181] The field parsing unit is used to parse the field data to be parsed according to the preset field parsing rules to obtain the target resource information data.

[0182] In some embodiments, the first rendering module 805 further includes:

[0183] The parameter acquisition unit is used to obtain the parameter data of the current page and obtain the display constraint data;

[0184] The dimension construction unit is used to obtain the original dimension data based on the width and height data;

[0185] The size comparison unit is used to perform size comparison processing on the original size data based on the display constraint data to obtain the scaling ratio data.

[0186] The first scaling processing unit is used to scale the first image data according to the scaling ratio data to obtain the first target display data;

[0187] The first rendering processing unit is used to perform the first target display data on the current page to obtain the first target interface.

[0188] In some embodiments, the image loading device further includes:

[0189] The second scaling processing module is used to scale the second image data according to the scaling ratio data to obtain the second target display data;

[0190] The second rendering processing module is used to perform a second rendering of the second target display data on the first target interface to obtain the second target interface.

[0191] The specific implementation of this image loading device is basically the same as the specific embodiment of the image loading method described above, and will not be repeated here.

[0192] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described image loading method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.

[0193] Please see Figure 10 , Figure 10 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes:

[0194] The processor 901 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0195] The memory 902 can be implemented as a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 902 and is called and executed by the processor 901 using the image loading method of the embodiments of this application.

[0196] The input / output interface 903 is used to implement information input and output;

[0197] The communication interface 904 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0198] Bus 905 transmits information between various components of the device (e.g., processor 901, memory 902, input / output interface 903, and communication interface 904);

[0199] The processor 901, memory 902, input / output interface 903, and communication interface 904 are connected to each other within the device via bus 905.

[0200] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described image loading method.

[0201] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0202] The image loading method, image loading device, electronic device, and storage medium provided in this application embodiment obtain target image data by sending an image acquisition request to a server; receiving image resources returned by the server based on the image acquisition request; wherein the target image data includes first image data; intercepting the header file of the first image data to obtain a target resource file stream; parsing the attributes of the target resource file stream to obtain target resource information data; and finally, performing a first rendering on the current page based on the target resource information data to obtain a first target interface. This method intercepts and parses the header file of the image resources returned by the server, thereby enabling the client to obtain image attribute data, allowing the current page to be rendered based on the image attribute data; furthermore, this method does not require deployment on a server, reducing the server's processing load and making it applicable to more application scenarios.

[0203] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0204] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.

[0205] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0206] Those skilled in the art will understand that all or some of the steps in the methods disclosed above, as well as the functional modules / units in the systems and devices, can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0207] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0208] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0209] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of the units described above is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0210] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0211] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0212] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0213] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.

Claims

1. A picture loading method, characterized by, The method comprises: sending a picture acquisition request to a server; receiving picture resources returned by the server according to the picture acquisition request to obtain target image data; wherein the target image data comprises first image data; performing header file interception on the first image data to obtain target resource file stream; performing attribute analysis on the target resource file stream to obtain target resource information data; performing first rendering on a current page according to the target resource information data to obtain a first target interface; wherein the performing attribute analysis on the target resource file stream to obtain target resource information data comprises: performing type analysis on the target resource file stream to obtain target resource type data; performing analysis field query on the target resource type data according to a preset analysis rule to obtain target analysis field data; performing attribute analysis on the target resource file stream according to the target analysis field data to obtain the target resource information data; wherein the target resource information data comprises width data and height data of the picture resources; the performing first rendering on a current page according to the target resource information data to obtain a first target interface comprises: obtaining parameter data of the current page to obtain display constraint data; obtaining original size data according to the width data and the height data; performing size comparison processing on the original size data according to the display constraint data to obtain scaling ratio data; performing scaling processing on the first image data according to the scaling ratio data to obtain first target display data; performing first rendering on the current page on the first target display data to obtain the first target interface.

2. The method of claim 1, wherein, The performing header file interception on the first image data to obtain target resource file stream comprises: registering a resource interceptor; performing header file interception on the first image data according to the resource interceptor to obtain the target resource file stream.

3. The method of claim 1, wherein, The performing attribute analysis on the target resource file stream according to the target analysis field data to obtain the target resource information data comprises: performing field extraction on the target resource file stream according to the target analysis field data to obtain to-be-analyzed field data; performing field analysis on the to-be-analyzed field data according to a preset field analysis rule to obtain the target resource information data.

4. The method of claim 1, wherein, The data state of the first image data is a downloading state; the target image data further comprises second image data, and the data state of the second image data is a downloading completion state; after the performing first rendering on a current page according to the target resource information data to obtain a first target interface, the method further comprises: performing scaling processing on the second image data according to the scaling ratio data to obtain second target display data; performing second rendering on the first target interface on the second target display data to obtain a second target interface.

5. The method according to any one of claims 1 to 3, characterized in that, The sending a picture acquisition request to a server comprises: obtaining a picture loading request triggered by the current page; sending the picture acquisition request to the server according to the picture loading request.

6. An image loading apparatus characterized by comprising: The device comprises: The request processing module is configured to send a picture acquisition request to a server. The resource receiving module is configured to receive picture resources returned by the server according to the picture acquisition request, and obtain target image data; the target image data includes first image data. The resource intercepting module is configured to perform header file interception on the first image data, and obtain target resource file stream. The resource analyzing module is configured to perform attribute analysis on the target resource file stream, and obtain target resource information data. The first rendering module is configured to perform first rendering on a current page according to the target resource information data, and obtain a first target interface. The attribute analysis on the target resource file stream and the obtaining of the target resource information data include: type analysis on the target resource file stream to obtain target resource type data; analysis of the target resource type data according to a preset analysis rule to obtain target analysis field data; and attribute analysis on the target resource file stream according to the target analysis field data to obtain the target resource information data. The target resource information data includes width data and height data of the picture resources; the first rendering on the current page according to the target resource information data to obtain the first target interface includes: obtaining parameter data of the current page to obtain display constraint data; obtaining original size data according to the width data and the height data; performing size comparison processing on the original size data according to the display constraint data to obtain scaling ratio data; performing scaling processing on the first image data according to the scaling ratio data to obtain first target display data; and performing first rendering on the current page on the first target display data to obtain the first target interface.

7. An electronic device, comprising: The electronic device includes a memory and a processor; the memory stores a computer program; and the processor implements the picture loading method in any one of claims 1 to 5 when executing the computer program.

8. A computer-readable storage medium storing a computer program, the computer-readable storage medium comprising: The computer program is executed by the processor to implement the picture loading method in any one of claims 1 to 5.

Images