Loading method, system and equipment of list data, medium and program product
By lazily loading container components to display real user interface components within the viewport boundary, the problems of high resource occupation and UI lag during long list loading are solved, and efficient cross-platform compatibility and user experience are achieved.
Patent Information
- Application Number
- CN202510487882.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-18
- Publication Date
- 2025-07-25
AI Technical Summary
The prior art has problems such as high resource usage, lag in UI and poor cross-platform compatibility when loading long lists, which affects user experience and application performance.
By lazy loading the container component, the real user interface component is displayed only when the element enters the viewport boundary range. The viewport boundary range and element position information are matched, lazy loading elements are displayed in advance, and placeholder elements are displayed on elements that are not within the viewport boundary range to reduce resource consumption.
It significantly improves the loading speed of long lists, reduces UI lag rate, improves user experience, and achieves cross-platform compatibility and reduces resource consumption.
Smart Images
Figure CN120372114A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the technical field of list data loading, and particularly to a method, a system, a device, a medium, and a program product for loading list data. Background Art
[0002] The existing technologies have significant deficiencies in aspects such as the loading speed of long lists, resource consumption, UI (User Interface) jitter rate, and cross-platform compatibility, and it is difficult to meet the requirements of modern applications for high performance and good user experience. Specifically:
[0003] For example Figure 1 As shown, the existing technologies usually adopt the method of loading all data at once when loading long lists. When the amount of data increases, it will cause the page startup time to be too long, the memory occupancy to be too high, and even the application to crash. In addition, loading a large amount of data at once will also cause jitter problems during sliding, seriously affecting the user experience.
[0004] Secondly, in terms of lazy loading, although lazy loading can load data on demand, it needs to frequently load new content during the sliding process, increasing the calculation amount during sliding, resulting in frame drops and white blocks during sliding, affecting the user's visual experience.
[0005] At the same time, list lazy loading also has obvious defects in cross-platform compatibility. For example, virtual scrolling technology has high compatibility requirements for browsers and may not work properly in some browsers. This limitation restricts the wide application of the technology. Summary of the Invention
[0006] The technical problem to be solved by the present disclosure is to overcome the defects of high resource occupancy and UI jitter in the existing technology for loading long lists, and to provide a method, a system, a device, a medium, and a program product for loading list data.
[0007] The present disclosure solves the above technical problem through the following technical solutions:
[0008] In a first aspect, a method for loading list data is provided. The list data includes a plurality of elements, and the outer layer of the elements encapsulates a lazy loading container component. The lazy loading container component defaults to display a placeholder element and only displays a real user interface component when the element is marked as a lazy loading element. The loading method includes:
[0009] Obtain the viewport boundary range, where the viewport boundary range includes a diff value (Difference) range;
[0010] In response to the list data being in a scrolling state, calculate the position information of the element in real time;
[0011] In response to the position information of the element entering the range of the diff value, mark the element as the lazy-loaded element;
[0012] Display the real user interface component of the lazy-loaded element.
[0013] Optionally, the step of marking the element as the lazy-loaded element includes:
[0014] Trigger the preset callback function corresponding to the element to obtain the status value of the element;
[0015] In response to the status value meeting the preset status threshold, confirm that the element is within the range of the diff value;
[0016] Mark the element as the lazy-loaded element.
[0017] Optionally, the placeholder element includes at least one of a static placeholder graphic, a skeleton screen dynamic placeholder component, and a low-resolution preview image.
[0018] Optionally, before obtaining the viewport boundary range, it further includes:
[0019] Initialize the list data and create a manager factory;
[0020] Pass the element list of the list data, the domain parameter, and the viewport boundary range to the manager factory;
[0021] Initialize the LazyloadManager and obtain the lazy-loaded container component;
[0022] Encapsulate the elements in the list data with the lazy-loaded container component.
[0023] Optionally, the lazy-loaded container component uses the same API (Application Programming Interface) call logic for different loading platforms.
[0024] Optionally, the lazy-loaded container component includes at least one of an index.ts file, an index.pc.ts file, an index.h5.ts file, and an index.rn.ts file, and the loading method further includes:
[0025] In response to the loading platform being the browser platform and the lazy-loaded container component including the index.h5.ts file and / or the index.pc.ts file, call the index.h5.ts file and / or the index.pc.ts file;
[0026] In response to the loading platform being a hybrid application framework platform and the lazy loading container component including the index.rn.ts file, call the index.rn.ts file;
[0027] In response to the lazy loading container component only including the index.ts file, call the index.ts file.
[0028] In a second aspect, a loading system for list data is provided. The list data includes a number of elements, and the outer layer of the elements encapsulates a lazy loading container component. The lazy loading container component defaults to display placeholder elements and only displays real user interface components when the elements are marked as lazy loading elements. The loading system includes a boundary range acquisition module, an element position calculation module, a lazy loading element marking module, and a display module;
[0029] The boundary range acquisition module is used to acquire the viewport boundary range;
[0030] The element position calculation module is used to, in response to the list data being in a scrolling state, calculate the position information of the elements in real time;
[0031] The lazy loading element marking module is used to, in response to the position information of the elements entering the viewport boundary range, mark the elements as the lazy loading elements;
[0032] The display module is used to display the real user interface components of the lazy loading elements.
[0033] In a third aspect, an electronic device is provided, including a memory, a processor, and a computer program stored on the memory and used to run on the processor. When the processor executes the computer program, the loading method for list data as described in the first aspect is implemented.
[0034] In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the loading method for list data as described in the first aspect is implemented.
[0035] In a fifth aspect, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the loading method for list data as described in the first aspect is implemented.
[0036] On the basis of conforming to common knowledge in the art, the above preferred conditions can be combined arbitrarily to obtain various preferred examples of the present disclosure.
[0037] The positive and progressive effects of the present disclosure are as follows: By matching the positions of elements in the list data with the viewport boundary range and displaying in advance the elements that enter the diff value range, the loading speed of the long list can be significantly improved, the UI lag rate can be reduced, and the user experience can be enhanced. At the same time, the present invention can selectively perform lazy loading on the components or sub-components at the corresponding positions and configure the display positions in a controllable manner, and only display placeholder elements for the elements not within the viewport boundary range, thereby reducing resource consumption. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] Figure 1 Schematic diagram showing the display of loading list data in the prior art;
[0039] Figure 2 Flowchart of a method for loading list data provided by an exemplary embodiment of the present disclosure;
[0040] Figure 3 Schematic diagram of the viewport boundary range of a method for loading list data provided by an exemplary embodiment of the present disclosure;
[0041] Figure 4 Schematic diagram showing the display of loading list data of a method for loading list data provided by an exemplary embodiment of the present disclosure;
[0042] Figure 5 Flowchart of step S103 in a method for loading list data provided by an exemplary embodiment of the present disclosure;
[0043] Figure 6 Module schematic diagram of a system for loading list data provided by an exemplary embodiment of the present disclosure;
[0044] Figure 7 Schematic diagram of the hardware structure of an electronic device provided by an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION OF THE EMBODIMENTS
[0045] The present disclosure will be further described below by way of embodiments, but the present disclosure is not limited to the scope of the described embodiments.
[0046] In the embodiments of the present disclosure, prefix words such as "first" and "second" are only used to distinguish different described objects, and have no limiting effect on the position, order, priority, quantity, content, etc. of the described objects. The use of ordinal words and other prefix words for distinguishing described objects in the embodiments of the present disclosure does not constitute a limitation on the described objects. The statements of the described objects refer to the descriptions in the context of the claims or embodiments, and should not constitute unnecessary limitations due to the use of such prefix words. In addition, in the description of the present embodiment, unless otherwise specified, the meaning of "a plurality" is two or more.
[0047] In the embodiments of the present disclosure, the collection, storage, use, processing, transmission, provision, and disclosure of the user's personal information comply with the provisions of relevant laws and regulations and do not violate public order and good customs.
[0048] Embodiment 1
[0049] Figure 2 The following is a flowchart of a method for loading list data provided by an exemplary embodiment of the present disclosure. As Figure 2 shown, this embodiment provides a method for loading list data. The list data includes several elements, and the outer layer of the elements encapsulates a lazy loading container component. The lazy loading container component defaults to displaying a placeholder element and only displays the real user interface component when the element is marked as a lazy loading element. The loading method includes:
[0050] S101. Obtain the viewport boundary range, where the viewport boundary range includes a diff value range;
[0051] Optionally, the viewport boundary extension range includes the real visible window value and the range of the diff value. Obtain the diff value of the viewport boundary extension range. As Figure 3 shown, above the diff value range of 200 is the real visible window 100 of the list data, and below the diff value range of 200 is the area 300 to be displayed next. When the list element (Element) enters the diff value range from the area to be displayed next, the lazy loading manager (LazyManager) can control the lazy loading component to be displayed in advance, improving the user experience.
[0052] Optionally, the diff value is matched with the loading time of the list data elements and the scrolling speed of the list data to achieve the early display of the lazy loading of the elements in the list data within the diff value range and display the real user interface component when entering the real visible window, avoiding UI jamming.
[0053] S102. In response to the list data being in a scrolling state, calculate the position information of the element in real time;
[0054] Optionally, create an observer (Observer) for the scrolling list and provide a lazy loading switch to manage the elements (Views) that need to be lazily loaded in the scrolling list data. At the same time, listen to the scrolling event (onScroll) of the list data. By calculating the element position in real time, ensure that the display state of the UI elements can be updated in time during the scrolling process, improving the response speed of user interaction; and reducing unnecessary file object (DOM, Document Object Model) operations, improving the page performance.
[0055] S103. If the position information of the element enters the range of the diff value, mark the element as the lazy-loading element;
[0056] S104. Display the real user interface component of the lazy-loading element.
[0057] In this solution, by matching the position of the element in the list data with the viewport boundary range and pre-displaying the elements that enter the diff value range, the loading speed of the long list can be significantly improved, the UI jank rate can be reduced, and the user experience can be enhanced. At the same time, selective lazy loading of the corresponding components or sub-components and controllable display position configuration can be performed. As Figure 4 shown, the number of elements (Views) loaded within the viewport boundary range is significantly reduced, and only placeholder elements are displayed for the elements not within the viewport boundary range, reducing resource consumption.
[0058] As an implementable embodiment, as Figure 5 shown, the step of marking the element as the lazy-loading element in step S103 includes:
[0059] S1031. Trigger the preset callback function corresponding to the element to obtain the status value of the element;
[0060] S1032. If the status value meets the preset status threshold, confirm that the element is within the range of the diff value;
[0061] S1033. Mark the element as the lazy-loading element.
[0062] In this solution, when it is necessary to determine whether an element enters the lazy-loading range, the preset callback function corresponding to the element is triggered. The callback function is usually a dynamic calculation logic used to obtain the current status value of the element. The status value includes dynamic data such as the visibility, position information, and loading priority of the element. When the status value represents the position information of the element, it can be the distance of the element from the viewport boundary or whether the element completely enters the viewport. The flexibility of the loading strategy is improved through the preset callback function and the status threshold. The status threshold and the diff value range can be dynamically adjusted according to different scenarios. By dynamically judging the status value and the diff value range, the elements that need to be lazy-loaded can be accurately determined, unnecessary loading operations can be avoided, and the loading performance can be improved.
[0063] As an implementable embodiment, the placeholder element includes at least one of a static placeholder graphic, a skeleton screen dynamic placeholder component, and a low-resolution preview image.
[0064] In this solution, the static placeholder graphics can be rectangular blocks with a fixed color or a simple pattern, which are used to be immediately displayed at the initial stage of page loading, occupy the position of the target element, and prevent the page layout from jittering or misaligning due to unloaded content; the skeleton screen can be a simulated skeleton structure of the page, such as the outlines of text and pictures, to show the loading status, and use CSS animations or JavaScript dynamic effects to simulate the visual effect of content loading; the low-resolution preview image occupies the target position by loading a blurred or low-resolution image, and is used to achieve a smooth visual transition. By utilizing the characteristics of the static placeholder graphics and the skeleton screen that do not require additional network requests, as well as the extremely low initial loading data volume of the low-resolution preview image, the loading performance is optimized and the resource occupancy is reduced.
[0065] As an implementable implementation manner, before obtaining the viewport boundary range, it further includes:
[0066] Initialize the list data and create a manager factory;
[0067] Pass the element list, domain parameters, and viewport boundary range of the list data to the manager factory;
[0068] Initialize the lazy loading manager and obtain the lazy loading container component;
[0069] Encapsulate the elements in the list data with the lazy loading container component.
[0070] Optionally, the manager factory (Factory) is used to manage the lazy loading managers of different scrolling lists, set whether lazy loading is enabled for the current scrolling list, and set the boundaries of the viewable window. Moreover, the lazy loading manager of the current list can be obtained through the Factory in the list elements. The manager factory manages the lazy loading managers of multiple lists simultaneously to implement the lazy loading of multiple scrolling list components on the same page.
[0071] The lazy loading manager is used to create an observer for the scrolling list, provide a lazy loading switch, manage the corresponding list elements that need to be lazily loaded in the scrolling list, and simultaneously listen for the scrolling events of the list.
[0072] In the scrolling state, the elements that need to be lazily loaded in the list data or any of their sub-elements (SubView) are wrapped with placeholder elements (LazyLoadView). When the placeholder elements are initialized, the lazy loading manager of the list data during the current scrolling is obtained through the manager factory, and whether the elements of the current list data are displayed within the viewable window is obtained through the observer of the lazy loading manager. When the element is destroyed, the listening of the current observe is cancelled.
[0073] In this solution, through the separation of the manager factory and the lazy loading manager, modular design is achieved, which is convenient for extension and maintenance. Different lazy loading strategies can be flexibly configured through the manager factory. The lazy loading container component is used to encapsulate elements, and only the elements entering the viewport are loaded, significantly reducing the initial loading time and resource consumption.
[0074] As an implementable embodiment, the lazy loading container component uses the same API call logic for different loading platforms.
[0075] In this solution, for compatibility processing of different platforms, the logic of the web (web page) platform and the hybrid application framework platform (React-native) platform is unified. The web platform includes PC or app-web. The same lazy loading logic is used on the web platform and the hybrid application framework platform, enabling some UI libraries that support multiple platforms simultaneously to directly call the unified API without the need for compatibility for different platforms.
[0076] As an implementable embodiment, the lazy loading container component includes at least one of the index.ts file, the index.h5.ts file, and the index.rn.ts file. The loading method further includes:
[0077] In response to the loading platform being the browser platform and the lazy loading container component including the index.h5.ts file, the index.h5.ts file is called;
[0078] In response to the loading platform being the hybrid application framework platform and the lazy loading container component including the index.rn.ts file, the index.rn.ts file is called;
[0079] In response to the lazy loading container component only including the index.ts file, the index.ts file is called.
[0080] In this solution, different platforms are compatible through the index.ts file, the index.h5.ts file, the index.pc.ts file, or the index.rn.ts file. On the web platform, the index.h5.ts or index.pc.ts file will be preferentially read. When in the mobile hybrid application framework platform technology stack, the index.rn.ts file will be preferentially read, and the index.rn.ts file will overwrite the original index.ts file on the mobile side. If the lazy loading container component only includes the index.ts file, the index.ts file will be directly read on all platforms. Compatibility for different platforms is achieved with the file ending as the suffix.
[0081] The method for loading list data provided in this embodiment can significantly improve the loading speed of long lists, reduce the UI freezing rate, and enhance the user experience by matching the positions of elements in the list data with the viewport boundary range and pre-displaying the elements within the diff value range. At the same time, the present invention can selectively perform lazy loading on the components or sub-components at the corresponding positions and configure the display positions controllably, and only display placeholder elements for the elements not within the viewport boundary range, reducing resource consumption.
[0082] Embodiment 2
[0083] Corresponding to the foregoing embodiment of the method for loading list data, the present disclosure also provides an embodiment of a system for loading list data.
[0084] Figure 6 As a schematic diagram of modules of a system for loading list data provided in an exemplary embodiment of the present disclosure, the list data includes a plurality of elements, and a lazy loading container component is encapsulated outside the elements. The lazy loading container component defaults to display placeholder elements and only displays the real user interface components when the elements are marked as lazy loading elements. As Figure 6 shown, the system 100 includes: a boundary range acquisition module 101, an element position calculation module 102, a lazy loading element marking module 103, and a display module 104;
[0085] The boundary range acquisition module 101 is configured to acquire the viewport boundary range;
[0086] The element position calculation module 102 is configured to, in response to the list data being in a scrolling state, calculate the position information of the elements in real time, and the viewport boundary range includes a diff value range;
[0087] The lazy loading element marking module 103 is configured to, in response to the position information of the element entering the diff value range, mark the element as the lazy loading element;
[0088] The display module 104 is configured to display the real user interface components of the lazy loading elements.
[0089] As an implementable manner, the lazy loading element marking module 103 includes a function trigger unit, a status value confirmation unit, and an element marking unit;
[0090] The function trigger unit is configured to trigger a preset callback function corresponding to the element to obtain the status value of the element;
[0091] The status value confirmation unit is configured to, in response to the status value meeting a preset status threshold, confirm that the element is within the viewport boundary range;
[0092] An element marking unit for marking the element as the lazy loading element.
[0093] As an implementable way, the placeholder element includes at least one of a static placeholder graphic, a skeleton screen dynamic placeholder component, and a low-resolution preview image.
[0094] As an implementable way, it further includes an initialization module:
[0095] The initialization module is used to initialize the list data and create a manager factory; pass the element list, domain parameters, and viewport boundary range of the list data to the manager factory;
[0096] The initialization module is further used to initialize the lazy loading manager, obtain the lazy loading container component; encapsulate the elements in the list data with the lazy loading container component.
[0097] As an implementable way, the lazy loading container component uses the same API call logic for different loading platforms.
[0098] As an implementable way, the lazy loading container component includes at least one of an index.ts file, an index.pc.ts file, an index.h5.ts file, and an index.rn.ts file, and the loading system further includes a compatible loading module;
[0099] The compatible loading module is used to call the index.h5.ts file and / or the index.pc.ts file in response to the loading platform being the browser platform and the lazy loading container component including the index.h5.ts file and / or the index.pc.ts file;
[0100] The compatible loading module is further used to call the index.rn.ts file in response to the loading platform being the hybrid application framework platform and the lazy loading container component including the index.rn.ts file;
[0101] The compatible loading module is further used to call the index.ts file in response to the lazy loading container component only including the index.ts file.
[0102] For the system embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to the descriptions in the method embodiments. The system embodiments described above are only illustrative. The units described as separate components may or may not be physically separated. The components as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the present disclosure solution.
[0103] The list data loading system provided in this embodiment can significantly improve the loading speed of long lists, reduce the UI jitter rate and enhance the user experience by matching the element positions in the list data with the viewport boundary range and pre-displaying the elements within the diff value range. At the same time, the present invention can selectively perform lazy loading on the corresponding components or sub-components and configure the display positions controllably, and only display placeholder elements for the elements not within the viewport boundary range, reducing resource consumption.
[0104] Embodiment 3
[0105] Figure 7 FIG. is a schematic structural diagram of an electronic device shown in an exemplary embodiment of the present disclosure. The electronic device includes a memory, a processor, and a computer program stored on the memory and configured to run on the processor. When the processor executes the computer program, it implements the list data loading method described in any of the above embodiments. Figure 7 The displayed electronic device 90 is only an example and should not impose any limitation on the functions and usage scope of the embodiments of the present disclosure.
[0106] As Figure 7 shown, the electronic device 90 may be presented in the form of a general computing device, for example, it may be a server device. The components of the electronic device 90 may include, but are not limited to: at least one of the above-mentioned processors 91, at least one of the above-mentioned memories 92, and a bus 93 connecting different system components (including the memory 92 and the processor 91).
[0107] The bus 93 includes a data bus, an address bus, and a control bus.
[0108] The memory 92 may include volatile memory, such as random access memory (RAM) 921 and / or cache memory 922, and may further include read-only memory (ROM) 923.
[0109] The memory 92 may also include a program tool 925 (or utility) having a set (at least one) of program modules 924. Such program modules 924 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include the implementation of a network environment.
[0110] The processor 91 executes various functional applications and data processing by running computer programs stored in the memory 92, such as the method for loading list data provided in any of the above embodiments.
[0111] The electronic device 90 can also communicate with one or more external devices 94 (such as a keyboard, a pointing device, etc.). Such communication can be carried out through the input / output (I / O) interface 95. Moreover, the electronic device 90 can also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through the network adapter 96. As shown in the figure, the network adapter 96 communicates with other modules of the electronic device 90 through the bus 93. It should be understood that although not shown in the figure, other hardware and / or software modules can be used in combination with the electronic device 90, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID (Redundant Array of Independent Disks) systems, tape drives, and data backup storage systems, etc.
[0112] It should be noted that although several units / modules or sub-units / modules of the electronic device are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more of the above-described units / modules can be embodied in one unit / module. Conversely, the features and functions of one unit / module described above can be further divided and embodied by multiple units / modules.
[0113] Embodiment 4
[0114] The embodiments of the present disclosure also provide a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the method for loading list data provided in any of the above embodiments is implemented.
[0115] Among them, the more specific readable storage medium can include, but is not limited to: a portable disk, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, an optical storage device, a magnetic storage device, or any suitable combination of the above.
[0116] Embodiment 5
[0117] An embodiment of the present disclosure also provides a computer program product, including a computer program, which when executed by a processor, implements the method for loading list data described in any one of the above.
[0118] Among them, the program code for executing the computer program product of the present disclosure can be written in any combination of one or more programming languages, and the program code can be executed entirely on the user device, partially on the user device, executed as an independent software package, partially on the user device and partially on a remote device, or entirely on a remote device.
[0119] Although the specific embodiments of the present disclosure have been described above, those skilled in the art should understand that this is only an example, and the protection scope of the present disclosure is defined by the appended claims. Without departing from the principle and essence of the present disclosure, those skilled in the art can make various changes or modifications to these embodiments, but these changes and modifications all fall within the protection scope of the present disclosure.
Claims
1. A method for loading list data, characterized in that, The list data includes several elements, and the outer layer of the elements encapsulates a lazy loading container component. The lazy loading container component defaults to displaying a placeholder element and only displays the real user interface component when the element is marked as a lazy loading element. The loading method includes: Obtain the viewport boundary range, where the viewport boundary range includes a diff value range; In response to the list data being in a scrolling state, calculate the position information of the element in real time; In response to the position information of the element entering the diff value range, mark the element as the lazy loading element; Display the real user interface component of the lazy loading element.
2. The method for loading list data according to claim 1, wherein The step of marking the element as the lazy loading element includes: Trigger the preset callback function corresponding to the element to obtain the status value of the element; In response to the status value meeting the preset status threshold, confirm that the element is within the diff value range; Mark the element as the lazy loading element.
3. The method for loading list data according to claim 1, wherein The placeholder element includes at least one of a static placeholder graphic, a skeleton screen dynamic placeholder component, and a low-resolution preview image.
4. The method for loading list data according to claim 1, wherein Before obtaining the viewport boundary range, it also includes: Initialize the list data and create a manager factory; Pass the element list, domain parameters, and the viewport boundary range of the list data to the manager factory; Initialize the lazy loading manager and obtain the lazy loading container component; Encapsulate the elements in the list data with the lazy loading container component.
5. The loading method of the list data according to claim 4, characterized in that, The lazy loading container component uses the same API call logic for different loading platforms.
6. The loading method of the list data according to claim 5, characterized in that, The lazy loading container component includes at least one of an index.ts file, an index.pc.ts file, an index.h5.ts file, and an index.rn.ts file. The loading method further includes: In response to the loading platform being a browser platform and the lazy loading container component including the index.h5.ts file and / or the index.pc.ts file, call the index.h5.ts file and / or the index.pc.ts file; In response to the loading platform being a hybrid application framework platform and the lazy loading container component including the index.rn.ts file, call the index.rn.ts file; In response to the lazy loading container component only including the index.ts file, call the index.ts file.
7. A loading system for list data, characterized in that, The list data includes several elements, and the outer layer of the elements encapsulates a lazy loading container component. The lazy loading container component defaults to displaying a placeholder element and only displays the real user interface component when the element is marked as a lazy loading element. The loading system includes a boundary range acquisition module, an element position calculation module, a lazy loading element marking module, and a display module; The boundary range acquisition module is used to obtain the viewport boundary range, where the viewport boundary range includes a diff value range; The element position calculation module is used to calculate the position information of the element in real time in response to the list data being in a scrolling state; The lazy loading element marking module is configured to mark the element as a lazy loading element when the position information of the element enters the range of the diff value; The display module is configured to display the real user interface component of the lazy loading element.
8. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and configured to run on the processor, characterized in that, When the processor executes the computer program, it implements the loading method of the list data according to any one of claims 1 to 6.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the loading method of the list data according to any one of claims 1 to 6.
10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the loading method of the list data as described in any one of claims 1 - 6.