Webpage picture loading method and device, equipment and storage medium

Abstract

The application discloses a webpage picture loading method and device, equipment and a storage medium. The method comprises the following steps: obtaining container elements of each picture to be loaded in a webpage document; monitoring whether the size of each container element changes in real time, and taking the container element which changes in size as a changed container element; determining the nesting level relationship and relative position between each container element, and establishing a container relationship graph based on the nesting level relationship and relative position, so as to determine a new changed container element based on the container relationship graph; determining the size change data of each changed container element, and determining one or more high-priority pictures from each picture to be loaded based on the size change data; and loading each high-priority picture. The application improves the accuracy of picture loading as a whole, determines high-priority pictures to realize priority loading, saves resources, improves the adaptability of the webpage, and improves the user experience.

Description

Technical Field

[0001] This application relates to the field of webpage image loading technology, specifically to a webpage image loading method, apparatus, device, and storage medium. Background Technology

[0002] With the increasing multimedia nature of internet content and the widespread adoption of cross-device connectivity, images have become a core component of modern web applications. Statistics show that image resources account for more than 60% of the average load on a webpage, and their loading performance directly affects user experience and business conversion rates. Therefore, responsive web design requires images to adapt to different screen sizes and layout containers.

[0003] The traditional approach simply identifies container elements that undergo direct size changes, without deeply analyzing the passive changes in other container elements caused by their size changes. This means it fails to capture additional changes, making it impossible to achieve highly accurate global loading of the webpage and impacting user experience. Summary of the Invention

[0004] In view of this, this application provides a webpage image loading method, apparatus, device, and storage medium to solve the problem that existing methods cannot capture additional changes, thus failing to achieve highly accurate global loading of webpages and affecting user experience.

[0005] To achieve the above objectives, the following solution is proposed:

[0006] Firstly, a method for loading images on a webpage includes:

[0007] Retrieve the container elements of each image to be loaded in the web page document;

[0008] Real-time monitoring of whether the size of each container element changes, and container elements that have changed size are designated as changed container elements;

[0009] Determine the nesting hierarchy and relative position between each of the container elements, and establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changing container elements based on the container relationship graph;

[0010] Determine the size change data for each of the changing container elements, and based on the size change data, determine one or more high-priority images from each of the images to be loaded;

[0011] Load each of the aforementioned high-priority images.

[0012] Preferably, the real-time monitoring of whether each of the container elements has undergone a size change includes:

[0013] For each of the container elements, a size history queue corresponding to that container element is established;

[0014] Monitor the size fluctuation events of the container element in real time and record the monitored size fluctuation events to the size history queue;

[0015] Real-time analysis of the magnitude and direction of change of each size fluctuation event in the size history queue;

[0016] Based on the magnitude and direction of change, a stabilization event window is set, and each event to be filtered is selected sequentially from each size fluctuation event according to the stabilization event window.

[0017] Determine whether the size fluctuation difference between each of the events to be filtered exceeds the preset tolerance. If so, retain each of the events to be filtered and delete the other size fluctuation events in the size history queue to obtain the updated size history queue.

[0018] Based on the updated size history queue, the container element's size is monitored in real time to see if any changes occur.

[0019] Preferably, determining new changing container elements based on the container relationship graph includes:

[0020] Determine whether the changing container element belongs to the parent container in the container relationship graph;

[0021] If so, locate the sub-container corresponding to the container element in the container relationship graph;

[0022] The child container is treated as a new container element, and the process of monitoring each container element in real time for size changes is repeated until the new container element no longer belongs to the parent container, thus identifying the new changed container element.

[0023] Preferably, determining one or more high-priority images from the images to be loaded based on the size change data includes:

[0024] Obtain the device pixel ratio and bandwidth environment corresponding to the web page document;

[0025] Select a first image from the images to be loaded that is compatible with the pixel ratio and bandwidth environment of the device;

[0026] A dynamic selection window is established, which includes options for image orientation emphasis, image color emphasis, and image dynamic emphasis, for users to select.

[0027] Based on the user's selection, configure weight values ​​corresponding to image orientation, image color, and image dynamics respectively;

[0028] For each first image, obtain its orientation, color, and dynamic attributes, and calculate the weighted sum according to their respective weight values ​​to obtain the user adaptation value of the first image.

[0029] The first image with a user fit value higher than the preset fit value is selected as the high-priority image.

[0030] Preferably, loading each of the high-priority images includes:

[0031] For each of the high-priority images, monitor the current state of the container element corresponding to that high-priority image in real time;

[0032] When the current state of the container element is either in the viewport or in the visible area of ​​the parent container, obtain the current size data of the container element.

[0033] Calculate the current rendering size requirement based on the current size data;

[0034] Retrieve a new image resource address according to the current rendering size requirements, and load the high-priority image according to the new image resource address.

[0035] Preferably, after loading each of the high-priority images, the method further includes:

[0036] Obtain the image type of each of the high-priority images;

[0037] For each high-priority image, if the high-priority image is a preset constant-variable type, it is stored in a preset first cache pool; if the high-priority image is a preset one-time type, it is stored in a preset second cache pool.

[0038] Each image to be deleted is selected from the first cache pool and / or the second cache pool;

[0039] For each image to be deleted, determine whether the image to be deleted shares a cache entry with other high-priority images;

[0040] If so, then select a new high-priority image from either the first or second cache pool where it resides as the new image to be deleted;

[0041] If not, then delete the image to be deleted from either the first or second cache pool where it resides.

[0042] Preferably, the step of selecting each image to be deleted from the first cache pool and / or the second cache pool includes:

[0043] Real-time monitoring to see if the first cache pool is full of memory;

[0044] If so, determine the latest loading time of each high-priority image in the first cache pool, and use the high-priority image with the earliest latest loading time as the image to be deleted;

[0045] Real-time monitoring to see if the second cache pool is full of memory;

[0046] If so, then determine the image queue in the second cache pool, and select the highest priority image at the front of the image queue as the image to be deleted.

[0047] Secondly, a webpage image loading device includes:

[0048] The container element retrieval module is used to retrieve the container elements of each image to be loaded in a web page document;

[0049] The real-time monitoring module is used to monitor in real time whether the size of each container element has changed, and to identify the container element that has changed size as the changed container element.

[0050] The new variable container element determination module is used to determine the nesting hierarchy and relative position between each container element, and to establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine the new variable container element based on the container relationship graph;

[0051] The high-priority image determination module is used to determine the size change data of each of the changing container elements, and to determine one or more high-priority images from each of the images to be loaded based on the size change data.

[0052] The loading module is used to load each of the high-priority images.

[0053] Thirdly, a web page image loading device includes a memory and a processor;

[0054] The memory is used to store programs;

[0055] The processor is configured to execute the program to implement the steps of the webpage image loading method as described in any of the first aspects.

[0056] Fourthly, a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the webpage image loading method as described in any of the first aspects.

[0057] As can be seen from the above technical solution, this application obtains the container elements of each image to be loaded in a web page document; monitors in real time whether the size of each container element changes, and uses the container elements with size changes as changed container elements; determines the nesting hierarchy and relative position between each container element, and establishes a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changed container elements based on the container relationship graph; determines the size change data of each changed container element, and determines one or more high-priority images from each image to be loaded based on the size change data; and loads each of the high-priority images. This application first identifies the web page document that requires image loading and determines each image to be loaded. Then, it monitors in real time and automatically captures container elements that undergo size changes, completing the initial screening of changing containers. However, this is not comprehensive. Therefore, a container relationship graph is established based on the nesting level and relative position of each container element to reflect the relationships between them. This graph shows the nesting relationship between containers, i.e., parent and child containers. The size change of the parent container will affect the size of the child container, thus causing it to change. Therefore, this application uses this method to compensate for the passive size changes that traditional methods cannot detect, thereby identifying all container elements that undergo size changes. In subsequent processes, the precise size change data of each container element that undergoes size change can be extracted, improving the overall accuracy of image loading, determining high-priority images for priority loading, saving resources, improving the responsiveness of the web page, and enhancing the user experience. Attached Figure Description

[0058] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0059] Figure 1 An optional flowchart of a webpage image loading method provided in an embodiment of this application;

[0060] Figure 2 This is a schematic diagram of the structure of a webpage image loading device provided in an embodiment of this application;

[0061] Figure 3 This is a schematic diagram of the structure of a webpage image loading device provided in an embodiment of this application. Detailed Implementation

[0062] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0063] This invention can be used in a wide variety of general-purpose or special-purpose computing environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor devices, distributed computing environments including any of the above devices, etc.

[0064] This invention provides a method for loading web page images. This method can be applied to various computer terminals or smart terminals, and its execution entity can be the processor or server of the computer terminal or smart terminal. The flowchart of the method is shown below. Figure 1 As shown, it specifically includes:

[0065] S1: Get the container elements of each image to be loaded in the web page document.

[0066] This application first scans the web page document, identifies and obtains all container DOM elements that wrap the images to be loaded, and establishes a complete set of monitoring targets to ensure that all elements on the web page that are to be loaded are included in the subsequent monitoring scope, ensuring no omissions.

[0067] S2: Monitor in real time whether the size of each container element changes, and take the container element that has changed size as the changed container element.

[0068] In this step, you can create a listener instance for each container element using the ResizeObserver API and capture the width, height, and bounding box information of its content rectangle. Changes in height, width, or bounding box information can then be considered as size changes. Listener options can be configured, such as listening to the bounding box type (content-box, border-box) and the reporting frequency threshold, to avoid excessive triggering.

[0069] To facilitate state tracking of container elements, a fingerprint generator can be integrated to generate unique identifiers based on the container element ID and CSS class name. All monitored size data can be normalized into standard size descriptors, including physical pixel width and height, device pixel ratio, and visibility status, and then distributed to downstream processes via a reactive event bus.

[0070] The size change of container elements may be due to viewport adjustment, layout reflow, user interaction, etc., so we can filter out container elements that actively change.

[0071] S3: Determine the nesting hierarchy and relative position between each of the container elements, and establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changing container elements based on the container relationship graph.

[0072] This step introduces a container relationship graph mechanism based on the actively changing container elements identified in step S2, to further explore container elements whose size changes due to nesting relationships.

[0073] Specifically, the DOM nesting hierarchy and relative position relationships between container elements are formalized into a queryable data structure. When a container element changes size, all its nested child containers can be quickly located through the container relationship graph. This allows for proactive detection of size changes in the affected child containers, which can then be marked as new changed container elements, forming a complete set of size-changing containers.

[0074] Traditional methods can only capture containers that actively change, such as those in step S2. They cannot identify passive size changes caused by the recalculation of available space in child containers due to changes in the parent container. This application fills the blind spot in the detection of passive changes, enabling the system to capture additional changes that occur in nested layouts.

[0075] S4: Determine the size change data of each of the changing container elements, and based on the size change data, determine one or more high-priority images from each of the images to be loaded.

[0076] The size change data of the container element is the data basis for the subsequent loading process. Accurate acquisition of size change data allows for the selection of subsequent image sources (such as different resolution versions), avoiding the loading of image resources with mismatched sizes.

[0077] This allows us to determine the priority of each image to be loaded based on factors such as the magnitude of size changes, container visibility, and the container's position within the viewport. For example, we can determine the urgency of loading each image and then select high-priority images for priority loading. This way, we can prioritize the allocation of wired network bandwidth and computing resources to these images.

[0078] The existing method does not take into account sub-containers that have undergone passive changes. Therefore, the priority calculation process relies on incomplete container state information, which results in some containers whose actual size has changed not being included in the priority evaluation, causing high-priority images to be missed.

[0079] S5: Load each of the high-priority images.

[0080] This step loads only images marked as high priority to avoid wasting bandwidth caused by full loading. Therefore, it can also load images on the first screen and those with significant size changes first, shortening the user's perceived loading time. Images not marked as high priority are loaded later or kept at their current resolution to reduce unnecessary network requests.

[0081] The existing method suffers from an incomplete set of high-priority images, and the loading operation cannot cover all containers that need to be updated. This results in some areas of images not being refreshed in time, affecting visual consistency and negatively impacting user experience.

[0082] In addition, during the loading process, the current network environment can be monitored. In a high-speed environment, more high-priority images can be loaded concurrently, and the number of concurrently loaded images can be dynamically adjusted according to more specific parameters of the network environment. In a low-speed environment, a serial loading and pre-connection reuse strategy is adopted. When the image container leaves the viewport or its size changes, causing the current loading to fail, the request is automatically terminated and network resources are released.

[0083] As can be seen from the above technical solution, this application obtains the container elements of each image to be loaded in a web page document; monitors in real time whether the size of each container element changes, and uses the container elements with size changes as changed container elements; determines the nesting hierarchy and relative position between each container element, and establishes a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changed container elements based on the container relationship graph; determines the size change data of each changed container element, and determines one or more high-priority images from each image to be loaded based on the size change data; and loads each of the high-priority images. This application first identifies the web page document that requires image loading and determines each image to be loaded. Then, it monitors in real time and automatically captures container elements that undergo size changes, completing the initial screening of changing containers. However, this is not comprehensive. Therefore, a container relationship graph is established based on the nesting level and relative position of each container element to reflect the relationships between them. This graph shows the nesting relationship between containers, i.e., parent and child containers. The size change of the parent container will affect the size of the child container, thus causing it to change. Therefore, this application uses this method to compensate for the passive size changes that traditional methods cannot detect, thereby identifying all container elements that undergo size changes. In subsequent processes, the precise size change data of each container element that undergoes size change can be extracted, improving the overall accuracy of image loading, determining high-priority images for priority loading, saving resources, improving the responsiveness of the web page, and enhancing the user experience.

[0084] The method provided in this embodiment of the invention includes a process for real-time monitoring of whether each container element undergoes a size change, which is described in detail below:

[0085] For each of the container elements, a size history queue corresponding to that container element is established;

[0086] Monitor the size fluctuation events of the container element in real time and record the monitored size fluctuation events to the size history queue;

[0087] Real-time analysis of the magnitude and direction of change of each size fluctuation event in the size history queue;

[0088] Based on the magnitude and direction of change, a stabilization event window is set, and each event to be filtered is selected sequentially from each size fluctuation event according to the stabilization event window.

[0089] Determine whether the size fluctuation difference between each of the events to be filtered exceeds the preset tolerance. If so, retain each of the events to be filtered and delete the other size fluctuation events in the size history queue to obtain the updated size history queue.

[0090] Based on the updated size history queue, the container element's size is monitored in real time to see if any changes occur.

[0091] Specifically, this application maintains a size history queue for each container element, recording the sequence of the most recent N size changes, including various size fluctuation events. These size fluctuation events record the most recent N fluctuation events, which may be large or small. However, there may be some insignificant fluctuations (such as fluctuations within 1 pixel). Therefore, in order to prevent performance issues caused by excessive ResizeObserver callbacks, it is necessary to analyze the magnitude and direction of change of each size fluctuation event in the size history queue in real time, thereby setting a debouncing event window to filter out useless fluctuation events.

[0092] The stabilization event window refers to the number of events selected for filtering. For example, if the window is 3, then 3 adjacent size fluctuation events are selected, and the fluctuation between the first and last (3rd) size fluctuation events is judged. This is done in real time to dynamically shrink or expand the stabilization event window based on the fluctuation trend. For example, if the change amplitude of each size fluctuation event in the size history queue is consistent and the change direction is the same, the response frequency can be appropriately shortened, that is, the length of the stabilization event window can be shortened, so that size response can be achieved quickly. If the change amplitude is not consistent and / or the change direction is different, then the length of the stabilization event window can be appropriately extended, but the maximum length shall not exceed the maximum safe value.

[0093] Furthermore, size fluctuations are only considered valid size changes when they exceed the preset tolerance, in order to reduce unnecessary calculations and network requests and improve the overall smoothness of the webpage.

[0094] The process of determining new changing container elements based on the container relationship graph in the above process includes:

[0095] Determine whether the changing container element belongs to the parent container in the container relationship graph;

[0096] If so, locate the sub-container corresponding to the container element in the container relationship graph;

[0097] The child container is treated as a new container element, and the process of monitoring each container element in real time for size changes is repeated until the new container element no longer belongs to the parent container, thus identifying the new changed container element.

[0098] Specifically, the above process extends size change detection from the traditional single-point response to a chain-based tracing mechanism by determining the parent container's identity → locating child containers in the graph → progressively detecting objects → returning to perform monitoring. This allows the chain response triggered by changes in the parent container to be captured layer by layer along the DOM nesting path, improving the comprehensiveness of the detection. By using the container relationship graph as an index, the affected child containers can be quickly located, thus reducing computational resources while ensuring the integrity of the detection.

[0099] At the same time, the loop ends when the child container no longer belongs to the parent container, allowing the loop to automatically exit and naturally detect all affected child containers, providing complete and accurate data for subsequent priority determination and loading processes.

[0100] The following embodiments provide a detailed explanation of the steps in this application for determining one or more high-priority images from the images to be loaded based on the size change data.

[0101] Obtain the device pixel ratio and bandwidth environment corresponding to the web page document;

[0102] Select a first image from the images to be loaded that is compatible with the pixel ratio and bandwidth environment of the device;

[0103] A dynamic selection window is established, which includes options for image orientation emphasis, image color emphasis, and image dynamic emphasis, for users to select.

[0104] Based on the user's selection, configure weight values ​​corresponding to image orientation, image color, and image dynamics respectively;

[0105] For each first image, obtain its orientation, color, and dynamic attributes, and calculate the weighted sum according to their respective weight values ​​to obtain the user adaptation value of the first image.

[0106] The first image with a user fit value higher than the preset fit value is selected as the high-priority image.

[0107] Specifically, the device pixel ratio and bandwidth environment corresponding to the web page document indicate the front-end environment conditions such as the device on which the web page document is located. These are very important factors affecting image loading. Only with full adaptation can images be loaded accurately. Therefore, the first step is to select the image that is adapted to these two factors from all the images to be loaded as the first image, and then further filtering is performed.

[0108] It is understandable that simply adapting to the device's pixel ratio and bandwidth environment is not enough. To improve user adaptability, this application establishes an interactive mechanism with the user in three aspects: image orientation, image color, and image dynamics. This fully considers the user's needs and preferences, allowing the user to select the emphasis of image orientation, image color, and image dynamics in a dynamic selection window. The selection method can include various methods, such as setting an emphasis option after each option, or allowing the user to select the most important one, two, or three options from these three choices to analyze user needs. This embodiment does not limit this.

[0109] Then, based on the user's selection, the user fit value of the first image is calculated based on its orientation, color, and dynamic attributes. This allows us to analyze which first image best meets the user's needs, and prioritize loading these images, which greatly helps improve the user experience. In particular, the first image with the higher the user fit value is, the more it meets the user's needs.

[0110] The following embodiments provide a detailed explanation of the steps for loading each of the high-priority images in this application.

[0111] For each of the high-priority images, monitor the current state of the container element corresponding to that high-priority image in real time;

[0112] When the current state of the container element is either in the viewport or in the visible area of ​​the parent container, obtain the current size data of the container element.

[0113] Calculate the current rendering size requirement based on the current size data;

[0114] Retrieve a new image resource address according to the current rendering size requirements, and load the high-priority image according to the new image resource address.

[0115] Specifically, this application maintains lazy loading condition predicates for each high-priority image, including visibility ratio thresholds, size stability flags, and network idle signals. It can also define image state enumerations, including not loaded, loading, loaded successfully, loaded failed, adapting, and sleeping states. Each high-priority image instance is associated with a reactive state object, containing the current image URL, a set of alternative URLs, a loading error count, a retry strategy, and a container size snapshot. State transitions are managed through asynchronous state transition logic. For example, during the loading state, network events and timeout timers are monitored, and in case of failure, retries or degradation are triggered based on a strategy (exponential backoff). The state object is bound to computed properties and listeners. When the state changes, the image element's src, srcset, and CSS class names are automatically updated, achieving declarative rendering. Furthermore, image loading states can be shared across components for unified loading indicators or error handling. This allows for clear knowledge of the specific status of each high-priority image, enabling dynamic loading and timely adjustments to ensure optimal loading progress.

[0116] In addition to maintaining these lazy loading condition predicates, it is also necessary to monitor the current state of the container element corresponding to each high-priority image in real time, and determine whether a new source needs to be loaded based on the current state. That is, when the current state of the container element is entering the viewport or entering the visible area of ​​the parent container, the current rendering size requirement is calculated based on the current size data of the container element. Based on this, a new image resource address is retrieved, and the corresponding high-priority image is loaded according to the new image resource address to enhance adaptability. In other words, the new source is still the content of the same high-priority image, but with a different file address at a higher resolution, and it is placed in the original container element or in the container element after the size has changed.

[0117] This application can call the viewport associate, bind container elements to related viewports (such as windows or nested scrolling containers) through dynamic IntersectionObserver instances, and automatically select the root element and root boundary based on the layout context, ensuring that lazy loading is accurately triggered in complex scrolling scenarios. It can support APIs for manually forcing loading and pausing loading, allowing developers to directly control the process at critical paths.

[0118] Furthermore, after loading each of the aforementioned high-priority images, this application also includes caching these high-priority images, which can reduce duplicate requests and improve the offline experience. The specific process includes:

[0119] Obtain the image type of each of the high-priority images;

[0120] For each high-priority image, if the high-priority image is a preset constant-variable type, it is stored in a preset first cache pool; if the high-priority image is a preset one-time type, it is stored in a preset second cache pool.

[0121] Each image to be deleted is selected from the first cache pool and / or the second cache pool;

[0122] For each image to be deleted, determine whether the image to be deleted shares a cache entry with other high-priority images;

[0123] If so, then select a new high-priority image from either the first or second cache pool where it resides as the new image to be deleted;

[0124] If not, then delete the image to be deleted from either the first or second cache pool where it resides.

[0125] Specifically, each loaded high-priority image is analyzed using different containers. For example, if the same image needs to be loaded into three different URLs (?width=100 / 200 / 300) in 100px, 200px, and 300px containers, storing three files would result in significant disk and memory waste. Therefore, a unified rule is defined to divide the image into different sizes. For example, [0-300px] is considered a small image size, and [301-800px] is considered a medium image size. So, when a request for width=200 is made, it is found to fall within the small image size range, and an image with width=100 already exists in memory. Therefore, the link for width=200 will not be downloaded. Instead, the existing image data with width=100 in memory will be directly taken and stretched and drawn onto the 200px Canvas / Image.

[0126] In addition, cache redundancy can be reduced by size range matching and fuzzy search. For high-priority images with very large sizes, on-demand decoding and progressive loading can be used to avoid memory overflow. Furthermore, cache preheating and prefetching strategies can be used to load the predicted visible image size version during device idle periods to further improve response speed.

[0127] Regarding caching locations, this application categorizes images into constant-varying types and one-time-use types. Constant-varying images include avatars, dynamic streams, etc., while one-time-use images include onboarding pages, pop-up ads, etc. Image types can also be determined based on image usage frequency, size, and business tags (permanent, session). In the above process, this application can utilize the browser's MemoryCache and Disk Cache to store loaded images and pre-caches high-priority image resources in the Service Worker through the Cache API. Different processing strategies are used based on the image type of high-priority images. High-priority images of constant-varying types are stored in a preset first cache pool, while high-priority images of one-time-use types are stored in a preset second cache pool. In other words, different processing methods will be used in different cache pools to achieve differentiation. These cache pools are all used to store high-priority images that have already been loaded.

[0128] However, if the image to be deleted shares a cache entry with other high-priority images, deleting it will affect the other images that share the cache entry with it. Therefore, it cannot be rashly designated as an image to be deleted and needs to be selected again.

[0129] Optionally, the step of selecting each image to be deleted from the first cache pool and / or the second cache pool in the above process includes:

[0130] Real-time monitoring to see if the first cache pool is full of memory;

[0131] If so, determine the latest loading time of each high-priority image in the first cache pool, and use the high-priority image with the earliest latest loading time as the image to be deleted;

[0132] Real-time monitoring to see if the second cache pool is full of memory;

[0133] If so, then determine the image queue in the second cache pool, and select the highest priority image at the front of the image queue as the image to be deleted.

[0134] Specifically, it's understandable that the cache pool will gradually fill up the memory. Different cleanup strategies apply to different cache pools. First, for the first cache pool, which has a specific cache size, such as 20 images, if memory is full, the highest priority image with the earliest loading time is selected for deletion. This prevents repeated downloads of frequently changing images during refreshes. For the second cache pool, which acts like a queue, images are sorted by their storage time. Each time these high-priority images are loaded, they are automatically moved to the end of the queue. If memory is full, the highest priority image at the front of the queue is selected for deletion.

[0135] Furthermore, this application can also use IntersectionObserver to assist in detecting the visibility ratio of the container within the viewport, and combine it with CSS properties (display, visibility) to comprehensively determine whether the container is in a renderable state. Different listening strategies and resource quotas are allocated based on the container's layout role (main image, thumbnail, background image) and business priority (first screen, critical path). For example, high-frequency listening and preloading are enabled for first-screen container elements, while listening is paused for hidden or offline container elements until they are activated. At the same time, memory leaks and zombie listeners need to be prevented.

[0136] Furthermore, it can monitor current device performance metrics in real time and trigger optimization or degradation strategies, including: tracking key metrics such as image loading time, cache hit rate, number of container size mismatches, and memory usage. Data is collected through PerformanceObserver and a custom timer and aggregated into a time-series report; when a performance bottleneck is detected (such as average loading latency exceeding a threshold or memory usage exceeding a safety line), system parameters are automatically adjusted, such as reducing the sampling frequency of ResizeObserver, disabling high-resolution sources, and switching to a simpler adaptation algorithm; at the same time, a degradation event interface can be provided, allowing developers to register custom degradation logic, such as forcing the use of lazy-loaded placeholder images on low-end devices.

[0137] and Figure 1 Corresponding to the method described above, this embodiment of the invention also provides a webpage image loading device for loading webpage images. Figure 1 In the specific implementation of the method, the webpage image loading device provided in this embodiment of the invention can be used in computer terminals or various mobile devices, combined with Figure 2 This section introduces webpage image loading devices, such as... Figure 2 As shown, the device may include:

[0138] Container element acquisition module 10 is used to acquire the container elements of each image to be loaded in the web page document;

[0139] The real-time monitoring module 20 is used to monitor in real time whether the size of each container element has changed, and to take the container element that has changed size as the changed container element.

[0140] The new variable container element determination module 30 is used to determine the nesting hierarchy and relative position between each container element, and to establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new variable container elements based on the container relationship graph;

[0141] The high-priority image determination module 40 is used to determine the size change data of each of the changing container elements, and to determine one or more high-priority images from each of the images to be loaded based on the size change data.

[0142] The loading module 50 is used to load each of the high-priority images.

[0143] As can be seen from the above technical solution, this application obtains the container elements of each image to be loaded in a web page document; monitors in real time whether the size of each container element changes, and uses the container elements with size changes as changed container elements; determines the nesting hierarchy and relative position between each container element, and establishes a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changed container elements based on the container relationship graph; determines the size change data of each changed container element, and determines one or more high-priority images from each image to be loaded based on the size change data; and loads each of the high-priority images. This application first identifies the web page document that requires image loading and determines each image to be loaded. Then, it monitors in real time and automatically captures container elements that undergo size changes, completing the initial screening of changing containers. However, this is not comprehensive. Therefore, a container relationship graph is established based on the nesting level and relative position of each container element to reflect the relationships between them. This graph shows the nesting relationship between containers, i.e., parent and child containers. The size change of the parent container will affect the size of the child container, thus causing it to change. Therefore, this application uses this method to compensate for the passive size changes that traditional methods cannot detect, thereby identifying all container elements that undergo size changes. In subsequent processes, the precise size change data of each container element that undergoes size change can be extracted, improving the overall accuracy of image loading, determining high-priority images for priority loading, saving resources, improving the responsiveness of the web page, and enhancing the user experience.

[0144] Furthermore, embodiments of this application provide a webpage image loading device. Optionally, Figure 3 The hardware structure block diagram of the webpage image loading device is shown below. Figure 3 The hardware structure of a webpage image loading device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.

[0145] In this embodiment, the number of processor 01, communication interface 02, memory 03 and communication bus 04 is at least one, and processor 01, communication interface 02 and memory 03 communicate with each other through communication bus 04.

[0146] Processor 01 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.

[0147] Memory 03 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device.

[0148] The memory stores a program, which the processor can call to execute the following webpage image loading method:

[0149] Retrieve the container elements of each image to be loaded in the web page document;

[0150] Real-time monitoring of whether the size of each container element changes, and container elements that have changed size are designated as changed container elements;

[0151] Determine the nesting hierarchy and relative position between each of the container elements, and establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changing container elements based on the container relationship graph;

[0152] Determine the size change data for each of the changing container elements, and based on the size change data, determine one or more high-priority images from each of the images to be loaded;

[0153] Load each of the aforementioned high-priority images.

[0154] Optionally, the refined and extended functions of the program can be found in the description of the webpage image loading method in the method embodiments.

[0155] This application embodiment also provides a storage medium that can store a program suitable for execution by a processor. When the program runs, it controls the device where the storage medium is located to execute the following webpage image loading method, including:

[0156] Retrieve the container elements of each image to be loaded in the web page document;

[0157] Real-time monitoring of whether the size of each container element changes, and container elements that have changed size are designated as changed container elements;

[0158] Determine the nesting hierarchy and relative position between each of the container elements, and establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changing container elements based on the container relationship graph;

[0159] Determine the size change data for each of the changing container elements, and based on the size change data, determine one or more high-priority images from each of the images to be loaded;

[0160] Load each of the aforementioned high-priority images.

[0161] Specifically, the storage medium can be a computer-readable storage medium, which can be an electronic storage device such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM.

[0162] Optionally, the refined and extended functions of the program can be found in the description of the webpage image loading method in the method embodiments.

[0163] Furthermore, the functional modules in the various embodiments of this disclosure can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part. If the function is implemented as a software functional module 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 disclosure, in essence, or the part that contributes to the prior art, or a 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 several instructions to cause a computer device (which may be a personal computer, a live streaming device, or a network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this disclosure.

[0164] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0165] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0166] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for loading images on a webpage, characterized in that, include: Retrieve the container elements of each image to be loaded in the web page document; Real-time monitoring of whether the size of each container element changes, and container elements that have changed size are designated as changed container elements; Determine the nesting hierarchy and relative position between each of the container elements, and establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine new changing container elements based on the container relationship graph; Determine the size change data for each of the changing container elements, and based on the size change data, determine one or more high-priority images from each of the images to be loaded; Load each of the aforementioned high-priority images.

2. The method according to claim 1, characterized in that, The real-time monitoring of whether each container element has undergone a size change includes: For each of the container elements, a size history queue corresponding to that container element is established; Monitor the size fluctuation events of the container element in real time and record the monitored size fluctuation events to the size history queue; Real-time analysis of the magnitude and direction of change of each size fluctuation event in the size history queue; Based on the magnitude and direction of change, a stabilization event window is set, and each event to be filtered is selected sequentially from each size fluctuation event according to the stabilization event window. Determine whether the size fluctuation difference between each of the events to be filtered exceeds the preset tolerance. If so, retain each of the events to be filtered and delete the other size fluctuation events in the size history queue to obtain the updated size history queue. Based on the updated size history queue, the container element's size is monitored in real time to see if any changes occur.

3. The method according to claim 1, characterized in that, The process of determining new changing container elements based on the container relationship graph includes: Determine whether the changing container element belongs to the parent container in the container relationship graph; If so, locate the sub-container corresponding to the container element in the container relationship graph; The child container is treated as a new container element, and the process of monitoring each container element in real time for size changes is repeated until the new container element no longer belongs to the parent container, thus identifying the new changed container element.

4. The method according to claim 1, characterized in that, The step of determining one or more high-priority images from the images to be loaded based on the size change data includes: Obtain the device pixel ratio and bandwidth environment corresponding to the web page document; Select a first image from the images to be loaded that is compatible with the pixel ratio and bandwidth environment of the device; A dynamic selection window is established, which includes options for image orientation emphasis, image color emphasis, and image dynamic emphasis, for users to select. Based on the user's selection, configure weight values ​​corresponding to image orientation, image color, and image dynamics respectively; For each first image, obtain its orientation, color, and dynamic attributes, and calculate the weighted sum according to their respective weight values ​​to obtain the user adaptation value of the first image. The first image with a user fit value higher than the preset fit value is selected as the high-priority image.

5. The method according to claim 1, characterized in that, The loading of each of the high-priority images includes: For each of the high-priority images, monitor the current state of the container element corresponding to that high-priority image in real time; When the current state of the container element is either in the viewport or in the visible area of ​​the parent container, obtain the current size data of the container element. Calculate the current rendering size requirement based on the current size data; Retrieve a new image resource address according to the current rendering size requirements, and load the high-priority image according to the new image resource address.

6. The method according to any one of claims 1 to 5, characterized in that, After loading each of the aforementioned high-priority images, this method further includes: Obtain the image type of each of the high-priority images; For each high-priority image, if the high-priority image is a preset constant-variable type, it is stored in a preset first cache pool; if the high-priority image is a preset one-time type, it is stored in a preset second cache pool. Each image to be deleted is selected from the first cache pool and / or the second cache pool; For each image to be deleted, determine whether the image to be deleted shares a cache entry with other high-priority images; If so, then select a new high-priority image from either the first or second cache pool where it resides as the new image to be deleted; If not, then delete the image to be deleted from either the first or second cache pool where it resides.

7. The method according to claim 6, characterized in that, The step of selecting each image to be deleted from the first cache pool and / or the second cache pool includes: Real-time monitoring to see if the first cache pool is full of memory; If so, determine the latest loading time of each high-priority image in the first cache pool, and use the high-priority image with the earliest latest loading time as the image to be deleted; Real-time monitoring to see if the second cache pool is full of memory; If so, then determine the image queue in the second cache pool, and select the highest priority image at the front of the image queue as the image to be deleted.

8. A webpage image loading device, characterized in that, include: The container element retrieval module is used to retrieve the container elements of each image to be loaded in a web page document; The real-time monitoring module is used to monitor in real time whether the size of each container element has changed, and to identify the container element that has changed size as the changed container element. The new variable container element determination module is used to determine the nesting hierarchy and relative position between each container element, and to establish a container relationship graph based on the nesting hierarchy and relative position, so as to determine the new variable container element based on the container relationship graph; The high-priority image determination module is used to determine the size change data of each of the changing container elements, and to determine one or more high-priority images from each of the images to be loaded based on the size change data. The loading module is used to load each of the high-priority images.

9. A webpage image loading device, characterized in that, Including memory and processor; The memory is used to store programs; The processor is used to execute the program to implement each step of the webpage image loading method as described in any one of claims 1-7.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements each step of the web page image loading method as described in any one of claims 1-7.

Images