Method for displaying commodity picture by mobile equipment in low-bandwidth environment, storage medium and electronic equipment

Abstract

The invention provides a method for a mobile device to display a commodity picture in a low-bandwidth environment, a storage medium and an electronic device, and relates to the technical field of computer networks and electronic commerce. The method comprises the following steps that: a server side acquires main image data of a target commodity, performs hierarchical coding on the main image data, and constructs a progressive image structure consisting of an initial low-resolution image part and at least one high-definition image increment part; the client side collects network quality parameters including the bandwidth rate, the network delay and the packet loss rate, and the network quality parameters are used for determining the image loading sequence and the resolution hierarchy; after receiving the initial image, the client performs image reconstruction to generate a main image contour image, and reserves a cache for an incremental image; when a user interaction operation is detected, the client requests a corresponding image increment part, the client completes image superposition after the server returns, and a high-definition main image is constructed step by step. According to the invention, the stability, coherence and response capability of an e-commerce picture display technology under a complex communication condition can be improved.

Description

Technical Field

[0001] The present disclosure relates to the technical fields of computer networks and e-commerce, and in particular to a method for displaying product images on a mobile device in a low-bandwidth environment, a computer-readable storage medium, and an electronic device. Background Art

[0002] With the widespread adoption of mobile devices and e-commerce platforms, more and more users are using mobile phones and other devices to browse products, compare prices, and complete purchases in various network environments. In this process, product main images serve as the primary visual gateway for users to obtain product information, and their loading speed and display quality directly impact their browsing experience and purchasing decisions. However, under existing technical conditions, when users are in environments with poor network quality, especially in unstable signal environments such as subways, mountainous areas, tunnels, or high-speed trains, the loading efficiency and display integrity of product main images are generally insufficient.

[0003] Traditional product image display methods typically use static image files with fixed resolutions, commonly in formats such as JPEG or PNG, which are loaded directly to the client via HTTP requests. To ensure visual quality, these images are often high-resolution and large-size, resulting in large file sizes and relying on stable bandwidth for fast and complete loading. When network bandwidth is limited or channel fluctuations are significant, client request latency increases, significantly prolonging download times. Users may see blank areas or a "loading" status on the page for extended periods, severely impacting page consistency and user expectations.

[0004] To improve loading speeds, some technologies have introduced methods such as image compression, delayed loading, and CDN acceleration, or prioritized loading of first-screen images to improve the efficiency of presenting key content. These methods have some success when network conditions are good, but these loading strategies are often based on static configurations and lack the ability to perceive and respond to current network conditions. This makes them difficult to adapt to the frequently changing mobile network environments of real-world use, and they are particularly unable to guarantee basic image display availability under extremely limited bandwidth conditions.

[0005] Additionally, some existing solutions attempt to use progressive encoding formats, such as Progressive JPEG, to achieve a top-down or layer-by-layer image loading effect. However, these methods primarily focus on image compression and fail to adjust the image loading order or layer strategy based on the terminal device's operating environment. Consequently, even with progressive encoding, slow overall download times can still prevent the rendering of valid image outlines in weak network conditions.

[0006] On the other hand, existing technologies typically rely on a complete decoding process for image display, requiring the entire data to be downloaded before a clear image appears on the page. This "full load, then render" mechanism is not conducive to providing progressively visible information feedback when the network is unstable. When users are faced with product images that continue to load, the lack of timely content notifications not only interrupts their browsing rhythm but also affects their judgment of the platform's responsiveness.

[0007] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the Invention

[0008] The purpose of the embodiments of the present disclosure is to provide a method, device, storage medium and electronic device for displaying product images on a mobile device in a low-bandwidth environment, thereby at least to a certain extent solving the problem in the related art that the loading efficiency and display integrity of the product main image are generally insufficient in unstable signal scenarios.

[0009] According to a first aspect of an embodiment of the present disclosure, a method for displaying product images on a mobile device in a low-bandwidth environment is provided, comprising:

[0010] Obtaining, by the server, main image data associated with the target product and performing a hierarchical encoding process on the main image data, the hierarchical encoding process comprising converting the main image data into a progressive image structure comprising an initial low-resolution image portion and at least one high-resolution image increment portion;

[0011] The network quality detection module of the client collects network quality parameters of the current terminal device, including bandwidth rate, network delay, and data packet loss rate, and transmits the network quality parameters to the image request scheduling module. The image request scheduling module determines the loading order and resolution level of each image part in the progressive image structure based on the network quality parameters;

[0012] After the client receives the initial low-resolution image portion, the image rendering module performs image reconstruction processing on the image portion to construct a main image outline image for interface presentation. The image rendering module identifies the current image level based on the progressive image structure and reserves an image data cache structure for at least one high-definition image incremental portion.

[0013] After detecting the user's interactive operation on the main image, the client generates an image incremental loading request and sends the request to the server. The server returns at least one high-definition image incremental part corresponding to the current level of the main image based on the request; after the client receives the high-definition image incremental part, the image rendering module performs data overlay processing on the constructed image level to update it to a high-resolution main image containing more image details.

[0014] In an exemplary embodiment of the present disclosure, the method further includes:

[0015] The user behavior collection module collects the user's behavior data on the e-commerce page, including click records for non-main image areas, page dwell time, and scrolling behavior trajectories. The behavior data is input into the user behavior analysis module to generate attention weight data related to each detail image;

[0016] The image request scheduling module receives the attention weight data and, in combination with the obtained network quality parameter, sorts the preloading order of multiple detail images associated with the target product, wherein the detail images are other product images different from the main product image; the detail images include at least two of the following: a price information image, a user evaluation image, a discount information image, a product detail image, and a product variant image;

[0017] The client preloads the detail image in a sorted order through a resource loading module according to the loading sequence control instruction generated by the image request scheduling module, and the preloading process writes the detail image data into a local cache; when the client detects that the user interface has scrolled to the display position of the corresponding detail image, the image rendering module calls the image data in the cache to complete the display rendering.

[0018] In an exemplary embodiment of the present disclosure, the image request scheduling module classifies the network quality parameters into levels using the following piecewise function:

[0019] L=f(B,D,P)

[0020] Where B represents the current bandwidth rate, D represents the network delay, P represents the packet loss rate, L represents the network level, which can be low (L1), medium (L2), and high (L3). f is a preset threshold mapping function that meets the following conditions:

[0021] If B<T1或D> T2 or P>T3, then L=L1;

[0022] If T1≤B <T4且D≤T2且P≤T3,则L=L2;

[0023] If B≥T4 and D≤T5 and P≤T6, then L=L3;

[0024] The image request scheduling module adjusts image loading strategy according to the level L, wherein:

[0025] At the L1 level, only an initial low-resolution image part is loaded;

[0026] At the L2 level, an initial part and a first-level high-definition image incremental part are loaded;

[0027] At the L3 level, all available image incremental parts are loaded to present a complete high-resolution image. In an exemplary embodiment of the present disclosure, the client comprises an image cache control module, which dynamically sets an image cache upper limit C according to the available memory capacity M of the terminal device and the current network quality level L; the upper limit C satisfies the following rules:

[0028] C=min(C_max, a*M*W(L))

[0029] Wherein, C_max is a system preset maximum cache value, a is a cache coefficient (0

[0030] When the cache upper limit C is full, the image cache control module gradually releases the cache space according to the strategy of preferentially clearing the earliest unrendered detail image.

[0031] In an exemplary embodiment of the present disclosure, the user behavior analysis module comprises an attention prediction model trained based on a machine learning algorithm; wherein the attention prediction model receives an input feature vector X and outputs predicted attention weight data of each detail image;

[0032] The feature vector X comprises at least two of the following: a historical click sequence vector of the current user; a scrolling speed within the current page; a duration for which the current user stays in the product main image area; a detail image category distribution that the user pays attention to in the past similar product pages;

[0033] The attention prediction model is a model constructed based on a deep neural network (DNN), a random forest or a support vector machine (SVM), and is optimized in the training stage by minimizing the following loss function:

[0034] Loss=MSE(V_pred, V_true)

[0035] Wherein, V_pred is the attention weight vector predicted by the model, V_true is the attention weight label obtained by statistical analysis of real user operations, and MSE is a mean square error function.

[0036] In an exemplary embodiment of the present disclosure, the resource loading module performs the image loading operation through a multi-thread management mechanism, and the multi-thread management mechanism includes a thread pool manager and a bandwidth allocation controller, wherein:

[0037] The thread pool manager dynamically allocates the number of image loading threads T according to the number of CPU cores N of the current terminal and the set thread upper limit T_max. The number of threads T satisfies:

[0038] T=min(N,T_max)

[0039] The bandwidth allocation controller monitors the real-time download rate R_i of each thread during the image loading process, and suspends the loading request of low-priority detail images when any thread R_i exceeds the preset threshold R_max, so as to give priority to the loading tasks of the main image and high-attention detail images.

[0040] In an exemplary embodiment of the present disclosure, before the image request scheduling module generates the image loading request, the method further includes:

[0041] Dynamically select an image encoding format F based on the current client's system compatibility parameters, network quality parameters, and image type. The encoding format F includes at least two of JPEG, WebP, and AVIF. The encoding format selection is performed according to the following rules:

[0042] When it is detected that the client browser supports the AVIF format and the network quality level is L3, the AVIF format is preferred;

[0043] When the network quality level is L2 and the terminal device memory is less than the preset threshold M0, the WebP format is selected;

[0044] When the network quality level is L1 or the client does not support the efficient image coding format, the Progressive JPEG format is used as a fallback;

[0045] The server returns the main image or detail image data in the corresponding encoding format according to the encoding format F indicated in the client request.

[0046] In an exemplary embodiment of the present disclosure, the method further includes:

[0047] Before the client receives the initial low-resolution image portion and completes the image reconstruction process, the image rendering module first loads a visual placeholder image with the same size as the target main image for interface display. The visual placeholder image is generated in the following way:

[0048] Generate low-frequency content based on average color blocks, blur outlines or deep convolutional features of the target main image data, or load a general template image of the corresponding commodity category pre-generated by the server side;

[0049] The image rendering module replaces the visual placeholder image with an actual main image outline image after completing the initial low-resolution image reconstruction, and sequentially superimposes and updates after receiving subsequent incremental image parts.

[0050] According to a second aspect of the present disclosure, a computer-readable storage medium is provided, and the computer-readable storage medium stores a computer program. When the computer program is executed by a processor, any step of the method in the first aspect is implemented.

[0051] According to a third aspect of the present disclosure, an electronic device is provided, and the electronic device comprises:

[0052] A processor, and a memory storing computer-readable instructions. When the computer-readable instructions are executed by the processor, any step of the method in the first aspect is implemented.

[0053] The technical solutions provided by the embodiments of the present disclosure can include the following beneficial effects:

[0054] The present invention implements hierarchical encoding of the main image data on the server side, dividing it into an initial low-resolution image portion and at least one high-definition incremental portion, achieving segmented and hierarchical image transmission and parsing. This hierarchical structure allows the rendering of basic visual outlines even before the image data is fully downloaded, reducing reliance on stable bandwidth and improving image constructibility under weak network conditions. The client's network quality detection module monitors bandwidth, latency, and packet loss rate in real time, enabling the system to perceive the current communication link status. The image request scheduling module dynamically determines the loading order and resolution level based on these network parameters, coupling image requests with communication status and enhancing network responsiveness during the image loading process. Under extreme network conditions, this mechanism can proactively suppress high-definition incremental requests, prioritizing the loading of basic images, thereby avoiding loading failures or long wait times. After receiving the initial low-resolution image, the image rendering module can immediately reconstruct and present the main image outline without waiting for the full high-definition data, enabling pre-construction of the rendering path. Furthermore, the system reserves a buffer for subsequent high-definition incremental portions, improving the efficiency of image overlay triggered by user interaction and reducing response latency compared to traditional serial loading and rendering mechanisms. When user interaction is triggered, the client requests the corresponding image increment, and the client superimposes the update after the server returns. This process performs data splicing based on the structural index, avoiding repeated loading of high-definition full images, reducing data redundancy and transmission volume, and reducing the risk of download interruption. The system can also adjust the loading strategy on demand in a continuous weak network environment, only loading the detail layers that the user is concerned about, and actively allocating transmission resources. Furthermore, the present disclosure can significantly improve the stability, consistency and response speed of e-commerce image display in complex communication environments, and reduce the problem of poor user experience caused by loading failure, freeze or delay.

[0055] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] The accompanying drawings are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification, are used to explain the principles of the present disclosure. Obviously, the drawings described below are only some embodiments of the present disclosure, and those skilled in the art can derive other drawings based on these drawings without inventive effort.

[0057] Figure 1 A system architecture diagram is shown of a method for displaying product images on a mobile device in a low-bandwidth environment, to which an embodiment of the present disclosure can be applied.

[0058] Figure 2 A flow chart showing a method for displaying product images on a mobile device in a low-bandwidth environment according to an embodiment of the present disclosure is shown.

[0059] Figure 3 A flow chart illustrating another method for displaying product images on a mobile device in a low-bandwidth environment according to an embodiment of the present disclosure is shown.

[0060] Figure 4 A schematic diagram of a loading page of a method for displaying product images on a mobile device in a low-bandwidth environment according to an embodiment of the present disclosure is shown.

[0061] Figure 5 A schematic diagram of a loading page of a method for displaying product images on a mobile device in a low-bandwidth environment according to an embodiment of the present disclosure is shown.

[0062] Figure 6 A schematic diagram of a loading page of a method for displaying product images on a mobile device in a low-bandwidth environment according to an embodiment of the present disclosure is shown.

[0063] Figure 7 A schematic structural diagram of an electronic device suitable for implementing the embodiments of the present disclosure is shown.

[0064] In the drawings, the same or corresponding reference numerals denote the same or corresponding parts. DETAILED DESCRIPTION

[0065] The terms used in this specification are for the purpose of describing specific embodiments only and are not intended to limit this specification. As used in this specification and the appended claims, the singular forms "a," "an," "the," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0066] It should be understood that although the terms first, second, third, etc. may be used in this specification to describe various information, such information should not be limited to these terms. These terms are merely used to distinguish information of the same type from one another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information without departing from the scope of this specification. Depending on the context, the term "if" as used herein may be interpreted as "when," "when," or "in response to determining."

[0067] Figure 1 A schematic diagram of the system architecture of a method for displaying product images on a mobile device in a low-bandwidth environment, to which an embodiment of the present disclosure can be applied, is shown.

[0068] like Figure 1As shown, system architecture 100 may include one or more terminal devices such as a smartphone 101, a tablet computer 102, a portable computer 103, a network 104, and a server 105. Network 104 is a medium for providing a communication link between the terminal device and server 105. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0069] The terminal device can be any electronic device with data processing capabilities, which has a display screen for displaying product information such as product images to the user. Such electronic devices include but are not limited to the aforementioned portable computers, smartphones, and tablet computers.

[0070] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as needed. For example, the server 105 may be a server cluster consisting of multiple servers.

[0071] The method for displaying product images on a mobile device in a low-bandwidth environment provided by the embodiment of the present disclosure can be executed by a terminal device, and accordingly, the device for displaying product images on a mobile device in a low-bandwidth environment can be set in the terminal device. However, it is easy for those skilled in the art to understand that the method for displaying product images on a mobile device in a low-bandwidth environment provided by the embodiment of the present disclosure can also be executed by the server 105, and accordingly, the device for displaying product images on a mobile device in a low-bandwidth environment can also be set in the server 105, and this exemplary embodiment does not specifically limit this.

[0072] The present disclosure provides a method for displaying product images on a mobile device in a low-bandwidth environment. Figure 2 As shown, the method may include steps S210 to S240:

[0073] Step S210: The server side obtains the main image data associated with the target product and performs hierarchical encoding processing on the main image data, wherein the hierarchical encoding processing includes converting the main image data into a progressive image structure including an initial low-resolution image portion and at least one high-definition image incremental portion.

[0074] Step S220: The network quality parameters of the current terminal device are collected through the network quality detection module of the client, where the network quality parameters include bandwidth rate, network delay and data packet loss rate, and the network quality parameters are transmitted to the image request scheduling module. The image request scheduling module determines the loading order and resolution level of each image part in the progressive image structure based on the network quality parameters.

[0075] Step S230: After the client receives the initial low-resolution image part, the image rendering module performs image reconstruction processing on the image part to construct a main image outline image for interface presentation. The image rendering module identifies the current image level based on the progressive image structure and reserves an image data cache structure for at least one high-definition image incremental part.

[0076] Step S240: After detecting the user's interactive operation on the main image, the client generates an image incremental loading request and sends the request to the server. The server returns at least one high-definition image incremental part corresponding to the current level of the main image based on the request; after the client receives the high-definition image incremental part, the image rendering module performs data overlay processing on the constructed image level to update it to a high-resolution main image containing more image details.

[0077] The following describes in detail the method for displaying product images on a mobile device in a low-bandwidth environment in this exemplary embodiment.

[0078] In step S210, the server side obtains the main image data associated with the target product and performs hierarchical encoding processing on the main image data, wherein the hierarchical encoding processing includes converting the main image data into a progressive image structure including an initial low-resolution image portion and at least one high-definition image incremental portion.

[0079] In this example implementation, the server obtains the main image data associated with the target product and performs a hierarchical encoding process on the image data. This process is used to construct a hierarchical progressive image structure consisting of at least two clearly defined image data portions: an initial low-resolution image portion and at least one high-resolution image increment portion.

[0080] The primary image data is typically a color still image, originally sized as a pixel matrix with a width of W and a height of H. Before processing, the image signal is represented using a three-channel color model, forming a three-dimensional data structure. The color channels are each component of R, G, and B, and their pixel distribution is denoted as I(x, y, c), where x∈[0, W-1], y∈[0, H-1], and c∈{R, G, B}. This image data can originate from manually captured images, generated by graphics, or automatically processed, and its sampling accuracy can be 8 or 10 bits per channel.

[0081] To achieve hierarchical encoding, the server first performs multi-level downsampling on the original image to generate a set of image subsets with gradually increasing spatial resolution. In this embodiment, the downsampling can be achieved by two-dimensional convolution downsampling or regional average pooling with a fixed scaling ratio. Specifically, the original image is scaled to different sizes in turn to obtain multiple image levels {L0, L1, ..., L n}, where L0 is the initial low-resolution image part with the smallest resolution, used to quickly display the contour information of the product image, L1 to L n It is the incremental part of the high-definition image, and the pixel density of each layer is 2 to 4 times that of the previous layer.

[0082] Each incremental image is not an independent image, but a quality or detail enhancement portion relative to the previous image. It can be constructed in one of the following two ways:

[0083] First, the high-level image is differentially computed with the upsampled low-level image in the spatial domain, retaining the difference image as the incremental portion, i.e., each ΔL_k = L_k - Up(L_{k-1}), where Up(·) represents the upsampling function. This difference image can be separately encoded, packaged, and labeled with its level index through the image compression module, allowing the client to load and decode it on demand.

[0084] The second approach is to construct a scanning hierarchy in the frequency domain, splitting the compressed data segments of each image using the frequency information of the image blocks. The low-frequency coefficients are aggregated to form the initial image portion, and the high-frequency subbands are used as several incremental image portions. In this mode, the image is divided into multiple small blocks. After performing a transformation such as DCT or DWT on each block, it is encoded according to the frequency level, with the primary subband as the base layer. The remaining parts are organized into image increments in batches according to the upper frequency limit.

[0085] To maintain consistency and splicing between layers, in this example implementation, when constructing incremental image parts, the same color space, pixel arrangement, and encoding parameter system are used for each layer of the image to avoid color deviation, jagged edges, or structural distortion when the client merges. Each image part is attached with identification data before packaging, including but not limited to: layer number, relative zoom factor, image size, segment start and end positions, reconstruction priority, and other fields. The identification data can be packaged together with the image data into a single multi-segment image file, or configured as index metadata in the structure table.

[0086] In actual deployment, the hierarchical coding structure is stored as a multi-layer resource corresponding to the main image ID, and the server can return part or all of the image data as needed to meet the request of different loading levels of the client. Each image increment part can be independently distributed or encapsulated with the previous image data to form a hierarchical decoding data structure, so that the client can choose whether to separate decoding according to its decoding capability.

[0087] In step S220, the network quality parameters of the current terminal device are collected by the network quality detection module of the client, including bandwidth rate, network delay and data packet loss rate, and the network quality parameters are transmitted to the image request scheduling module. The image request scheduling module determines the loading order and resolution level of each image part in the progressive image structure based on the network quality parameters.

[0088] In this embodiment, the image request scheduling module first collects and analyzes the three network quality parameters of bandwidth rate, network delay and data packet loss rate, then maps the above parameters through a set of segmentation functions to obtain the current network level L, and adjusts the level range and priority order of image loading behavior according to the level L, thereby realizing the dynamic allocation of image loading resources under different network conditions.

[0089] In a specific structure, the image request scheduling module includes a network state acquisition unit, a parameter normalization processing unit, a level calculation unit and a loading strategy decision unit. The network state acquisition unit extracts the following parameters from the network transmission link in real time by calling the interface provided by the operating system or the hardware and software layer driver: B- represents the current available downlink bandwidth rate, unit: Mbps, defined as the maximum amount of data that can be stably received from the server to the client per unit time; D- represents the round-trip delay of the network, unit: ms, usually obtained through the three-way handshake process or ICMP probe packet statistics; P- represents the packet loss rate, which is the ratio of the number of lost packets to the total number of packets sent per unit time.

[0090] The above three parameters are input to the parameter normalization processing unit and are mapped to a unified dimension interval for subsequent calculation and processing. The normalization function can be set as follows:

[0091] B' = B / B_max (0≤B'≤1)

[0092] D' = D / D_max (0≤D'≤1)

[0093] P' = P / 100 (0≤P'≤1)

[0094] Where B_max and D_max are the maximum tolerable bandwidth and delay upper limit thresholds set by the system. The normalized parameters are input to the level calculation unit and mapped through the following piecewise function:

[0095] L=f(B,D,P)

[0096] The function f is a discrete-valued function based on multi-conditional logic judgment, and its output is the network level L, whose possible values ​​are L1 (low speed), L2 (medium speed) or L3 (high speed). The level determination rules are as follows:

[0097] If B<T1或D> If T2 or P>T3, then L=L1;

[0098] If T1≤B <T4且D≤T2且P≤T3,则判定为L=L2;

[0099] If B≥T4, D≤T5, and P≤T6, it is determined that L=L3.

[0100] T1 to T6 are preset threshold parameters, which can be obtained by offline tuning by the e-commerce platform server based on historical user access data, average image loading response time, and terminal performance models. For example, T1 can be set to 0.8Mbps, T2 to 300ms, T3 to 0.05 (i.e., 5%); T4 to 3Mbps, T5 to 150ms, and T6 to 0.01. Each parameter can be independently configured to support judgment requirements in various weak network scenarios.

[0101] The network level L output by the level calculation unit is passed to the loading strategy decision unit. The unit determines the loading level of the main image of the current client based on the level L:

[0102] When L=L1, only the initial low-resolution image part L0 is loaded to avoid high bandwidth resource occupation and loading failure; when L=L2, on the basis of loading the initial part, the first-level high-definition image incremental part ΔL1 is further loaded to improve image clarity but control data volume; when L=L3, the system starts the full image loading process, including all high-definition image incremental parts ΔL1 to ΔL n , to reconstruct the complete high-resolution main image.

[0103] In actual deployments, to avoid frequent switching of level L and resulting in loading policy fluctuations, this implementation further implements a level retention window mechanism. Specifically, if L fluctuates multiple times within N consecutive seconds, the minimum value of L or the most recent stable value is preferentially used as the current loading basis, preventing short-term bandwidth fluctuations from causing loading level oscillations. The N value can be set between 3 and 5 seconds to provide a certain smoothing effect.

[0104] Alternatively, the segmentation decision function f can be implemented as a neural network mapping function f′(B,D,P)→L, where the model input is the normalized parameter vector [X1,X2,X3] and the output is one-hot encoded three-category labels, with classification performed using a softmax output layer. This approach is suitable for platform deployment scenarios with frequently changing dynamic conditions or complex heterogeneous network environments.

[0105] In other exemplary embodiments of the present disclosure, to further improve image loading efficiency and adapt to diverse terminal system capabilities, the image request scheduling module dynamically selects an image encoding format based on the client's current state before generating an image loading request. This image encoding format selection operation is based on three parameters: system compatibility parameters, network quality parameters, and image type parameters. After comprehensive evaluation, the image encoding format F to be used in subsequent loading requests is determined.

[0106] Among them, the system compatibility parameters include but are not limited to the client operating system type, browser type and its version number, whether the graphics processing module supports hardware decoding capabilities and other information. This information can be obtained through client embedded instruction sets, User-Agent identifier analysis, WebAssembly detection and other methods. For example, when the browser kernel is Chromium 85 and above, and the operating system supports modern image rendering APIs, it can be considered compatible with the AVIF format. The network quality parameter is the aforementioned network level L, and its values ​​include L1, L2 and L3, and is determined by the image request scheduling module based on real-time network performance. The image type parameter is used to distinguish whether the image involved in the current request is the main image or the detail image. Since the display quality priority of the main image is higher than that of the detail image, a higher fidelity standard can be adopted in the encoding format strategy.

[0107] Based on the above parameters, the image request scheduling module executes the image encoding format selection logic. The specific rules are as follows:

[0108] When the network quality level is L3 and the client browser supports AVIF, AVIF is preferred as the image loading encoding format. AVIF (AV1 Image File Format) is a static image format based on AV1 video compression technology. It has high compression ratios and image detail preservation capabilities. On high-bandwidth and highly compatible terminals, it can minimize transmission volume while preserving visual quality.

[0109] When the network quality level is L2 and the terminal device's currently available memory is less than a preset memory threshold M0, the WebP format is preferred. WebP combines excellent image compression capabilities with decoding speed, making it suitable for moderate network conditions or resource-constrained devices, and is particularly widely supported on Android. The memory threshold M0 can be set based on platform adaptation experience, such as 256MB or 512MB, and the total amount of allocable graphics memory returned by the client system interface is used for judgment.

[0110] When the network quality level is L1, or when the client detects that it doesn't support AVIF or WebP, the image request scheduling module falls back to the Progressive JPEG format. This format enhances traditional JPEG compression with multi-segment scanning, allowing for progressively enhanced detail after the initial low-quality preview frame loads, ensuring excellent compatibility and robust performance on weak network connections.

[0111] In actual implementation, the image request scheduling module will include the selected encoding format F field in the image loading request header. The server will parse it and load the main image or detail image data in the corresponding format and return it. The server can index multiple encoding versions based on the image ID, or complete multi-format pre-encoding processing during the image generation phase and cache it on the content distribution node to support fast response. This method can also be linked with the image level control logic, that is, in a low-speed network environment, a low-encoding complexity format is selected and only the low-level image portion is requested, forming a dynamically adjusted loading strategy closed loop from the overall path.

[0112] In some exemplary embodiments, in order to alleviate the problems of interface blankness, flickering or perceived delay in image loading that may occur during the loading of the initial low-resolution image portion by the client, the method also includes: before the client receives the initial low-resolution image portion and completes the image reconstruction processing, the image rendering module pre-loads a visual placeholder image to occupy the same size area as the target main image in the user interface, thereby enhancing the interface structure stability and visual continuity.

[0113] refer to Figure 4 As shown, the visual placeholder image is a low-complexity image data structure that lacks the full details of the main image, but maintains a consistent color layout and outline distribution with the target main image. This visual placeholder image can be generated in one of two ways: directly by the client based on low-frequency features in the main image data; or by the server using a category template image pre-built and transmitted based on the product category.

[0114] In the first approach, after receiving the main image metadata or partial image data (such as a thumbnail or edge feature vector), the client downsamples the image based on the average color block generation technique, extracting the dominant hue of each region and filling it with a uniform color block array to form a rough placeholder image for color perception. This process can use the image block averaging function MeanBlock(x,y), which divides the original image into M×N small regions and calculates the pixel mean of the R, G, and B channels in each region:

[0115] R_avg(i,j)=(1 / n)∑kR k

[0116] G_avg(i,j)=(1 / n)∑kG k

[0117] B_avg(i,j)=(1 / n)∑kB k

[0118] Where (i, j) is the region index of the i-th row and j-th column, and n is the number of pixels in the region.

[0119] Alternatively, based on the blurred outline generation method, the client can perform Gaussian blur processing and brightness downsampling after receiving partial image outline data to construct a blurred background image. This image only shows the general shape of the image and does not contain high-frequency texture information, thereby effectively reducing rendering overhead and avoiding content misleading. Blur processing can use a two-dimensional Gaussian kernel Gσ(x,y) to convolve the image matrix I(x,y), resulting in:

[0120] I′(x,y)=I(x,y)*Gσ(x,y)

[0121] In another alternative, the server pre-builds a universal placeholder template based on the product category and returns it along with the product metadata. The template image has a fixed size, such as Figure 1 The template image is a uniform 512×512 pixel image. The image content can be a uniform grayscale placeholder image (skeleton image), a gray background image with a brand logo, or a placeholder image with a category outline. For example, for "shoes" products, the template image could be a gray shadow image of a shoe shape; for "cosmetics" products, the template image could be a bottle outline. This approach avoids real-time image processing on the client side, improving loading speed.

[0122] Step 230: After the client receives the initial low-resolution image portion, the image rendering module performs image reconstruction processing on the image portion to construct a main image outline image for interface presentation. The image rendering module identifies the current image level based on the progressive image structure and reserves an image data cache structure for at least one high-definition image incremental portion.

[0123] In this embodiment, the initial low-resolution image portion is the first level in the progressive image structure, and its data content can be a low-pixel version of the complete image, or a collection of image blocks encoded with low-frequency information. In one implementation, the initial image portion is implemented by downsampling the original image I(x,y,c) to I0(x',y',c), where (x',y')∈[0,W0)×[0,H0), W0=W / 2k, H0=H / 2n, and n is the level scaling factor, which is commonly 2 or 3. The downsampling can be implemented based on regional averaging, bilinear interpolation, or Lanczos filtering. The image block structure adopts row-major encoding, and each block contains pixel matrix data and block position index to support parallel decoding and regional caching.

[0124] After acquiring this initial portion, the image rendering module calls the image decoding submodule to decode this portion of the image data into a framebuffer image object. This object can be stored using the GPU's video memory cache, a shared memory buffer, or a system memory pool, depending on the device's graphics hardware configuration. Under a common architecture, the decoded data can be loaded using OpenGL or Vulkan image texture units, bound as a 2D texture with a W0×H0 size. This texture is then scaled in the vertex and fragment shaders to fit the actual display size of the main image container.

[0125] After the initial reconstruction is completed, the image rendering module needs to identify the current level according to the progressive image structure and determine whether there is a subsequent HD image increment that can be superimposed. The progressive image structure includes a layer index table or metadata description field. Each layer L k Contains layer number k, layer resolution R k , layer data offset and compression format type, etc. The client locates the current image level through this structure and binds the level identifier. If the current layer is L0, the subsequent image increments are ΔL1 to ΔL n The loading order is related to the network level and the output of the behavior prediction module. Figure 5 As shown, this is the display effect after the primary image is constructed, which is enough for users to initially obtain product information.

[0126] To support the rapid superposition of subsequent incremental data, the image rendering module needs to reserve an image data cache structure for the HD image increment after completing the primary image construction. The cache structure is divided into multiple continuous areas in the memory layout, each area is used to store the incremental data of a specific layer. Assuming the cache limit is C and the total number of layers is N, the client can cache data for each ΔL. k Allocate buffer size C k =min(C / N,Sk ), where S k is the layer ΔL k The cache structure can use a ring buffer, a hierarchical memory pool, or an LRU replacement strategy to control its life cycle and write order.

[0127] If the client has GPU graphics buffer support, this cache structure can also be mapped to the video memory area and stored using the Frame Buffer Object (FBO) mechanism, allowing each incremental image to be directly overlaid on the existing main image texture surface via OpenGL framebuffer rendering instructions. Otherwise, in a pure software stack environment, the cache structure exists as a byte array in the system main memory, and the target layer location is located through pointer indexing and asynchronous writing is performed.

[0128] On resource-constrained terminals, a shared cache area for some layers can also be used. For example, a unified high-definition layer buffer HD_Buffer is set up, and logical segments are dynamically allocated according to the current loaded layer number to achieve cache reuse. Alternatively, a layer priority array P = {p1, p2, ..., pn} can be set, where pk represents the layer ΔL k When the cache space is insufficient, the system will prioritize clearing low-priority layer data according to the min(P) strategy to ensure that key layers are available.

[0129] Step S240: After detecting the user's interactive operation on the main image, the client generates an image incremental loading request and sends the request to the server. The server returns at least one high-definition image incremental part corresponding to the current level of the main image based on the request; after the client receives the high-definition image incremental part, the image rendering module performs data overlay processing on the constructed image level to update it to a high-resolution main image containing more image details.

[0130] In this implementation, these interactive operations include, but are not limited to, user clicks on the main image, zooming in and out of the image, long-pressing, swiping into the main image area, or placing the main image in the focus window. The client detects these actions in real time within the image rendering module through event listeners or state-aware logic. Once a specific threshold trigger condition is met, an incremental image load request is generated.

[0131] The incremental image load request includes fields such as the image identifier ID_img, the currently loaded image layer index k, the terminal network level L, the encoding format F, the request timestamp T_req, and the client hardware resource status summary R_sum. The image layer index k represents the image layer currently displayed by the client. For example, k=0 means only layer L0 is displayed, and ΔL1 should be requested later. L is the network level determined based on the previous calculation results, and F refers to the encoding format used for the image data, such as Progressive JPEG, WebP, AVIF, etc. The resource status summary may include indicators such as available memory, CPU usage, and GPU status.

[0132] The client encapsulates the request into an HTTP, QUIC, or custom binary protocol message through the image request scheduling module and sends it to the server-side specified resource interface address. After receiving the request, the server searches the image index table for the image incremental part ΔL_{k+1} to ΔL_{k+n} that matches the current level k based on the image identifier, where n can be 1 or more, and the specific loading depth depends on the network level L and the resource scheduling strategy. The server encapsulates each image incremental part into an independent data block, which is accompanied by the layer number, resolution, data length, compression parameters, and synchronization identification bit. To ensure data integrity during asynchronous network transmission, each data block can also be accompanied by a redundant check field, such as CRC-32 or hash digest.

[0133] After receiving the incremental part of the high-definition image, the client passes the data stream to the image decoding module for decompression and buffering, and to the image rendering module to perform the image layer overlay operation. The overlay process is divided into two stages: the first is data alignment, and the second is image synthesis. In the data alignment stage, the rendering module uses translation, scaling or zero-padding alignment operations based on the layer size and position parameters recorded in ΔL_{k+1} to keep it spatially consistent with the current main image frame cache structure. Let L0 be the current display image frame, its pixel array is I0(x, y, c), ΔL1 is the image increment, its pixel array is D1(x, y, c), then the synthesized image frame can be expressed as:

[0134] I1(x,y,c)=I0(x,y,c)+α·D1(x,y,c)

[0135] Where α is the superposition weight coefficient, which ranges from [0,1] and is used to control the visual contribution ratio of the incremental image to the final image. It can also be set as a position-dependent weight function α(x,y) according to the content area.

[0136] During the image synthesis phase, the image rendering module invokes GPU texture synthesis instructions or uses the software rendering pipeline to overlay the new layer image onto the texture surface of the current main frame. This synthesis process can be achieved through mixed rendering, layer merging, or incremental bitmap overlays. To improve rendering efficiency, if the client supports a multi-layer image buffer structure (such as Frame Buffer Stack), each layer can be mapped to a separate texture and then combined on top of it for output display.

[0137] To reduce user-perceived jitter in weak network conditions, the rendering module can set an inter-frame gradient effect, introducing a smooth transition frame between frames I0 and I1, so that the change in image quality appears gradual. The inter-frame interpolation algorithm can use linear interpolation, bilateral filtering, or temporal weighted synthesis.

[0138] This image incremental overlay process can be repeated until all image incremental parts are loaded, and the main image is eventually updated from the low-resolution outline image to the complete high-definition main image. Figure 6 As shown, a complete high-definition main image has been obtained.

[0139] refer to Figure 3 As shown, in some exemplary embodiments of the present disclosure, steps S250 to S270 may also be included.

[0140] In step S250, the user behavior collection module collects the behavior data of the current user on the e-commerce page. The behavior data includes click records for non-main image areas, page dwell time, and scrolling behavior trajectories. The behavior data is input into the user behavior analysis module to generate attention weight data related to each detail image.

[0141] In this example implementation, the user behavior analysis module includes an attention prediction model trained based on a machine learning algorithm; wherein the attention prediction model receives an input feature vector X and outputs predicted attention weight data for each detail graph.

[0142] In a specific implementation, the input feature vector X includes at least the following two types of behavioral features. The first type is real-time operation information related to the current page, such as the scrolling speed v_scroll in the current page, measured in pixels per second, reflecting the strength of the user's intention to slide on the page; another example is the duration t_main of the current user's stay in the main image area of ​​the product, measured in seconds, which is used to quantify the visual interest weight shown by the user's stay on the main image. The second type is contextual features related to historical behavior, such as the user's historical click sequence vector click_seq, which is a one-dimensional time series tensor that represents the time sequence and category coding of the user's past N clicks on the detail image; and the detail image category distribution vector hist_type_dist that the user has paid attention to in similar product pages in the past, which can be expressed as a probability distribution vector (p1, p2, ..., p_k), where p_i is the user's historical click frequency or stay frequency on the i-th category detail image.

[0143] The attention prediction model is a model built based on a deep neural network (DNN), random forest or support vector machine (SVM), and is optimized during the training phase by minimizing the following loss function:

[0144] Loss = MSE(V_pred,V_true)

[0145] Among them, V_pred is the attention weight vector output by the model prediction, V_true is the attention weight label obtained by the real user operation statistics, and MSE is the mean square error function.

[0146] The prediction model can be constructed using a variety of supervised learning structures. In a preferred embodiment, the model is a deep neural network DNN with a multi-layer feedforward structure, whose input layer accepts the standardized feature vector X, and after nonlinear mapping of multiple hidden layers, the final output is a vector V_pred of length M, where M is the number of detail images to be displayed on the page. Each V_pred[i]∈[0,1] represents the predicted value of the attention weight of the i-th detail image. The hidden layer may include a ReLU activation unit, a Batch Normalization layer, and a Dropout anti-overfitting mechanism, and the parameters are obtained through back-propagation training of the gradient descent algorithm. The training goal is to minimize the difference between the predicted output V_pred and the true annotation V_true.

[0147] The true attention label V_true can be derived from the statistical aggregation of real user click feedback, stay time, and jump after click. The label construction rule can be: if the user clicks on a detail image, the corresponding position is 1, otherwise it is 0. It can also be normalized using a weight distribution form. The loss function uses the mean square error (MSE) and is defined as follows:

[0148] Loss=MSE(V_pred,V_true)=(1 / M)∑_{i=1}^M(V_pred[i]-V_true[i]) 2

[0149] Among them, M is the number of detail images, V_pred[i] is the predicted attention value of the i-th detail image output by the model, and V_true[i] is the corresponding actual attention label value.

[0150] In other exemplary embodiments of the present disclosure, the model may also adopt an architecture other than the DNN structure, such as a support vector machine (SVM) or a random forest regression model, which is not particularly limited in this exemplary embodiment.

[0151] In step S260, the image request scheduling module receives the attention weight data, and in combination with the network quality parameters obtained in step 2, sorts the preloading order of multiple detail images associated with the target product, where the detail images are other product images that are different from the main product image; the detail images include at least two of the following: price information images, user evaluation images, discount information images, product detail images, and product variant images.

[0152] In this example implementation, the attention weight data is a numerical vector corresponding to a plurality of detail graphs, denoted as V = {v1, v2, ..., v n}, where vi∈[0,1] represents the estimated attention of the i-th detail image in the current user context, and n is the total number of detail images to be processed. The closer each weight value is to 1, the more likely the user is to pay attention to that detail image. This vector is generated by the aforementioned attention prediction model based on user behavior characteristics, and its order can correspond one-to-one with the detail image categories, such as price information images, user review images, discount information images, product details images, and product variant images.

[0153] At the same time, the image request scheduling module introduces the network quality parameter as a weighting factor during the sorting process to avoid assigning loading tasks to image types with large data volumes when the network level is poor (such as L1). The network quality parameter is the network level L calculated in the previous step, and its possible values ​​are L1, L2, and L3. In this embodiment, a network adjustment coefficient γ(L) can be introduced, which is defined as follows:

[0154] γ(L)=0.6, when L=L1;

[0155] γ(L)=0.85, when L=L2;

[0156] γ(L)=1.0, when L=L3.

[0157] The ranking score function can be constructed as S i=vi×γ(L)×(1 / si), where si is the estimated image size of the i-th detail image (in KB), and 1 / si is the load burden suppression factor. The image request scheduling module is based on the ranking score S of all detail images. i Arrange in descending order to form the final preloading queue.

[0158] For example, in the case of network level L2, if the user attention weight vector is V = {0.9, 0.3, 0.7, 0.5, 0.4} and the corresponding image size is S = {100, 200, 120, 80, 150} KB, then its score is:

[0159] S1=0.9×0.85×(1 / 100)=0.00765

[0160] S2=0.3×0.85×(1 / 200)=0.001275

[0161] S3=0.7×0.85×(1 / 120)=0.004958

[0162] S4=0.5×0.85×(1 / 80)=0.0053125

[0163] S5=0.4×0.85×(1 / 150)=0.002267

[0164] Based on this, the loading priority order is as follows: Figure 1 →Details Figure 4 →Details Figure 3 →Details Figure 5 →Details Figure 2 .

[0165] The above-mentioned sorting mechanism can be implemented by setting a priority queue in the image request scheduling module. The loading tasks of the detail images will be passed to the resource loading module in this order and asynchronously preloaded within the range allowed by the network bandwidth. To improve the robustness of the system, a minimum attention threshold θ_min can be set. When vi < θ_min, the image will not be loaded temporarily and will re-enter the loading queue after subsequent behavior is triggered or the network status improves. The dynamic adjustment mechanism of the detail image preloading order can be recalculated every fixed time period T, or it can be triggered immediately when there is a significant change in user interaction behavior.

[0166] In step S270, the client preloads the detail image in a sorted order through the resource loading module according to the loading sequence control instruction generated by the image request scheduling module, and the preloading process writes the detail image data into the local cache; when the client detects that the user interface has scrolled to the display position of the corresponding detail image, the image rendering module calls the image data in the cache to complete the display rendering.

[0167] In this example implementation, the loading sequence control instructions include a queue of image loading tasks, each of which consists of a target image ID, image type, loading priority, estimated size, and intended display area location. The resource loading module schedules loading tasks sequentially based on this queue and writes the acquired detail image data to a local cache. The cache structure can utilize a key-value mapping-based cache dictionary, where the key is the image's unique ID and the value is a pointer to the image data and its metadata (including layer ID, size, decoding status, loading timestamp, etc.).

[0168] In order to reasonably control the memory usage of the local cache, this embodiment provides an image cache control module for dynamically setting the image cache upper limit C based on the available memory capacity M of the terminal device and the current network quality level L. The image cache upper limit is calculated as follows:

[0169] C=min(C_max,α·M·W(L))

[0170] Where C_max is the system's uniformly configured maximum cache capacity, in bytes; α is the cache usage ratio coefficient, ranging from 0 to 1, indicating the percentage of the maximum available memory allowed for image caching; and W(L) is the bandwidth weight function corresponding to the network level L, which is used to adjust the sensitivity of image caching in different network environments. For example, W(L1) = 0.6, W(L2) = 0.85, and W(L3) = 1.0 can be set to appropriately reduce the cache limit under low bandwidth conditions to avoid resource congestion caused by loading too many images.

[0171] When the actual cache usage reaches the upper limit C, the image cache control module initiates the eviction policy. This implementation uses a "first-unrendered, first-clear" rule, prioritizing cache entries that have been downloaded but not yet accessed by a user view or triggered rendering. The system records each image's "last access time" and "rendered" status, enabling priority sorting and on-demand eviction.

[0172] Furthermore, to improve loading efficiency and rationally allocate system resources, the resource loading module in this example embodiment also includes a multi-threaded management mechanism. This mechanism primarily comprises a thread pool manager and a bandwidth allocation controller. The thread pool manager is used to dynamically calculate the actual number of image loading threads, T, based on the number of CPU cores N on the terminal device and the platform-defined thread concurrency limit, T_max:

[0173] T=min(N,T_max)

[0174] Where N is the number of logical cores obtained through system API, T_max is the thread safety upper limit set by the platform (e.g. 8 or 16), and the final determined thread number T is used to execute the image loading task concurrently.

[0175] The bandwidth allocation controller is used to monitor the real-time download rate R of each thread during the image loading process i (unit: KB / s), and when it is detected that the R of a certain thread exceeds the preset bandwidth threshold R_max, the image loading request of the lower priority detail image in the current thread is actively suspended or delayed to ensure that the loading task of the main image or high-attention detail image is completed in priority. The R_max can be determined based on historical statistics, bandwidth prediction model or system configuration, and the common value range is 500 KB / s to 2 MB / s. This bandwidth adjustment mechanism avoids the occupation of total bandwidth resources by a single high-flow request, and realizes the dynamic hierarchical scheduling of the loading task. i

[0176] When the client detects that the user interface is scrolled to the display area associated with a certain detail image, the image rendering module extracts the corresponding image data from the cache, decodes it into a displayable image object according to the current rendering pipeline state, and outputs it to the preset position in the interface through GPU texture mapping or 2D canvas drawing. If the image data has not been completely loaded when the rendering is triggered, the system will be replaced by a gray-scale placeholder or a progress chart until it is automatically replaced and presented after loading is completed, ensuring the continuity of user experience and the stability of interface logic.

[0177] The exemplary embodiments of the present disclosure also provide a computer readable storage medium having stored thereon a program product capable of implementing the above-mentioned method of the present specification. In some possible embodiments, various aspects of the present disclosure can also be implemented in the form of a program product including program codes for causing an electronic device to perform the steps described in the above-mentioned “Exemplary Methods” section according to various exemplary embodiments of the present disclosure when the program product is run on the electronic device.

[0178] The program product can adopt a portable compact disc read-only memory (CD-ROM) and include program codes, and can be run on an electronic device such as a personal computer. However, the program product of the present disclosure is not limited to this, and in this document, the readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device or apparatus.

[0179] ​The program product can employ any combination of one or more computer-readable media. The computer-readable media can be a computer-readable storage medium or a computer-readable signal medium. The computer-readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium include the following: an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0180] The computer-readable signal medium can include a computer-readable storage medium that is propagated as a carrier wave. The computer-readable signal medium can further be any computer-readable medium that is not a storage medium. The computer-readable signal medium can be a computer-readable storage medium that is a propagated signal on a carrier wave.

[0181] The program code embodied on the computer-readable media can be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0182] The program code can be executed by one or more programmable processors, which can be implemented using one or more microprocessors, microcontrollers, digital signal processors, central processing units, state machines, logic circuitries, and / or any other devices suitable for retrieval and execution of instructions. The program code can execute entirely on a user's computing device, partly on the user's computing device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device or entirely on the remote computing device or server. In the latter scenario, the remote computing device can be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computing device, such as through the Internet using an Internet Service Provider (ISP).

[0183] In addition, an exemplary embodiment of the present disclosure also provides an electronic device capable of implementing the method of displaying a product picture in a low-bandwidth environment by the mobile device.

[0184] The electronic device 600 according to this embodiment of the present disclosure will be described below with reference to Figure 7 Figure 7 ​The electronic device 600 shown is merely an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0185] like Figure 7 As shown, electronic device 600 is implemented as a general-purpose computing device. Components of electronic device 600 may include, but are not limited to, the aforementioned at least one processing unit 610, the aforementioned at least one storage unit 620, a bus 630 connecting various system components (including storage unit 620 and processing unit 610), and a display unit 640.

[0186] The storage unit 620 stores program code that can be executed by the processing unit 610, causing the processing unit 610 to perform the steps described in the "Exemplary Method" section above according to various exemplary embodiments of the present disclosure. For example, the processing unit 610 can perform the method steps in the exemplary embodiments of the present disclosure.

[0187] The storage unit 620 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 621 and / or a cache memory unit (Cache) 622 , and may further include a read-only memory unit (ROM) 623 .

[0188] The storage unit 620 may also include a program / utility 624 having a set (at least one) of program modules 625, such program modules 625 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0189] Bus 630 may represent one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0190] The electronic device 600 can also communicate with one or more external devices 670 (e.g., a keyboard, a pointing device, a Bluetooth device, etc.), one or more devices that enable a user to interact with the electronic device 600, and / or any device that enables the electronic device 600 to communicate with one or more other computing devices (e.g., a router, a modem, etc.). Such communication can occur via an input / output (I / O) interface 650. Furthermore, the electronic device 600 can communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network such as the Internet) via a network adapter 660. As shown, the network adapter 660 communicates with other modules of the electronic device 600 via a bus 630. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with the electronic device 600, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0191] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes a number of instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0192] Furthermore, the figures above are merely illustrative of the processes included in the methods according to exemplary embodiments of the present disclosure and are not intended to be limiting. It is readily understood that the processes illustrated in the figures above do not indicate or limit the temporal order of these processes. Furthermore, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0193] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0194] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow from the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present disclosure being indicated by the claims.

[0195] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying product images on a mobile device in a low-bandwidth environment, characterized in that: include: Obtaining, by the server, main image data associated with the target product and performing a hierarchical encoding process on the main image data, the hierarchical encoding process comprising converting the main image data into a progressive image structure comprising an initial low-resolution image portion and at least one high-resolution image increment portion; The network quality detection module of the client collects network quality parameters of the current terminal device, including bandwidth rate, network delay, and data packet loss rate, and transmits the network quality parameters to the image request scheduling module. The image request scheduling module determines the loading order and resolution level of each image part in the progressive image structure based on the network quality parameters; After the client receives the initial low-resolution image portion, the image rendering module performs image reconstruction processing on the image portion to construct a main image outline image for interface presentation. The image rendering module identifies the current image level based on the progressive image structure and reserves an image data cache structure for at least one high-definition image incremental portion. After detecting a user interaction operation on the main image, the client generates an image incremental loading request and sends the request to the server. The server returns at least one high-definition image incremental portion corresponding to the current level of the main image according to the request; After receiving the incremental part of the high-definition image, the client performs data overlay processing on the constructed image layer through the image rendering module to update it into a high-resolution main image containing more image details.

2. The method for displaying product pictures according to claim 1, characterized in that: The method further comprises: The user behavior collection module collects the user's behavior data on the e-commerce page, including click records for non-main image areas, page dwell time, and scrolling behavior trajectories. The behavior data is input into the user behavior analysis module to generate attention weight data related to each detail image; The image request scheduling module receives the attention weight data and, in combination with the network quality parameter, sorts the preloading order of multiple detail images associated with the target product, wherein the detail images are other product images different from the main product image; the detail images include at least two of the following: a price information image, a user evaluation image, a discount information image, a product detail image, and a product variant image; The client preloads the detail image in a sorted order through a resource loading module according to the loading sequence control instruction generated by the image request scheduling module, and the preloading process writes the detail image data into a local cache; when the client detects that the user interface has scrolled to the display position of the corresponding detail image, the image rendering module calls the image data in the cache to complete the display rendering.

3. The method for displaying product pictures according to claim 1 or 2, characterized in that: The image request scheduling module classifies network quality parameters using the following piecewise function: L=f(B,D,P) Among them, f is a rule-based piecewise function, B represents the current bandwidth rate, D represents the network latency, P represents the packet loss rate, L represents the network level, and its values include three levels: low speed (L1), medium speed (L2), and high speed (L3). f is a preset threshold mapping function and satisfies the following conditions: If B < T1 or D > T2 or P > T3, then L = L1; If T1 ≤ B < T4 and D ≤ T2 and P ≤ T3, then L = L2; If B ≥ T4 and D ≤ T5 and P ≤ T6, then L = L3; The image request scheduling module adjusts the image loading strategy according to the level L, where: At the L1 level, only the initial low-resolution image part is loaded; At the L2 level, the initial part and the first-level high-definition image increment part are loaded; At the L3 level, all available image increment parts are loaded to present a complete high-resolution image.

4. The method for displaying product pictures according to claim 3, characterized in that: The client includes an image cache control module, and the image cache control module dynamically sets the image cache upper limit C according to the available memory capacity M of the terminal device and the current network quality level L; the upper limit C satisfies the following rules: C = min(C_max, α·M·W(L)) Among them, C_max is the system-preset cache maximum value, α is a cache coefficient (0 < α ≤ 1), and W(L) is a weight function corresponding to the network quality level L; When the cache upper limit C is full, the image cache control module gradually releases the cache space according to the strategy of preferentially clearing the earliest unrendered detail image.

5. The method for displaying product pictures according to claim 2, characterized in that: The user behavior analysis module includes an attention prediction model trained based on a machine learning algorithm; among them, the attention prediction model receives an input feature vector X and outputs the predicted attention weight data of each detail image; The feature vector X includes at least two of the following: the historical click sequence vector of the current user; the scrolling speed within the current page; the duration that the current user stays in the main product image area; the category distribution of the detail images that the user has paid attention to in the past similar product pages; The attention prediction model is a model constructed based on a deep neural network (DNN), random forest, or support vector machine (SVM), and is optimized by minimizing the following loss function during the training stage: Loss = MSE(V_pred, V_true) Among them, V_pred is the attention weight vector predicted and output by the model, V_true is the attention weight annotation obtained from real user operations, and MSE is the mean square error function.

6. The method for displaying product pictures according to claim 2, characterized in that: The resource loading module executes the image loading operation through a multi-thread management mechanism, and the multi-thread management mechanism includes a thread pool manager and a bandwidth allocation controller, where: The thread pool manager dynamically allocates the number of image loading threads T according to the number of CPU cores N of the current terminal and the set thread upper limit T_max, and the number of threads T satisfies: T = min(N, T_max) The bandwidth allocation controller monitors the real-time download rate R_i of each thread during the image loading process, and suspends the loading requests of low-priority detail images when the R_i of any thread exceeds the preset threshold R_max to preferentially process the loading tasks of the main image and high-attention detail images.

7. The method for displaying product pictures according to claim 3, characterized in that: Before the image request scheduling module generates the image loading request, the method further includes: Dynamically select an image encoding format F based on the current client's system compatibility parameters, network quality parameters, and image type. The encoding format F includes at least two of JPEG, WebP, and AVIF. The encoding format selection is performed according to the following rules: When it is detected that the client browser supports the AVIF format and the network quality level is L3, the AVIF format is preferred; When the network quality level is L2 and the terminal device memory is less than the preset threshold M0, the WebP format is selected; When the network quality level is L1, or the client does not support the efficient image coding format, the ProgressiveJPEG format is used as a fallback; The server returns the main image or detail image data in the corresponding encoding format according to the encoding format F indicated in the client request.

8. The method for displaying product pictures according to claim 1, characterized in that: The method further comprises: Before the client receives the initial low-resolution image portion and completes the image reconstruction process, the image rendering module first loads a visual placeholder image with the same size as the target main image for interface display. The visual placeholder image is generated in the following way: Generate low-frequency content based on the average color block, blurred outline or deep convolution features of the target main image data, or load a general template image of the corresponding product category pre-generated by the server; After completing the reconstruction of the initial low-resolution image, the image rendering module replaces the visual placeholder image with the actual main image outline image, and subsequently superimposes and updates the incremental image parts after receiving them.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for displaying product pictures according to any one of claims 1 to 8 is implemented.

10. An electronic device, characterized in that: include: processor; and A memory having computer-readable instructions stored thereon, wherein the computer-readable instructions, when executed by the processor, implement the method for displaying a product picture according to any one of claims 1 to 8.

Images