Page picture resource progressive loading method, device and system and storage medium

Abstract

The invention discloses a page picture resource progressive loading method, device and system and a storage medium, and relates to the technical field of data processing. The method comprises the steps that a timer event is set, and when a page is loaded, picture resources are searched in advance through the timer event; monitoring the page, and when the page changes, searching for picture resources needing to be asynchronously loaded; when the picture resources needing to be asynchronously loaded are found, the picture resources needing to be asynchronously loaded are replaced with thumbnails, and asynchronous loading is prepared; and monitoring the intersection condition of the picture resource and the visual area of the page, and when the picture resource is intersected with the visual area, asynchronously loading the original resource of the picture. By adopting the method provided by the embodiment of the invention, the data volume when the page is loaded for the first time is reduced, so that the loading speed is increased; repeated loading of the same picture resource is avoided, and network requests and bandwidth occupation are reduced; therefore, the best loading experience can be obtained no matter how the user interacts with the page.

Description

Technical Field

[0001] The present application belongs to the field of data processing technology, and in particular, relates to a method, device, system and storage medium for progressively loading page image resources. Background Art

[0002] When a web page running on a browser loads image resources on the page, it triggers the browser's own resource request link, which is essentially a network request. However, the browser's network requests have their own concurrency restrictions, and the resource loading speed will also be affected by factors such as the network and environment. Therefore, if a large number of resources are requested at the same time, the resource requests will be queued in the browser for processing. If a network request is inserted at this time, the later inserted network request will be queued after the previous request for processing. The subsequent request will not be executed until the previous request is loaded, which has a great negative impact on the overall loading smoothness of the web page.

[0003] The most common solution to the above problem is the "lazy loading of web page image resources" technology. Simply put, this technology uses the DOM native API to monitor elements in the page. When the monitored elements appear in the visible area of ​​the page, it starts loading image resources, thereby reducing the concurrency of image resource requests.

[0004] Although the lazy loading of the prior art can solve the problem of a large number of concurrent requests for web page image resources in most cases, if the visible area of ​​the web page itself can accommodate more image resources, the problem of high concurrency of image resource requests will still exist. Summary of the invention

[0005] The purpose of this application is to provide a method, device, system and storage medium for progressive loading of page image resources, so as to solve the problem that when a browser concurrently requests a large number of image resources, other network requests of the browser are queued and the web page is stuck or frozen, and the loading is not smooth.

[0006] In order to achieve the above objectives, the solution of this application is: In a first aspect, an embodiment of the present application provides a method for progressively loading a page image resource, comprising: Set a timer event to search for image resources in advance when the page is loaded; Monitor the page, and when the page changes, find the image resources that need to be loaded asynchronously; when the image resources that need to be loaded asynchronously are found, replace the image resources that need to be loaded asynchronously with thumbnails and prepare for asynchronous loading; Monitor the intersection of image resources and the visible area of ​​the page. When the image resources intersect with the visible area, set the maximum concurrency of asynchronous loading and asynchronously load the original resources of the image.

[0007] According to the above method of the embodiment of the present application, the following additional technical features may also be provided: Furthermore, cacheData is used to cache the data generated during the image resource loading process.

[0008] Furthermore, the page is monitored, including: monitoring DOM node changes in the page, browser size changes, and URL hash changes.

[0009] Furthermore, when the page triggers the listener, the timer event ends.

[0010] Furthermore, after asynchronously loading the original resource of the image, the listener is uninstalled.

[0011] Furthermore, when asynchronously loading the original resource of the image, use the reloadImg method to provide a smooth loading transition.

[0012] Furthermore, a timer event is set, and when the page is loaded, the image resources are searched in advance through the timer event, including triggering the timer event when the page is loaded. When the timer event is triggered, the image resources in the page are searched in advance by executing the preset function of the timer event, including traversing the DOM tree and searching Tag, and collect URL information.

[0013] In a second aspect, an embodiment of the present application provides a device for progressively loading a page image resource, comprising: The timer module is configured to set a timer event, and to search for image resources in advance through the timer event when the page is loaded; The monitoring and replacement module is configured to monitor the page, and when the page changes, find the image resources that need to be loaded asynchronously; when the image resources that need to be loaded asynchronously are found, the image resources that need to be loaded asynchronously are replaced with thumbnails, and are prepared for asynchronous loading; The asynchronous loading module is configured to monitor the intersection of the image resource and the visible area of ​​the page. When the image resource intersects the visible area, the maximum concurrency of the asynchronous loading is set, and the original resource of the image is asynchronously loaded.

[0014] In a third aspect, an embodiment of the present application provides a system for progressively loading page image resources, the system comprising a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement a method for progressively loading page image resources as provided in the first aspect of the embodiment of the present application.

[0015] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, it is used to implement the method for progressively loading page image resources as in the first aspect of the embodiment of the present application.

[0016] Compared with the prior art, the method for progressively loading page image resources provided by the embodiment of the present application has the following beneficial technical effects: The embodiment of the present application significantly reduces the amount of data when the page is initially loaded by searching for image resources in advance and preparing for asynchronous loading, and asynchronously loading its original resources only when the image resources intersect with the visible area, thereby improving the loading speed.

[0017] The embodiment of the present application uses cacheData to cache data generated during the image resource loading process, thereby avoiding repeated loading of the same image resource, thereby reducing network requests and bandwidth usage.

[0018] The embodiment of the present application dynamically identifies and processes new or changed image resources by monitoring DOM node changes, browser size changes, and URL hash changes in the page, ensuring the best loading experience no matter how the user interacts with the page.

[0019] The embodiment of the present application can reduce unnecessary resource consumption. When the page triggers monitoring, the timer event is ended, avoiding the continuation of unnecessary search operations when not needed, thereby saving resources.

[0020] The embodiment of the present application ensures that the related listeners and event handlers can be released in time when the image resources are no longer needed, thereby avoiding memory leaks and potential performance issues, by unloading the listener after asynchronously loading the original resources of the image.

[0021] The embodiment of the present application reduces the loading burden of the browser by setting the maximum concurrency of asynchronous loading during asynchronous loading, and can directly solve the problem of network request queuing of concurrent browser requests for image resources, thereby solving the loading smoothness of the web page.

[0022] The embodiment of the present application improves the user experience by providing a smooth loading transition using the reloadImg method when asynchronously loading the original resource of the image. The user will not suddenly see a visual jump caused by the image changing from a thumbnail to the original resource, but will see a smoother and more natural loading process. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A schematic diagram showing a process of a method for progressively loading page image resources according to an embodiment of the present application is shown; Figure 2A structural block diagram of a device for progressively loading page image resources according to an embodiment of the present application is shown; Figure 3 A structural block diagram of a computer device according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0024] In order to make the above-mentioned purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are described in detail below in conjunction with the accompanying drawings. It is to be understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for ease of description, only some structures related to the present application are shown in the accompanying drawings, rather than all structures. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0025] The terms "including" and "having" and any variations thereof in this application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device comprising a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products or devices.

[0026] Reference to "embodiments" in this application means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described in this application may be combined with other embodiments.

[0027] like Figure 1 As shown, the embodiment of the present application provides a method for progressively loading page image resources, comprising the following steps: Step 101, set a timer event, and when the page is loaded, search for image resources in advance through the timer event.

[0028] Timer events are a mechanism in JavaScript that allows developers to execute a function or code block after a specified time interval. In the progressive loading method of the present application embodiment, timer events are mainly used to look up page elements and set listeners in advance at the beginning of page loading. This is to ensure that when the page content has not been fully loaded, the processing of image resources that may need to be asynchronously loaded later can be prepared in advance. Timer events can provide a mechanism for delayed execution, allowing the page to have enough time for initial rendering and complete the necessary preparations in the process.

[0029] When the page is loaded, the embodiment of the present application will first perform an initialization operation. The purpose of step 101 is to prepare for the subsequent loading and monitoring of image resources. Specifically, the embodiment of the present application searches for image resources that need to be asynchronously loaded on the page through DOM operations, and sets various listeners for these image resources so that relevant changes can be detected in subsequent stages.

[0030] When the timer event is triggered, a function is executed to look for image resources in the page in advance. This process involves traversing the DOM tree and finding all Tags or other elements containing image resources, and collect their URLs or other related information. The advantage of looking up image resources in advance is that it can start preparing for the loading of images before the user actually scrolls to the location of the image. In this way, when the user scrolls to the vicinity of the image, the image may have been partially or completely loaded, thereby reducing waiting time and improving user experience.

[0031] Step 102, monitor the page, and when the page changes, search for image resources that need to be loaded asynchronously; when the image resources that need to be loaded asynchronously are found, replace the image resources that need to be loaded asynchronously with thumbnails, and prepare for asynchronous loading.

[0032] The monitoring mechanism is the core part of the progressive loading method of the embodiment of the present application. It is responsible for monitoring changes in DOM nodes, changes in browser size, and changes in URL hashes. These changes may mean adjustments to page content or layout, thereby affecting which image resources need to be loaded asynchronously. The monitoring mechanism can ensure that when changes occur, the image resources that need to be loaded asynchronously can be re-searched and processed.

[0033] In the embodiment of the present application, when the page changes, the image resources that need to be loaded asynchronously will be searched, such changes include user scrolling the page, dynamic update of the page content, etc. Once the image resources that need to be loaded asynchronously are found, these resources will be replaced with thumbnails to save bandwidth and speed up the initial loading of the page. At the same time, asynchronous loading will be prepared, that is, the original resources of the image will be loaded in the background without blocking the main thread of the page.

[0034] Timer events and listeners work together in the progressive loading method to ensure efficient and smooth loading of image resources. Timer events are responsible for initialization operations at the beginning of page loading, while listeners are responsible for handling changes in page content or layout. However, when a page triggers a listener event, it means that changes in DOM nodes, changes in browser dimensions, or changes in URL hashes have been detected. At this time, if the timer event is still running, it may continue to perform unnecessary operations, such as repeatedly searching for page elements or setting listeners. This will not only waste system resources, but may also cause performance degradation.

[0035] Therefore, when the page triggers a listening event, ending the timer event can avoid repeatedly searching for page elements or setting listeners, thereby saving system resources. By reducing unnecessary operations, the overall performance of the page can be improved, ensuring that image resources can be loaded more efficiently. Ending the timer event can reduce potential errors and conflicts, thereby maintaining system stability.

[0036] When the DOM nodes in the page change (such as adding, deleting or modifying nodes), the monitoring event will be triggered and the image resources that may be affected will be found; the reason for monitoring the changes of DOM nodes is that the content of the page may increase or decrease dynamically with the user's interaction or the execution of scripts. For example, when a user clicks a button, new content may be loaded to the page through AJAX requests, and these contents may include new image resources. If the changes of DOM nodes are not monitored, these newly added image resources will not be identified as objects that need to be loaded asynchronously, resulting in low loading efficiency or the image cannot be displayed correctly.

[0037] When the user adjusts the size of the browser window or switches devices, the page layout may change, thereby affecting the display of image resources in the visible area, which may cause images that were not originally in the visible area to enter the visible area, or images that were originally in the visible area to be moved out. In order to ensure that users can see the images they should see and that these images are loaded in the best way, it is necessary to monitor the changes in the browser size and adjust the image loading strategy accordingly. Therefore, the embodiment of the present application monitors the changes in the browser size and updates the list of image resources that need to be asynchronously loaded accordingly.

[0038] When a user jumps to a different part of a page by clicking on a link within the page (such as a navigation menu), the hash portion of the URL changes. This change may also cause a change in the page layout, which requires updating the list of asynchronously loaded image resources. The reason for listening to URL hash changes is that many single-page applications (SPAs) use the hash portion of the URL to manage different views or page states. When a user changes the hash portion of the URL by clicking a link or button, the page may not reload, but the content may change. These changes may include the addition of new image resources or the removal of existing image resources. Therefore, it is necessary to listen to changes in the URL hash to ensure that the loading of image resources is consistent with the current page state.

[0039] Specifically, the embodiment of the present application monitors changes in DOM nodes through NewMutationObserver; monitors changes in browser size through NewResizeObserver; and monitors changes in URL hashes through NewHashchange.

[0040] The data generated during the image resource loading process in the embodiment of the present application (such as the URL, size, loading status, etc. of the image) will be cached in cacheData. The advantage of this is that when the page is loaded again or the user revisits, the cached image resources can be identified and loaded more quickly, thereby improving the page loading speed and user experience.

[0041] In summary, this progressive loading method of page image resources achieves fast loading and display of image resources in the page without affecting the performance of the main thread of the page through optimization of multiple aspects such as fine page monitoring, timer event processing, asynchronous loading preparation, and image resource caching.

[0042] Step 103, monitor the intersection of the image resource and the visible area of ​​the page, when the image resource intersects with the visible area, set the maximum concurrency of asynchronous loading, and asynchronously load the original resource of the image.

[0043] The embodiment of the present application determines whether to asynchronously load the original resource of the image by monitoring the intersection of the image resource and the visible area of ​​the page. The implementation of this step relies on the browser's Intersection Observer API. The API provides a method for asynchronously observing the intersection state of the target element with its ancestor element or the top-level document viewport. When the visibility of the target element changes within the specified threshold, a callback function is triggered.

[0044] In this embodiment, an Intersection Observer instance is created for the target image resource, and a corresponding callback function is set. When the image resource enters the visible area (i.e., intersects with the viewport), the callback function is triggered, thereby executing the operation of asynchronously loading the original resource of the image.

[0045] After the image resource enters the visible area, its original resource needs to be asynchronously loaded from the server. This involves sending an HTTP request to obtain the image data and display it on the page. To achieve this, the embodiment of the application uses JavaScript's fetch API or XMLHttpRequest object to send a request, and after receiving the response, uses the URL.createObjectURL method to create a URL pointing to the image data, and then sets it to The src attribute of the element.

[0046] After asynchronously loading the original resource of the image, there is no need to continue monitoring the intersection of the image resource with the visible area of ​​the page. Therefore, the embodiment of the present application uninstalls the previously set Intersection Observer instance at this time to avoid unnecessary performance overhead. This is achieved by calling the disconnect method of the Intersection Observer instance.

[0047] When asynchronously loading the original resource of the image, in order to provide a better user experience, the embodiment of the present application also uses a smooth loading transition effect. It involves displaying a placeholder (such as a thumbnail or a blurred image) before loading a new image, and gradually replacing it after the new image is loaded. To achieve this effect, the embodiment of the present application defines a reloadImg method that accepts an image element and the URL of the new image to be loaded as parameters. Inside the method, first hide the original image element (for example, by setting its opacity to 0 and display to none), and then create a new one Element and set its src attribute to the URL of the new image. Then, use CSS animation or JavaScript transition effects to gradually display the new image element and hide the placeholder at the same time.

[0048] Furthermore, the embodiment of the present application adopts FetchImg Pool, an asynchronous image loading queue class, to receive the maximum concurrency number of external input. The class provides cancel (a method to cancel a resource loading request), add (adding a request data to the resource loading request queue), receives two parameters: src (the image resource src to be loaded) and callback (the callback for successful loading), toLoad (a method to start executing the resource request queue to load image resources) and processQueue (a method to automatically execute the next resource request in the queue after the previous resource is loaded), and fetchImgPool.maximum is used to specify the maximum concurrency of FetchImgPool's asynchronous resource loading, thereby reducing the loading burden of the browser, and can directly solve the problem of network request queuing for concurrent browser requests for image resources, and solve the loading smoothness of web pages.

[0049] In summary, by monitoring the intersection of image resources and the visible area of ​​the page, asynchronously loading the original resources of the image, uninstalling the monitoring, and using a smooth loading transition effect, the embodiment of the present application realizes an efficient and user-friendly progressive loading method for page image resources. This method not only improves the loading speed of the page, but also enhances the user's browsing experience.

[0050] like Figure 2 As shown, the embodiment of the present application provides a device for progressively loading page image resources, including a timer module 201, a monitoring replacement module 202 and an asynchronous loading module 203, wherein: The timer module 201 is configured to set a timer event, and to search for image resources in advance through the timer event when the page is loaded; The monitoring and replacing module 202 is configured to monitor the page, and when the page changes, search for image resources that need to be asynchronously loaded; when the image resources that need to be asynchronously loaded are found, the image resources that need to be asynchronously loaded are replaced with thumbnails, and are prepared for asynchronous loading; The asynchronous loading module 203 is configured to monitor the intersection of the image resource and the visible area of ​​the page. When the image resource intersects the visible area, the maximum concurrency of the asynchronous loading is set, and the original resource of the image is asynchronously loaded.

[0051] The progressive loading device for page image resources of the embodiment of the present application can be a computer device, or a component in the computer device, such as an integrated circuit or a chip. The computer device can be a terminal, or other devices other than a terminal. Exemplarily, the computer device can be a mobile phone, a tablet computer, a laptop computer, a palmtop computer, a vehicle-mounted computer device, a mobile Internet device (Mobile Internet Device, MID), an ultra-mobile personal computer (Ultra-Mobile Personal Computer, UMPC), a netbook or a personal digital assistant (Personal Digital Assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (Personal Computer, PC), etc., which is not specifically limited in the embodiment of the present application.

[0052] The progressive loading device for page image resources provided in the embodiment of the present application can achieve Figure 1 To avoid repetition, the various processes implemented in the embodiment of the method for progressively loading page image resources are not described here.

[0053] The present application also provides a computer device, such as Figure 3 As shown, the computer device includes a processor 301 and a memory 302. The memory 302 stores programs or instructions that can be executed on the processor 301. When the program or instructions are executed by the processor 301, the various steps of the above-mentioned page image resource progressive loading method are implemented, and the same technical effect can be achieved. To avoid repetition, they are not repeated here.

[0054] It should be noted that the computer device in the embodiment of the present application includes the above-mentioned mobile computer device and non-mobile computer device.

[0055] The memory 302 can be used to store software programs and various data. The memory 302 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data, wherein the first storage area may store an operating system, an application program or instructions required for at least one function (such as a sound playback function, an image playback function, etc.), etc. In addition, the memory 302 may include a volatile memory or a non-volatile memory, or the memory 302 may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), a static random access memory (SRAM), a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), an enhanced synchronous dynamic random access memory (ESDRAM), a synchronous link dynamic random access memory (SLDRAM) and a direct memory bus random access memory (DRRAM). The memory 302 of the embodiment of the present application includes but is not limited to these and any other suitable types of memory.

[0056] The processor 301 may include one or more processing units; optionally, the processor 301 integrates an application processor and a modem processor, wherein the application processor mainly processes operations related to an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communication signals, such as a baseband processor. It is understandable that the modem processor may not be integrated into the processor 301.

[0057] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, each process of the above-mentioned embodiment of the progressive loading method of page image resources is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0058] The embodiment of the present application also provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned page image resource progressive loading method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0059] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0060] An embodiment of the present application also provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned page image resource progressive loading method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0061] It should be noted that, in the present application, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises one..." does not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be noted that the scope of the method and device in the embodiment of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0062] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for progressively loading page image resources, characterized in that: The method comprises: Setting a timer event, and searching for image resources in advance through the timer event when the page is loaded; Monitor the page, and when the page changes, search for image resources that need to be asynchronously loaded; when the image resources that need to be asynchronously loaded are found, replace the image resources that need to be asynchronously loaded with thumbnails, and prepare for asynchronous loading; The intersection of the image resource and the visible area of ​​the page is monitored, and when the image resource intersects with the visible area, the maximum concurrency of the asynchronous loading is set, and the original resource of the image is asynchronously loaded.

2. The method for progressively loading page image resources according to claim 1, characterized in that: The method comprises: The data generated during the loading process of the image resource is cached through cacheData.

3. The method for progressively loading page image resources according to claim 1, characterized in that: The monitoring of the page includes: Listen for DOM node changes, browser size changes, and URL hash changes in the page.

4. The method for progressively loading page image resources according to claim 1, characterized in that: The method comprises: When the page triggers the monitoring, the timer event ends.

5. The method for progressively loading page image resources according to claim 1, characterized in that: The method comprises: After asynchronously loading the original resource of the image, uninstall the listener.

6. The method for progressively loading page image resources according to claim 1, characterized in that: The method comprises: When asynchronously loading the original resource of the image, the reloadImg method is used to provide a smooth loading transition.

7. The method for progressively loading page image resources according to claim 1, characterized in that: The setting of the timer event, when the page is loaded, searching for the image resource in advance through the timer event, includes: When the page is loaded, the timer event is triggered. When the timer event is triggered, the preset function of the timer event is executed to search for the image resources in the page in advance, including traversing the DOM tree and searching. Tag, and collect URL information.

8. A device for progressively loading page image resources, characterized in that: The device comprises: A timer module is configured to set a timer event, and when the page is loaded, the image resource is searched in advance through the timer event; A monitoring and replacement module is configured to monitor the page, and when the page changes, search for image resources that need to be asynchronously loaded; when the image resources that need to be asynchronously loaded are found, replace the image resources that need to be asynchronously loaded with thumbnails, and prepare for asynchronous loading; The asynchronous loading module is configured to monitor the intersection of the image resource and the visible area of ​​the page. When the image resource intersects with the visible area, the maximum concurrency of the asynchronous loading is set, and the original resource of the image is asynchronously loaded.

9. A page image resource progressive loading system, the system comprising a processor and a memory, the memory storing a computer program, characterized in that: The computer program is loaded and executed by the processor to implement the method for progressively loading page image resources as described in any one of claims 1 to 7.

10. A computer-readable storage medium, wherein a computer program is stored in the storage medium, characterized in that: When the computer program is executed by a processor, it is used to implement the page image resource progressive loading method as described in any one of claims 1 to 7.

Images