Content loading method and device, electronic equipment and computer program

Abstract

The invention provides a content loading method and device, electronic equipment and a computer program, and relates to the technical field of data processing. Content to be displayed is divided into multiple pieces of paging data, and the cross state of the paging data and a visual area is monitored based on a cross monitoring component; only the paging data in or about to enter the visual area is dynamically loaded, and meanwhile the paging data leaving the visual area is unloaded. According to the method, the amount of data needing to be loaded during page initialization is reduced in an on-demand loading mode, the page loading time is effectively shortened, and long-time waiting is avoided; meanwhile, all contents do not need to be rendered at a time, so that the rendering burden is relieved, the jamming phenomenon during rolling is eliminated, the smoothness of page sliding is ensured, and the user experience is improved.

Description

Technical Field

[0001] This disclosure relates to the field of data processing technology, and in particular to a method and apparatus for loading content, an electronic device, and a computer program. Background Technology

[0002] When displaying long content in a mini-program, the common approach is to load all content at once and then scroll through it using a scrollbar. However, this method has drawbacks. When the content is large, the page load time is long, and users have to wait a considerable amount of time to see the complete content. Furthermore, scrolling can sometimes be choppy and unresponsive, negatively impacting the user experience.

[0003] Therefore, improving page loading efficiency and page scrolling smoothness are urgent problems to be solved. Summary of the Invention

[0004] This disclosure provides a method, apparatus, electronic device, and computer program for content loading. Its main objective is to address how to improve page loading efficiency and the smoothness of page scrolling.

[0005] According to a first aspect of this disclosure, a method for loading content is provided, comprising: A scrollable view area is set up based on a pre-built scroll layer component, in which a long list control component, a cross listener component, and a data loading list component are hosted. The long list control component receives the content to be displayed and divides it into multiple paginated data. The data loading list component generates data identifiers corresponding to each of the multiple paginated data sets, and cross-observable objects are constructed based on the data identifiers. The cross-listening component listens to the cross-viewing state between the cross-viewing object and the visible area. The visible area is the view display area in the scrollable view area, and the cross-viewing state is used to indicate whether the cross-viewing object scrolls into or out of the visible area. In response to the detected cross state, the loading or unloading operation of the target data loading list component corresponding to the cross observed object is dynamically executed through the cross listening component. The data loading list component is configured to support rendering of at least variable height list content or image and text waterfall content.

[0006] According to a second aspect of this disclosure, a content loading apparatus is provided, comprising: The setting unit is used to set a scrollable view area based on a pre-built scroll layer component, wherein the scrollable view area contains a long list control component, a cross listener component, and a data loading list component; The segmentation unit is used to receive the content to be displayed based on the long list control component and segment the content to be displayed into multiple paginated data; The building unit is used to generate data identifiers corresponding to each of the multiple paginated data based on the data loading list component, and to build cross-observation objects based on the data identifiers; The listening unit is used to listen to the cross-viewing object and the visible area based on the cross-listening component. The visible area is the view display area in the scrollable view area, and the cross-viewing state is used to indicate whether the cross-viewing object scrolls into or out of the visible area. The execution unit is used to respond to the monitored cross state and dynamically execute the loading or unloading operation of the target data loading list component corresponding to the cross observed object through the cross monitoring component. The data loading list component is configured to support the rendering of at least variable height list content or image and text waterfall content.

[0007] According to a third aspect of this disclosure, an electronic device is provided, comprising: At least one processor; and A memory that is communicatively connected to at least one processor; wherein, The memory stores instructions that can be executed by at least one processor, such that the at least one processor is able to perform the method described in the first aspect above.

[0008] According to a fourth aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause a computer to perform the method of the first aspect described above.

[0009] According to a fifth aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the method as described in the first aspect above.

[0010] The content loading method, apparatus, electronic device, and computer program disclosed herein achieve dynamic loading of only paginated data that is in or about to enter the visible area, and unloading paginated data that has left the visible area, by dividing the content to be displayed into multiple paginated data and monitoring the cross-state of the paginated data with the visible area based on a cross-listening component. This on-demand loading method reduces the amount of data that needs to be loaded during page initialization, effectively shortening page loading time and avoiding long waiting times. Simultaneously, since all content does not need to be rendered at once, the rendering burden is reduced, thereby eliminating stuttering during scrolling, ensuring smooth page scrolling, and improving the user experience.

[0011] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this application, nor is it intended to limit the scope of this application. Other features of this application will become readily apparent from the following description. Attached Figure Description

[0012] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein: Figure 1 A flowchart illustrating a content loading method provided in an embodiment of this disclosure; Figure 2 This is a component structure diagram for content loading provided in an embodiment of the present disclosure; Figure 3 A schematic diagram of the structure of a content loading device provided in an embodiment of this disclosure; Figure 4 This is a schematic block diagram of an electronic device provided in an embodiment of the present disclosure. Detailed Implementation

[0013] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0014] This disclosure presents a content loading method that enables efficient rendering and dynamic management of long content in runtime environments such as mini-programs. Through the collaborative work of a series of components and state monitoring, it effectively solves the performance bottlenecks and interaction stuttering issues that exist when loading long content.

[0015] The following description, with reference to the accompanying drawings, describes a method, apparatus, electronic device, and computer program for loading content according to embodiments of the present disclosure.

[0016] Figure 1 This is a flowchart illustrating a content loading method provided in an embodiment of the present disclosure.

[0017] like Figure 1 As shown, the method includes the following steps: Step 101: Set up a scrollable view area based on a pre-built scroll layer component, wherein the scrollable view area contains a long list control component, a cross listener component, and a data loading list component.

[0018] In the embodiments disclosed herein, the scroll layer component is a fundamental component used to create scrollable containers in the mini-program environment. It replaces the native scroll view mechanism in the browser, providing the necessary scrolling capabilities for displaying long content. Within this scrollable view area, multiple functional modules are housed, including a long list control component, a cross-listener component, and a data loading list component. These multiple components together constitute a complete virtual scrolling architecture. The scrollable view area provides a unified layout and scrolling context for multiple components, ensuring that subsequent listening and rendering operations can be correctly executed within this defined area.

[0019] The scrollable view area is a specific area defined by the scroll layer component that allows more content to be viewed through scrolling. This area is not a simple fixed range, but needs to be reasonably set in combination with the mini-program page size specifications and business scenario requirements.

[0020] To facilitate understanding of the implementation of the embodiments of this disclosure, the embodiments of this disclosure also provide a component structure diagram for content loading, such as... Figure 2 As shown, the scroll-view component sets the scrollable view area to host other components. The long list control component (list-optimize) receives the content list and processes the data accordingly based on the long list optimization switch parameters, ensuring the component's versatility. The cross-listening component (list-wrap) monitors the intersection of the data loading list component (list) and the view area (visible area), controls the rendering of built-in module components, and provides virtual placeholders in the invisible area. The data loading list component (list) loads paginated data and renders nodes, supporting any content type, including fixed-height lists, variable-height lists, and various types such as image and text waterfall layouts.

[0021] The scroll-view component, as the outermost component, implements the setting of the scrollable area view. Because the mini-program environment differs from the browser environment, in a browser environment, the browser can recognize long content lists, expand its own height according to the content, and display scrollbars. However, in the mini-program environment, the scroll-view is required to set the scrollable area.

[0022] Step 102: Receive the content to be displayed based on the long list control component, and divide the content to be displayed into multiple paginated data.

[0023] In the embodiments of this disclosure, the long list control component is a logical component responsible for data preprocessing and flow control. Its function is to structurally segment the received linear and complete content to be displayed. Specifically, it divides the large original data set into multiple paginated data according to preset rules. Paginated data does not refer to traditional network request pagination, but rather to logically dividing the complete dataset into several smaller, more manageable subsets. This two-dimensional data processing can logically reduce the complexity of single data processing.

[0024] The content to be displayed refers to the collection of all long content to be viewed on the mini-program page, including but not limited to text, images, videos, and other elements. This content is typically large, and loading and transmitting it all at once would significantly increase data transmission pressure. Paginated data, on the other hand, is the portion of the complete content to be displayed that is split according to preset logic (such as a fixed number of data entries or a data volume threshold). This portion of the content can be loaded independently, and its purpose is to minimize data transfer from the logic layer to the rendering layer.

[0025] Step 103: Generate data identifiers corresponding to each of the multiple paginated data based on the data loading list component, and construct cross-observation objects based on the data identifiers.

[0026] In the embodiments of this disclosure, the data identifier is a globally unique identifier generated for each page of data by the dataset loading list component. The generation method of the data identifier can be, for example, a Universally Unique Identifier (UUID) or calculated using any formula that can generate a unique identifier (e.g., timestamp combined with random numbers, hash algorithms, etc.). Its purpose is to clearly distinguish different page data and their corresponding component instances, ensuring that each page data can be managed independently and accurately. After generating this data identifier, a cross-observation object is constructed based on it. The cross-observation object is an instance object (i.e., an IntersectionObserver object) capable of asynchronously monitoring the relative positional relationship between the target node (target page data) and a specific reference area (e.g., the visible area). Each page data is bound to a cross-observation object constructed using its unique data identifier, thereby enabling independent tracking of the visibility state of each page data during scrolling.

[0027] Step 104: Listen to the cross-viewing object and the visible area based on the cross-listening component. The visible area is the view display area in the scrollable view area. The cross-viewing state is used to indicate whether the cross-viewing object scrolls into or out of the visible area.

[0028] In the embodiments of this disclosure, the visible area refers to the rectangular area currently actually visible to the user within the scrollable view area, i.e., the view display area. The cross-state is a state variable describing the spatial relationship between the target object (i.e., the Document Object Model (DOM) node or mini-program component associated with the cross-observed object) and the visible area. It is used to precisely indicate whether the target object is scrolling into or out of the visible area. This monitoring process is continuous; the cross-state corresponding to each page of data changes dynamically as the user scrolls.

[0029] Step 105: In response to the detected cross state, dynamically execute the loading or unloading operation of the target data loading list component corresponding to the cross observed object through the cross listening component. The data loading list component is configured to support rendering of at least variable height list content or image and text waterfall content.

[0030] In the embodiments of this disclosure, the target data loading list component refers to the rendering component instance associated with the specific cross-observable whose current cross-state has changed. The loading operation means that when the cross-state indicates that a cross-observable has scrolled into the visible area, its corresponding data loading list component will be instantiated, and the pagination data corresponding to the cross-observable will be rendered as the actual user interface (UI) node and presented to the user.

[0031] The unloading operation means that when the cross-state indicates that a cross-observable has scrolled out of the visible area, its corresponding UI node will be destroyed to release resources, but its placeholder space will be retained to avoid layout jitter. Specifically, the data loading list component is designed as a highly flexible rendering unit, supporting at least the rendering of list content or image / text waterfall content with variable heights. This means it can adapt to complex scenarios with varying content heights, such as product display walls, without relying on preset, fixed height values ​​for calculation, thus greatly expanding its application scope and technical versatility.

[0032] Furthermore, to facilitate understanding of the implementation process of this disclosure embodiment, this disclosure embodiment also provides a content loading principle, namely, developing an outer component to control the loading and rendering of nodes within the component. When loading the outer control component, a globally unique UUID is generated as an identifier for the current built-in module content, and a screen position event is bound to determine whether to render the built-in module content. If it is determined to be within the required rendering position range, rendering is performed; otherwise, only a placeholder is used, and the content of the internal module is not rendered. The `createIntersectionObserver` method provided by the mini-program is used to listen for the area of ​​elements that need to be rendered. Then, by obtaining the device height, the screen height is set as the actual rendering element area. The slot pattern is used to remove and display elements in non-intersecting areas, reducing a significant amount of computation.

[0033] This disclosure achieves on-demand loading and dynamic rendering of long content through a combination of component-based design and cross-listening technology, effectively reducing the memory consumption and rendering pressure of the mini-program during runtime, significantly improving the smoothness of scrolling long lists and user experience, while also supporting diverse content formats.

[0034] In one possible implementation of the disclosed embodiments, when constructing a cross-observation object, the following methods may be used, but are not limited to: generating a corresponding observation object identifier for each data identifier; creating a cross-observation instance based on the observation object identifier and its corresponding pagination data; and associating the cross-observation instance with the cross-listening component for registration to construct the cross-observation object.

[0035] In the embodiments of this disclosure, when constructing the cross-listening component (list-wrap), the cross-listening component needs to implement at least three major functions: cross-region listening, virtual height placeholder, and buffer setting. In order to achieve these functions, it is necessary to construct a cross-observation object.

[0036] First, the system needs to generate a globally unique observer identifier for each data identifier. The data identifier is a unique identifier assigned to each page of data by the data loading list component, used to logically distinguish different pages of data. The observer identifier, on the other hand, is a further generated, globally unique string or hash value. Its purpose is to provide an independent, conflict-free index key for each page of data's corresponding monitoring instance. Generating observer identifiers typically employs algorithms such as UUIDs (Universally Unique Identifiers) or hash functions based on timestamps and random number combinations. This ensures that even in scenarios with massive data pagination, each observation instance can be uniquely identified and referenced, avoiding identifier confusion or target overlap issues during the monitoring process.

[0037] A cross-observation instance is an instantiated listener object created by the cross-observation application programming interface (API) (such as IntersectionObserver) provided by the WeChat Mini Program runtime environment and bound to a specific DOM node or component. During this process, the observer object identifier is injected as a property of the cross-observation instance, enabling a one-to-one correspondence between the cross-observation instance and specific pagination data. Simultaneously, the contextual information provided by the pagination data (such as data content and expected rendering area) is also used to configure the listening parameters of the cross-observation instance, ensuring that the cross-observation instance accurately reflects the visual state of its associated data block in subsequent listening.

[0038] After creating a cross-observation instance, it needs to be associated with and registered with the cross-listener component to complete the construction of the cross-observation object. The cross-listener component is responsible for monitoring the state changes of multiple cross-observation instances and has the ability to manage and schedule multiple listening tasks. The association registration process is a systematic binding process that registers the newly created cross-observation instance to the cross-listener component's internal management queue, enabling the cross-observation instance's listening events to be uniformly captured and processed by the cross-listener component. This association registration process includes, but is not limited to, submitting the instance's observer identifier, callback function reference, and listening configuration parameters (such as threshold, root element, etc.) to the cross-listener component's registration interface, thereby establishing an event communication channel between the instance and the component. Through association registration, the cross-listener component can dynamically maintain a set of active listening instances and assign corresponding processing logic to each cross-observation instance, ensuring that when scrolling occurs, the component can respond promptly and process the cross-state changes reported by each instance.

[0039] The cross-observation object construction disclosed herein associates each page of data with an independent cross-observation instance through its unique data identifier and observer object identifier. These cross-observation instances are then integrated into the unified management of the cross-listening component through an association registration process. This not only ensures listening accuracy and avoids interference between multiple instances, but also enables a modular approach to handle visibility listening tasks for large amounts of paged data, providing a technical foundation for dynamic loading and unloading operations. Furthermore, due to the globally unique observer object identifier, stable listening performance is maintained even in complex scenarios with a large number of data pages or dynamically updated content, effectively improving the smoothness of long list scrolling and the user experience.

[0040] In one possible implementation of this disclosure, when performing a loading or unloading operation of a target data loading list component, the following methods can be used, but are not limited to: in response to a crossover state where the intersection ratio is greater than a preset ratio threshold, the target data loading list component is dynamically loaded into the visible area through a slot interface set in the crossover listening component, wherein the slot interface is at least used to reserve a position for the data loading list component or a virtual area; in response to a crossover state where the intersection ratio is not greater than a preset ratio threshold, the target data loading list component is dynamically unloaded from the visible area through the slot interface, and a virtual placeholder node for the target data loading list component is retained.

[0041] In the embodiments of this disclosure, a loading operation is triggered in response to changes in the crossover state when the detected crossover ratio is greater than a preset ratio threshold. The crossover ratio is a quantified value representing the relative size of the overlap between the paginated data associated with the crossover object and the visible area, typically defined as the ratio of the crossover area to the area of ​​the paginated data itself. This crossover ratio reflects the degree to which the paginated data enters the user's field of view. The preset ratio threshold is a pre-set threshold value used to determine whether a loading operation is necessary. For example, it can be set to a number greater than zero, meaning that the triggering condition may be met as soon as any part of the paginated data begins to enter the visible area. Once this condition is met, the crossover monitoring component dynamically loads the target data loading list component into the visible area through its internally configured slot interface. The slot interface is a mechanism for content distribution in the front-end componentization framework, at least used to reserve space for data loading list components or virtual areas. This means that the slot interface physically provides a placeholder container for injecting dynamic content. Whether the final result is rendering actual data content or maintaining an empty virtual placeholder area, its layout space is preserved, thus ensuring the stability of the entire scrollable view area structure. Loading through this slot interface essentially instantiates the pagination data corresponding to the target data loading list component and inserts the rendered actual user interface node into the reserved position, allowing the user to actually see and interact with that content.

[0042] When the intersection ratio is no greater than a preset threshold in response to a crossover state, an unloading operation is performed. This typically occurs after the user scrolls the screen, causing previously loaded components to completely or mostly leave the visible area. At this point, to free up system resources (such as memory and graphics rendering pipeline load), the crossover listener component dynamically unloads the target data load list component, which has now left the visible area, from the visible area via the same slot interface. The unloading operation means stopping the rendering process of that component and removing the actual user interface node corresponding to the target data load list component from the document object model.

[0043] Importantly, however, a virtual placeholder node for the target data loading list component is retained during the unloading process. This virtual placeholder is an invisible element of a specific size that contains no specific business logic content. Its purpose is to occupy the exact same space and height in the page layout as the previously unloaded target data loading list component. The height information of the virtual placeholder is typically the actual rendered height, accurately obtained and recorded through the callback function of the cross-observation object when the target data loading list component is loaded and rendered. Retaining this virtual placeholder prevents the height of the entire scrollable view area from shrinking or jumping after the component is dynamically unloaded, avoiding scrollbar jitter and user disorientation caused by sudden height changes, thus maintaining the continuity and stability of the scrolling experience.

[0044] Specifically, the loading or unloading operation of the target data loading list component can also be implemented in, but is not limited to, the following ways: When the intersection ratio in the cross-observer callback listener is greater than 0, that is, when the data loading list component enters the visible area, the cross-observer component loads its corresponding data loading list component and obtains the corresponding height of the data loading list component in the cross-observer callback. In common virtual list methods, the total number of renders usually needs to be defined in advance. However, since the form and height of the data loading list component are not fixed, it may be a list with a fixed height, a list with a variable height, or even a text and image waterfall with a variable height. It is difficult to obtain a universal height calculation method. Therefore, the commonly used height calculation method is not used to obtain the corresponding height of the data loading list component.

[0045] When the intersection ratio in the cross-observer callback listener is less than 0—that is, when the list scrolls up or down and the data loading list component leaves the visible or reference area—then the corresponding data loading list component needs to be unloaded, and a virtual placeholder is implemented using the corresponding content height. The placeholder height is the height value obtained from the cross-observer callback, eliminating the need to calculate the height of each data loading list component individually, thus reducing the number of calculations and data transfer between components.

[0046] This disclosure balances rendering performance and user experience by determining the intersection ratio and preset threshold, utilizing a slot interface for fine-grained loading and unloading control, and supplementing it with virtual placeholder node technology. It ensures that resources are consumed to render real content only when needed, reducing unnecessary performance overhead; while when content is not visible, lightweight placeholders maintain the layout, providing users with a smooth and stable long-content scrolling browsing experience.

[0047] In one possible implementation of this disclosure, after the cross-observation object and the visible area cross-state are monitored based on the cross-listening component, in order to achieve advance prediction of content loading timing and optimization of resource scheduling, avoid content blank (white screen) problems that may occur when the user scrolls quickly, and find a dynamic balance between preloading requirements and performance consumption, it is necessary to set an adaptive buffer for the cross-listening component.

[0048] Specifically, regarding the setting of the adaptive buffer, the following methods can also be used, but are not limited to: setting an adaptive buffer for the cross-observation component, wherein the adaptive buffer includes at least a front buffer and a back buffer corresponding to the cross-observation object. The front buffer is used to preload the data loading list component corresponding to the pagination data before the cross-observation object, and the back buffer is used to preload the data loading list component corresponding to the pagination data after the cross-observation object. The size of the adaptive buffer is dynamically determined based on at least one of the following factors: the content type of the content to be displayed, the size of the pagination data, the historical scrolling speed, or the product of the height of the visible area and a preset coefficient.

[0049] In embodiments of this disclosure, the adaptive buffer is a logically extended listening area that extends beyond the boundaries of the visible area, used to pre-trigger the loading of adjacent paginated data. This adaptive buffer includes at least a front buffer and a back buffer corresponding to the cross-observable. Specifically, the front buffer is positioned above or in front of the current visible area (relative to the scrolling direction), and its function is to pre-load the data loading list component corresponding to the paginated data preceding the cross-observable. This means that even if the user has not yet precisely scrolled to the data area of ​​the previous page, as long as their scroll position approaches that area and enters the front buffer's range, loading of that content will begin in advance. Similarly, the back buffer is positioned below or behind the current visible area, and its function is to pre-load the data loading list component corresponding to the paginated data following the cross-observable. The front and back buffers together constitute a pre-rendering band, allowing content to be ready before the user scrolls to it, thus achieving a seamless and smooth transition of content during scrolling.

[0050] It should be noted that the size of the adaptive buffer is not fixed, but dynamically determined based on various runtime factors. This dynamic adaptive characteristic allows it to flexibly respond to different application scenarios and user behavior patterns, thereby achieving an optimal balance between performance and user experience. The buffer size is calculated based on at least one of the following factors.

[0051] One factor is the type of content to be displayed. Different content types typically mean different rendering complexities and data volumes. For example, plain text lists render faster, require less preloading time, and can have a relatively small buffer; while content containing complex images, animations, or image-text waterfall layouts that require network requests has a higher rendering overhead and requires more preparation time. Therefore, the system tends to dynamically calculate a larger buffer range to allow more lead time for loading complex content.

[0052] Another consideration is the size of the paginated data, i.e., the amount of data, such as the number of data items contained in a page or the size of the data packet in bytes. If a page contains a large amount of data, the processing time required from data preparation to final rendering will be long. In this case, the buffer size will be increased accordingly to start the loading process earlier and avoid user waiting.

[0053] Furthermore, historical scrolling speed data also serves as a basis for dynamic adjustments. Recent user scrolling behavior can be recorded and analyzed. If the historical data indicates that the user is performing fast, continuous scrolling operations (e.g., rapid swiping), it is predicted that the user is likely to browse a large amount of content in a short period. In this case, the buffer size will be dynamically increased to match the needs of high-speed scrolling, ensuring that enough content is preloaded during fast scrolling. Conversely, during slow browsing, the buffer can be reduced to minimize unnecessary resource consumption.

[0054] Additionally, the fundamental calculation is based on the product of the visible area's height and a preset coefficient. This is a practical strategy that correlates the buffer size with the current device's screen size. The height of the visible area is the height of the area on the current device's screen that can be used to display content. This height value is multiplied by a preset coefficient, and the product serves as the baseline value for determining the buffer size. The preset coefficient is an empirical value, for example, a value selected within the range of greater than 0 and less than or equal to 2, defining the ratio of the buffer size to the visible area, ensuring that the buffer size can adapt to screen devices of different sizes.

[0055] Regarding the setting of adaptive buffers, it can also be implemented in ways not limited to the following: Setting front and back buffer areas in the cross-observation object can be achieved by calling the `relativeToViewport` method of the cross-observation object. Setting buffer areas not only expands the listening area, avoiding white screens during rapid scrolling and improving user experience, but also allows recalculating the rendering boundary only after a certain length is reached, effectively reducing the frequency of `setData` and overcoming component performance bottlenecks. At the same time, the size of the buffer area should be reasonably controlled. In principle, the larger the buffer area, the less frequently the rendering boundary is recalculated and the less frequently the page data is updated. However, an excessively large buffer area violates the original intention of the virtual list to reduce the number of elements and increases rendering costs. Therefore, the size of the front and back buffer areas needs to be reasonably set according to the height of the data loading list component. For example, it can be set to a constant multiplied by the visible area height, where the constant should be less than or equal to 2.

[0056] This disclosure uses one or more factors to dynamically calculate, enabling the adaptive buffer to intelligently adjust its coverage, minimizing unnecessary preloading (to save resources and bandwidth) while maximizing the instantaneous presentation of content during scrolling.

[0057] In one possible implementation of this disclosure, after performing the loading or unloading operation of the target data loading list component corresponding to the cross-observation object, it is necessary to obtain the height data after the target data loading list component is loaded to complete the pagination data rendering, and retain the virtual placeholder node with height data after the component is unloaded, so as to solve the rendering layout problem of complex content such as lists with variable heights and image and text waterfall flow in the mini program environment, avoid content disorder or blankness caused by inaccurate height prediction, and ensure the continuity of page scrolling after unloading.

[0058] Specifically, but not limited to the following methods, can also be used: After the target data loading list component is loaded, obtain the height data of the target data loading list component corresponding to the cross-observable object through the cross-observable component; based on the target data loading list component and the height data, render the pagination data corresponding to the cross-observable object. After the target data loading list component is unloaded, retain the virtual placeholder node for the height data.

[0059] In the embodiments of this disclosure, once the target data loading list component is successfully loaded, a key piece of information—the height data of the target data loading list component corresponding to the cross-observation object—is immediately obtained through the cross-listening component. The height data is a precise numerical value representing the actual physical space occupied by the content of the target data loading list component in the vertical direction after rendering. The process of obtaining the height data is typically completed synchronously within the cross-state callback function of the cross-listening component. After the target data loading list component is loaded and rendered, the actual height of its corresponding DOM node or mini-program component instance can be accurately measured. The cross-listening component captures its exact height data by accessing the layout properties of the rendered node (e.g., through the `boundingClientRect` method). This height data is dynamically obtained, rather than pre-set, and therefore accurately reflects the actual size of different content (especially content with variable height) after rendering.

[0060] After obtaining accurate height data, the list component and its associated height data are loaded based on the target data, and the final rendering of the pagination data corresponding to the cross-observable objects is performed. This rendering process is not simply converting data content into visible pixels, but also a process of solidifying layout information. At this point, the content of the target data-loaded list component itself has been drawn, and its accurate height value has been recorded, providing a unique and accurate size basis for subsequent component unloading and placeholder behavior. This ensures that the cumulative height calculation of the entire list remains accurate, guaranteeing the accuracy of the scrollbar proportions.

[0061] It should be noted that after the target data loading list component is unloaded, its height data is not discarded. Instead, it is strictly preserved and applied to the virtual placeholder nodes.

[0062] This disclosure effectively prevents drastic changes in the total height of the entire scrollable view area caused by the sudden disappearance or appearance of element nodes during dynamic loading and unloading by acquiring height data. This avoids page jumping, flickering, or severe scroll bar jitter, providing users with a stable and smooth infinite scrolling browsing experience.

[0063] In one possible implementation of this disclosure, after the target data loading list component is dynamically loaded into the visible area through the slot interface set in the cross-listening component, it is also necessary to preload the content of the adjacent area to utilize the established listening mechanism and buffer strategy to further improve the smoothness of the user scrolling experience.

[0064] Specifically, but not limited to the following methods can also be used: based on the cross state and the adaptive buffer, perform a preloading operation on the data loading list component corresponding to the paginated data that is not in the visible area but is located in the adaptive buffer; wherein, the preloading operation includes at least loading the data content, but does not perform complete interface rendering.

[0065] In embodiments of this disclosure, the crossover state provides the exact location information of the content within the currently visible area, while the adaptive buffer explicitly defines a logically extended area surrounding the visible area. Therefore, paginated data that is not currently within the visible area but happens to be within the adaptive buffer's range will be identified. For such data, a preloading operation of its corresponding data loading list component will be proactively triggered and executed.

[0066] Preloading is a resource loading and initialization strategy that differs from full component loading. Preloading at least loads data content but does not perform full UI rendering. It involves filling the logical data model of the corresponding data loading list component with the specific content items contained in the paginated data, completing the data preparation. However, subsequent steps are intentionally paused at this stage; the complete rendering process of transforming data into actual user interface elements is not immediately executed. That is, the component's logic layer already holds the data to be displayed, but the view layer has not yet created the corresponding DOM nodes or performed complex style calculations and layout rendering. This partial loading strategy saves time on data requests and parsing when the user continues scrolling and the paginated data actually enters the visible area, completing the final UI rendering almost instantly and significantly reducing the perceived loading delay for the user.

[0067] This disclosure achieves a balance between resource consumption and user experience through preloading triggered by cross-state and adaptive buffers. By completing the time-consuming but necessary data loading phase in advance, it lays the foundation for a smooth and seamless scrolling experience, while avoiding premature full UI rendering, preventing unnecessary graphics processing unit burden and memory consumption, and ensuring the continuous and efficient operation of the entire mini-program.

[0068] In one possible implementation of this disclosure, when dividing the content to be displayed into multiple paginated data, the following methods can be used, but are not limited to: obtaining the attribute information of the content to be displayed, and determining whether to enable the list optimization parameters of the long list control component based on the attribute information and preset segmentation rules; in response to enabling the list optimization parameters of the long list control component, dividing the content to be displayed according to the preset pagination size based on the data two-dimensional method to obtain multiple paginated data.

[0069] In the embodiments of this disclosure, the segmentation process requires obtaining attribute information of the content to be displayed. Attribute information is metadata used to describe the inherent characteristics of the content to be displayed, and may include, but is not limited to, the total size of the content data, the approximate average height of content items, the data structure type of the content (e.g., whether it is a plain text list, a mixed text and image list, or a complex card collection), and even the expected rendering complexity of the content. By analyzing the attribute information, a preliminary assessment can be made of the resources required for subsequent processing and the performance bottlenecks that may be encountered. Based on the obtained attribute information, a preset segmentation rule is further combined to ultimately determine whether to enable the list optimization parameters of the long list control component. The preset segmentation rule is predefined in the decision logic and includes multiple judgment conditions, such as: when the total number of content items exceeds a certain threshold, or when the content type is identified as a text and image stream with high rendering overhead, optimization is determined to be enabled. The list optimization parameter is a control switch variable within the long list control component; its enabled state indicates that the component will initiate its core data processing and performance optimization logic.

[0070] When the system responds to the list optimization parameters of the long list control component being enabled, it initiates a data processing strategy, which involves dividing the content to be displayed according to a preset page size based on a two-dimensional data transformation method. This two-dimensional data transformation method reorganizes a one-dimensional linear data list into a two-dimensional matrix or hierarchical structure. It can logically divide an originally continuous list of content into multiple data blocks or pages with fixed capacities.

[0071] The preset pagination size defines the maximum number of content items that each data block can contain. It can be empirically set based on screen height, average content height, and desired scrolling performance. Through two-dimensional processing, the massive original dataset is organized neatly, ultimately resulting in multiple paginated data sets. Each paginated data set becomes an independent, size-controllable data unit, laying the foundation for subsequent on-demand loading, precise monitoring, and dynamic rendering. This allows for fine-grained management of the data lifecycle at the page level, rather than dealing with a massive whole, thus ensuring improved overall response speed and scrolling smoothness of the mini-program.

[0072] Specifically, regarding the segmentation of content to be displayed, the following methods can be used, but are not limited to: creating components according to the construction rules of long list control components, and processing list data based on whether long list optimization is enabled. If long list optimization is enabled, the data is two-dimensionalized to implement a pagination mechanism, recording the relationship between the virtual corresponding pagination page number and the corresponding pagination content module. By controlling and setting the data related to the nodes required for this loading, the minimum amount of data transferred from the logic layer to the rendering layer is ensured, thereby improving the performance of the mini-program.

[0073] Meanwhile, the process of s in the mini program can be roughly divided into the following three stages: (1) Traversing and updating the virtual DOM tree of the logic layer, triggering the component lifecycle, etc. (2) Transmitting data from the logic layer to the view layer; (3) Updating the virtual DOM tree of the view layer, updating the real DOM elements and triggering page rendering updates. In step (2), since the logic layer and view layer of the mini program are two independent running environments, belonging to different threads or processes, they cannot directly share data. Data serialization, cross-thread / process data transmission, and data deserialization are required. Therefore, the data transmission process is asynchronous and non-real-time. So the data transmission time is positively correlated with the amount of data. If the other end thread is busy, the data will wait in the message queue, increasing the rendering time. If the amount of data is too large, it will cause the mini program to lag or even crash. Therefore, it is necessary to strictly control the amount of data transmitted to reduce performance overhead and time consumption.

[0074] This publicly disclosed data segmentation ensures that the data segmentation is targeted (segmentation is only performed on the content that needs optimization), and solves the data transmission bottleneck of loading long content in mini programs by using data two-dimensionalization and reasonable pagination size control.

[0075] Corresponding to the content loading method described above, this invention also proposes a content loading apparatus. Since the apparatus embodiments of this invention correspond to the method embodiments described above, details not disclosed in the apparatus embodiments can be referred to in the method embodiments described above, and will not be repeated here.

[0076] Figure 3 This is a schematic diagram of the structure of a content loading device provided in an embodiment of the present disclosure, as shown below. Figure 3 As shown, it includes: Setting unit 31 is used to set a scrollable view area based on a pre-built scroll layer component, wherein the scrollable view area carries a long list control component, a cross listener component, and a data loading list component; Segmentation unit 32 is used to receive the content to be displayed based on the long list control component and segment the content to be displayed into multiple pagination data; Construction unit 33 is used to generate data identifiers corresponding to each of the multiple paginated data based on the data loading list component, and to construct cross-observation objects based on the data identifiers; The listening unit 34 is used to listen to the cross state between the cross-observation object and the visible area based on the cross-listening component, wherein the visible area is the view display area in the scrollable view area, and the cross state is used to indicate whether the cross-observation object scrolls into or out of the visible area. Execution unit 35 is used to respond to the monitored cross state and dynamically execute the loading or unloading operation of the target data loading list component corresponding to the cross observed object through the cross monitoring component. The data loading list component is configured to at least support the rendering of list content of variable height or image and text waterfall content.

[0077] Furthermore, in one possible implementation of this disclosure embodiment, the construction unit 33 is specifically used for: Generate a corresponding observation object identifier for each data identifier; Create cross-observation instances based on the observer object identifiers and their corresponding pagination data; The cross-observation instance is associated with the cross-listener component and registered to construct the cross-observation object.

[0078] Furthermore, in one possible implementation of this disclosure embodiment, the execution unit 35 is specifically used for: In response to the crossover state where the crossover ratio is greater than a preset ratio threshold, the target data loading list component is dynamically loaded into the visible area through the slot interface set in the crossover listening component. The slot interface is used to reserve space for the data loading list component or the virtual area. In response to the intersection state where the intersection ratio is no greater than a preset ratio threshold, the target data loading list component is dynamically unloaded from the visible area through the slot interface, while retaining the virtual placeholder node of the target data loading list component.

[0079] Furthermore, in one possible implementation of this embodiment, the setting unit 31 is further configured to: Set an adaptive buffer for the cross-observation component. The adaptive buffer includes at least a front buffer and a back buffer corresponding to the cross-observation object. The front buffer is used to preload the data loading list component corresponding to the paginated data before the cross-observation object, and the back buffer is used to preload the data loading list component corresponding to the paginated data after the cross-observation object. The size of the adaptive buffer is dynamically determined based on at least one of the following factors: the content type of the content to be displayed, the size of the pagination data, the historical scrolling speed, or the product of the height of the visible area and a preset coefficient.

[0080] Furthermore, in one possible implementation of this disclosure embodiment, the execution unit 35 is further configured to: After the target data loading list component is loaded, the height data of the target data loading list component corresponding to the cross-observable object is obtained through the cross-observable component; Based on the target data, load the list component and height data, and then render the pagination data corresponding to the cross-observable objects.

[0081] After the target data loading list component is unloaded, a virtual placeholder node for the height data is retained.

[0082] Furthermore, in one possible implementation of this disclosure embodiment, the execution unit 35 is further configured to: Based on the cross state and adaptive buffer, a preloading operation is performed on the data loading list component corresponding to the paginated data that is not in the visible area but is in the adaptive buffer. The preloading operation includes loading data content, but does not perform complete interface rendering.

[0083] Furthermore, in one possible implementation of this disclosure embodiment, the segmentation unit 32 is specifically used for: Obtain the attribute information of the content to be displayed, and based on the attribute information and preset segmentation rules, determine whether to enable the list optimization parameters of the long list control component; In response to the list optimization parameters of the long list control component, the content to be displayed is divided into multiple pages based on the preset page size using a two-dimensional data method.

[0084] It should be noted that the foregoing explanation of the method embodiments also applies to the apparatus of the embodiments of this disclosure, and the principle is the same. Therefore, the embodiments of this disclosure are not limited thereto.

[0085] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0086] Figure 4 A schematic block diagram of an example electronic device 400 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0087] like Figure 4As shown, device 400 includes a computing unit 401, which can perform various appropriate actions and processes based on a computer program stored in ROM (Read-Only Memory) 402 or a computer program loaded from storage unit 408 into RAM (Random Access Memory) 403. RAM 403 may also store various programs and data required for the operation of device 400. The computing unit 401, ROM 402, and RAM 403 are interconnected via bus 404. I / O (Input / Output) interface 405 is also connected to bus 404.

[0088] Multiple components in device 400 are connected to I / O interface 405, including: input unit 406, such as keyboard, mouse, etc.; output unit 407, such as various types of monitors, speakers, etc.; storage unit 408, such as disk, optical disk, etc.; and communication unit 409, such as network card, modem, wireless transceiver, etc. Communication unit 409 allows device 400 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0089] The computing unit 401 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 401 include, but are not limited to, CPUs (Central Processing Units), GPUs (Graphics Processing Units), various special-purpose AI (Artificial Intelligence) computing chips, various computing units running machine learning model algorithms, DSPs (Digital Signal Processors), and any suitable processor, controller, microcontroller, etc. The computing unit 401 performs the various methods and processes described above, such as the content loading method. For example, in some embodiments, the content loading method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 408. In some embodiments, part or all of the computer program may be loaded and / or installed on device 400 via ROM 402 and / or communication unit 409. When the computer program is loaded into RAM 403 and executed by the computing unit 401, one or more steps of the methods described above may be performed. Alternatively, in other embodiments, the computing unit 401 may be configured to perform the aforementioned content loading method by any other suitable means (e.g., by means of firmware).

[0090] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, FPGAs (Field Programmable Gate Arrays), ASICs (Application-Specific Integrated Circuits), ASSPs (Application-Specific Standard Products), SOCs (System-on-Chips), CPLDs (Complex Programmable Logic Devices), computer hardware, firmware, software, and / or combinations thereof. These various implementations may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0091] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0092] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, RAM, ROM, EPROM (Electrically Programmable Read-Only Memory) or flash memory, optical fiber, CD-ROM (Compact Disc Read-Only Memory), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0093] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (Cathode-Ray Tube) or LCD (Liquid Crystal Display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0094] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or computing systems that include middleware components (e.g., application servers), or computing systems that include frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include LANs (Local Area Networks), WANs (Wide Area Networks), the Internet, and blockchain networks.

[0095] Computer systems can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. A server can be a cloud server, also known as a cloud computing server or cloud host, a hosting product within the cloud computing service system that addresses the shortcomings of traditional physical hosts and VPS (Virtual Private Server) services, such as high management difficulty and weak business scalability. Servers can also be servers for distributed systems or servers incorporating blockchain technology.

[0096] It's important to note that artificial intelligence (AI) is the study of enabling computers to simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, and planning). It encompasses both hardware and software technologies. AI hardware technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, and big data processing. AI software technologies primarily include computer vision, speech recognition, natural language processing, machine learning / deep learning, big data processing, and knowledge graph technologies.

[0097] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0098] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for loading content, characterized in that, include: A scrollable view area is set up based on a pre-built scroll layer component, wherein the scrollable view area carries a long list control component, a cross listener component, and a data loading list component; The long list control component receives the content to be displayed and divides the content to be displayed into multiple paginated data. Based on the data loading list component, data identifiers corresponding to each of the multiple paginated data are generated, and cross-observation objects are constructed based on the data identifiers; The cross-listening component monitors the cross-viewing object and the visible area, wherein the visible area is the view display area in the scrollable view area, and the cross-viewing state is used to indicate whether the cross-viewing object scrolls into or out of the visible area. In response to the detected cross state, the cross listening component dynamically executes the loading or unloading operation of the target data loading list component corresponding to the cross observed object, wherein the data loading list component is configured to support rendering of at least variable height list content or image and text waterfall content.

2. The content loading method according to claim 1, characterized in that, The construction of cross-observation objects based on the data identifiers includes: Generate a corresponding observation object identifier for each of the data identifiers; Based on the observation object identifiers and their corresponding pagination data, create cross-observation instances; The cross-observation instance is associated with the cross-listening component for registration to construct the cross-observation object.

3. The content loading method according to claim 1, characterized in that, The dynamic execution of loading or unloading operations of the target data loading list component corresponding to the cross-observation object through the cross-monitoring component includes: In response to the crossover state where the crossover ratio is greater than a preset ratio threshold, the target data loading list component is dynamically loaded into the visible area through the slot interface set in the crossover listening component, wherein the slot interface is at least used to reserve space for the data loading list component or the virtual area; In response to the intersection state being that the intersection ratio is not greater than the preset ratio threshold, the target data loading list component is dynamically unloaded from the visible area through the slot interface, while retaining the virtual placeholder node of the target data loading list component.

4. The content loading method according to claim 3, characterized in that, After monitoring the intersection state between the cross-observed object and the visible area based on the cross-monitoring component, the method further includes: An adaptive buffer is set for the cross-observation component, wherein the adaptive buffer includes at least a front buffer and a back buffer corresponding to the cross-observation object, the front buffer is used to preload the data loading list component corresponding to the paginated data before the cross-observation object, and the back buffer is used to preload the data loading list component corresponding to the paginated data after the cross-observation object. The size of the adaptive buffer is dynamically determined based on at least one of the following factors: the content type of the content to be displayed, the size of the pagination data, the historical record of scrolling speed, or the product of the height of the visible area and a preset coefficient.

5. The content loading method according to claim 3, characterized in that, The method further includes: After the target data loading list component is loaded, the height data of the target data loading list component corresponding to the cross-observation object is obtained through the cross-listening component. Based on the target data loading list component and the height data, the pagination data corresponding to the cross-observation object is rendered; After the target data loading list component is unloaded, the virtual placeholder node retains the height data.

6. The content loading method according to claim 4, characterized in that, After dynamically loading the target data loading list component into the visible area through the slot interface set in the cross-listening component, the method further includes: Based on the cross state and the adaptive buffer, a preloading operation is performed on the data loading list component corresponding to the paginated data that is not in the visible area but is in the adaptive buffer; The preloading operation includes at least loading data content, but does not perform complete interface rendering.

7. The content loading method according to claim 1, characterized in that, The step of dividing the content to be displayed into multiple paginated data includes: Obtain the attribute information of the content to be displayed, and based on the attribute information and preset segmentation rules, determine whether to enable the list optimization parameters of the long list control component; In response to enabling the list optimization parameters of the long list control component, the content to be displayed is divided according to a preset page size based on a two-dimensional data method to obtain the multiple page data.

8. A content loading device, characterized in that, include: The setting unit is used to set a scrollable view area based on a pre-built scrolling layer component, wherein the scrollable view area carries a long list control component, a cross listener component, and a data loading list component; A segmentation unit is used to receive content to be displayed based on the long list control component and segment the content to be displayed into multiple pagination data; A construction unit is used to generate data identifiers corresponding to each of the multiple paginated data based on the data loading list component, and to construct cross-observation objects based on the data identifiers; A listening unit is configured to listen to the cross-viewing object and the visible area based on the cross-listening component, wherein the visible area is the view display area in the scrollable view area, and the cross-viewing state is used to indicate whether the cross-viewing object scrolls into or out of the visible area. An execution unit is configured to, in response to the detected cross state, dynamically execute a loading or unloading operation of a target data loading list component corresponding to the cross observation object through the cross listening component, wherein the data loading list component is configured to at least support rendering of list content of variable height or image and text waterfall content.

9. An electronic device, characterized in that, include: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-7.

10. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method according to any one of claims 1-7.

Images