A picture loading method, device, apparatus and storage medium

Abstract

The application discloses a picture loading method and device, equipment and a storage medium, and relates to the technical field of image processing. The method comprises the following steps: a main thread queries corresponding picture cache information in a temporary cache and a browser database by using a picture storage identifier of a to-be-loaded picture obtained; if the corresponding picture cache information is not found, the main thread transmits the picture storage identifier to a sub-thread, the sub-thread obtains picture data of the to-be-loaded picture based on the picture storage identifier and a preset acquisition mode, the sub-thread converts the picture data into preset format picture data in a preset format, and returns the preset format picture data to the main thread; and the main thread stores the preset format picture data in the temporary cache and the browser database, and performs a corresponding picture loading operation based on the format of the preset format picture data. The application converts the obtained picture data into a preset format in the sub-thread, reduces the blocking of the main thread and the page lag caused by picture loading, and accelerates the picture rendering efficiency.

Description

Technical Field

[0001] This invention relates to the field of image processing technology, and in particular to an image loading method, apparatus, device, and storage medium. Background Technology

[0002] In web pages with many static resources such as images, browsers have a limit on the number of concurrent downloads, dividing all currently initiated requests into multiple batches. This affects the speed of data requests on the page, thus impacting the page's response time. Existing technologies address this by using cacheable thread pools to asynchronously load image resources and constructing a map (a key-value pair that records the original insertion order of keys) to store bitmap objects of the loaded image resources. Alternatively, they can query the cache based on the URL (Uniform Resource Locator), and if the image is not found, create a request to retrieve it and store it in the cache. After the image request is complete, it needs to be parsed and displayed on the web page. This parsing process is entirely performed on the UI (User Interface) thread. When a page contains many image resources, including a large number of high-resolution images, and due to the high image resolution, some image requests may take too long to load. Excessive parsing time can affect the loading of other page content, block the main thread, cause page lag and inoperability, and negatively impact the user's normal interactive experience. Summary of the Invention

[0003] In view of this, the purpose of this invention is to provide an image loading method, apparatus, device, and storage medium that can reduce the blocking of the main thread and page lag caused by image loading, and accelerate image rendering efficiency. The specific solution is as follows:

[0004] Firstly, this application discloses an image loading method, including:

[0005] The main thread obtains the image storage identifier of the image to be loaded, and queries the corresponding image cache information in the temporary cache and browser database based on the image storage identifier.

[0006] If no corresponding image cache information is found, the image storage identifier is transmitted to the sub-thread through the main thread, and the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and the preset acquisition method.

[0007] The sub-thread converts the image data into a preset format image data and returns the preset format image data to the main thread.

[0008] The main thread stores the preset format image data in the temporary cache and the browser database, and then performs the corresponding image loading operation based on the format of the preset format image data.

[0009] Optionally, the step of querying the corresponding image cache information in the temporary cache and the browser database based on the image storage identifier includes:

[0010] Based on the image storage identifier, determine whether the temporary cache contains image cache information corresponding to the image to be loaded;

[0011] If the image cache information exists, then the image cache information in the temporary cache is directly retrieved;

[0012] If the image cache information does not exist, then query the browser database to see if there is a target database corresponding to the type of image to be loaded;

[0013] If the target database does not exist, then create a target database corresponding to the type of image to be loaded;

[0014] If the target database exists, then based on the image storage identifier, it is determined whether the image cache information corresponding to the image to be loaded exists in the target database.

[0015] Optionally, if no corresponding image cache information is found, the main thread transmits the image storage identifier to the sub-thread, and the sub-thread retrieves the image data of the image to be loaded based on the image storage identifier and a preset retrieval method, including:

[0016] If the target database does not contain image cache information corresponding to the image to be loaded, then determine whether the current running environment supports the sub-thread;

[0017] If the current operating environment supports the sub-thread, the main thread transmits the image storage identifier to the sub-thread, and the sub-thread retrieves the image data of the image to be loaded based on the image storage identifier and a preset retrieval method.

[0018] Optionally, before transmitting the image storage identifier to the child thread via the main thread, the method further includes:

[0019] If the current operating environment does not support the sub-thread, the image data is obtained directly by the main thread based on the image storage identifier and the preset acquisition method.

[0020] Optionally, the step of converting the image data into preset format image data through the sub-thread and returning the preset format image data to the main thread includes:

[0021] The sub-thread converts the image data into binary image data.

[0022] Determine if the current runtime environment supports creating bitmap images;

[0023] If the method for creating an image bitmap is supported, the binary image data is converted into image bitmap data, and the image bitmap data is returned to the main thread;

[0024] If the method for creating a bitmap image is not supported, the binary image data is returned to the main thread.

[0025] Optionally, storing the preset format image data in the temporary cache and the browser database via the main thread includes:

[0026] The main thread stores the binary image data or the image bitmap data in the temporary cache and the target database.

[0027] Optionally, after transmitting the image storage identifier to the child thread via the main thread, the method further includes:

[0028] If the image bitmap data is returned to the main thread, the image bitmap data is directly loaded to obtain the loaded image;

[0029] If the binary image data is returned to the main thread, the binary image data is loaded using a preset loading method to obtain the loaded image.

[0030] Secondly, this application discloses an image loading device, comprising:

[0031] The identifier acquisition module is used to obtain the image storage identifier of the image to be loaded through the main thread;

[0032] The cache information query module is used to query the corresponding image cache information in the temporary cache and the browser database based on the image storage identifier;

[0033] The data acquisition module is used to transmit the image storage identifier to the sub-thread through the main thread if no corresponding image cache information is found, and to acquire the image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method.

[0034] The format conversion module is used to convert the image data into preset format image data through the sub-thread, and return the preset format image data to the main thread;

[0035] The data storage module is used to store the preset format image data in the temporary cache and the browser database through the main thread;

[0036] The image loading module is used to perform corresponding image loading operations based on the format of the preset format image data.

[0037] Thirdly, this application discloses an electronic device, including:

[0038] Memory, used to store computer programs;

[0039] A processor is configured to execute the computer program to implement the steps of the image loading method disclosed above.

[0040] Fourthly, this application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the image loading method disclosed above.

[0041] As can be seen, this application provides an image loading method, including: obtaining an image storage identifier of the image to be loaded through the main thread, and querying corresponding image cache information in a temporary cache and a browser database based on the image storage identifier; if no corresponding image cache information is found, transmitting the image storage identifier to a sub-thread through the main thread, and obtaining image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method; converting the image data into preset format image data through the sub-thread, and returning the preset format image data to the main thread; storing the preset format image data in the temporary cache and the browser database through the main thread, and then performing a corresponding image loading operation based on the format of the preset format image data. Therefore, when no corresponding image cache information is found in the temporary cache or the browser database, this application transmits the image storage identifier to a sub-thread so that the obtained image data can be converted into preset format image data in the sub-thread. Then, the preset format image data is returned to the main thread and the corresponding loading operation is performed in the main thread. By placing the image parsing process in the sub-thread, the blocking of the main thread and page lag caused by image loading are reduced, the image rendering efficiency is accelerated, and the user experience is improved. Attached Figure Description

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

[0043] Figure 1 This is a flowchart of an image loading method disclosed in this application;

[0044] Figure 2 This is a flowchart of a specific image loading method disclosed in this application;

[0045] Figure 3 This is a schematic diagram of the cache features disclosed in this application;

[0046] Figure 4 This is a flowchart of a specific image loading method disclosed in this application;

[0047] Figure 5 This is a schematic diagram illustrating the database judgment method disclosed in this application;

[0048] Figure 6 This is a schematic diagram of the cache determination disclosed in this application;

[0049] Figure 7 This is a flowchart of a specific image loading method disclosed in this application;

[0050] Figure 8 A schematic diagram of the image loading device provided in this application;

[0051] Figure 9 This application provides a structural diagram of an electronic device. Detailed Implementation

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

[0053] Currently, images need to be parsed and displayed on a webpage after being requested. This parsing process is performed entirely on the UI thread. When a page has many image resources, including a large number of high-resolution images, and due to the high image resolution, some image requests take too long to load. Excessive parsing time can affect the loading of other page content, block the main thread, cause page lag and inoperability, and negatively impact the user's normal interactive experience. To address this, this application provides an image loading method that reduces the blocking of the main thread and page lag during image loading, and accelerates image rendering efficiency.

[0054] This invention discloses an image loading method, see [link to relevant documentation]. Figure 1 As shown, the method includes:

[0055] Step S11: Obtain the image storage identifier of the image to be loaded through the main thread, and query the corresponding image cache information in the temporary cache and browser database based on the image storage identifier.

[0056] In this embodiment, the image storage identifier of the image to be loaded is obtained through the main thread, and the corresponding image cache information is queried in the temporary cache and the browser database based on the image storage identifier.

[0057] Understandably, after the main thread obtains the image storage identifier of the image to be loaded, it checks if a temporary cache exists on the page. If a temporary cache exists, it queries the temporary cache and the browser database for the corresponding image cache information based on the image storage identifier. Figure 2As shown, the process first checks if the corresponding image cache information exists in the temporary cache. If it does, the image cache information is directly retrieved from the temporary cache, and the corresponding image loading operation is performed based on the determined image type. If the temporary cache does not contain the corresponding image cache information, the process checks if the corresponding image cache information exists in the browser database. If it does, the image cache information is directly retrieved from the browser database and stored in the temporary cache. Then, the corresponding image loading operation is performed based on the determined image type. It can be understood that the temporary cache is used to temporarily store the image data that has already been loaded on the current page. The storage address is under Windows but not limited to Windows; it can also be in local storage, session storage, or the context of the current page. The storage format is a Map key-value pair, but not limited to Map; it can also be a normal object, a Set (a collection, a high-level container), or other formats. It should be noted that the image storage identifier, such as the image address, can be obtained through a preset algorithm. Image storage identifiers can also be information that has a certain conversion relationship with image addresses (it can be a value or a string).

[0058] Step S12: If no corresponding image cache information is found, the image storage identifier is transmitted to the sub-thread through the main thread, and the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and the preset acquisition method.

[0059] In this embodiment, if no corresponding image cache information is found in the temporary cache or the browser database, it indicates that the image to be cached is being loaded for the first time. At this time, the main thread transmits the image storage identifier to the sub-thread, and the sub-thread obtains the image data of the image to be loaded based on the image storage identifier and a preset acquisition method.

[0060] The following are the main solutions in the existing technology:

[0061] 1) Preload all images in batches based on the page display area. Specifically, divide the current page into areas, and then load images in batches according to the display priority of each area, limiting the number of concurrent tasks at the same time and alleviating the usage of page computing resources at the same time. This solution has the following drawbacks: the optimization only targets the number of page requests, and has no effect on image caching or the blocking of the main thread caused by image parsing.

[0062] 2) Use a sprite sheet or combine multiple images into a single large image, then record the offset position of each image. Specifically, combining multiple images into one large image allows multiple concurrent tasks to be merged into a single task, reducing the number of page requests. This approach has the following drawbacks: While loading the combined large image reduces the number of page requests, larger images take longer to load. Before the large image loads, there is no feedback on the content of the smaller images within it, and there is no specific optimization for main thread blocking. This approach is more suitable for loading and displaying icons (a type of icon format).

[0063] 3) This solution uses a GPU (Graphics Processing Unit) cache to store a large image composed of all images, and records the corresponding image offset data. Specifically, multiple requested image resources are integrated and drawn into a single large image, which is then stored in the GPU. This improves the speed of image reuse, and the cached texture storage also has an advantage in terms of memory compared to some other caching solutions. However, this solution has the following drawbacks: it places certain requirements on the user's device, and it is only effective when the current browser application tab is not closed. If the browser is closed, this cache will be reclaimed along with the page application. Furthermore, it does not offer specific optimizations for the performance issues of the initial image loading.

[0064] 4) Use a queue to prioritize image resources on the page according to custom rules, displaying images in order of importance. This solution has the following drawbacks: While it improves real-time page response speed and enhances user experience to some extent, it lacks specific performance optimizations.

[0065] 5) Divide large images into chunks according to certain standards and load them in blocks. Specifically, this solution is mainly for large, high-resolution images, which consume a lot of time to load and parse, resulting in slow real-time page response. This solution has the following drawbacks: While chunked loading can effectively break down the loading time of a single large image into multiple parallel smaller loading tasks, thus improving the loading experience of large images and providing a certain degree of user experience, the resulting increase in requests may partially block the main thread's data rendering process.

[0066] Understandably, to address the problems of existing technologies, optimizations can be made through resource caching, multi-threaded loading and parsing, and data stream storage. Based on caching, a stable and comprehensive local caching solution is needed, such as... Figure 3 As shown, the cache needs to possess the following characteristics: high efficiency, lightweight, persistent, and controllable. High efficiency means that the more efficient the storage and retrieval speed, the faster the image loading response, resulting in lower user waiting time and a better user experience. Lightweight means that the caching solution needs to be lightweight; otherwise, even if loading speed is improved, it will add extra overhead to the page in other ways. Persistence means that the cache needs to exist for a relatively long time to ensure improved image loading performance over a considerable period. Poor persistence negates the purpose of the caching solution. Controllable means that the cache needs to be controllable, allowing for convenient updates based on actual conditions to maintain its timeliness. Based on multithreading, a robust, compatible, and lightweight multithreading solution is needed, such as Web Workers (JavaScript creates a multithreaded environment). In essence, Web Workers allow the main thread to create worker threads, assign tasks to them, and run them in the background while the main thread runs, without interference. The worker threads then return the results to the main thread after completing their tasks. Understandably, the UI thread is a special thread for users to update the UI interface, also known as the main thread. Newly created threads are child threads, while the main thread is actively created by the operating system and already exists when the program starts.

[0067] It should be noted that multi-threaded solutions are not limited to web workers, but are also applicable to other multi-threaded asynchronous technologies.

[0068] Step S13: The sub-thread converts the image data into preset format image data and returns the preset format image data to the main thread.

[0069] In this embodiment, after the sub-thread obtains the image data of the image to be loaded based on the image storage identifier and a preset acquisition method, the sub-thread converts the image data into preset format image data, and then returns the preset format image data to the main thread. It can be understood that the preset format is selected based on the actual situation and the image format currently supported by the sub-thread.

[0070] Step S14: The preset format image data is stored in the temporary cache and the browser database through the main thread, and then the corresponding image loading operation is performed based on the format of the preset format image data.

[0071] In this embodiment, after receiving the preset format image data, the main thread stores the preset format image data in the temporary cache and the browser database, and then performs the corresponding image loading operation based on the format of the preset format image data. It can be understood that storing the preset format image data in the temporary cache and the browser database reduces the number of requests when the image is used again, allowing the corresponding image to be retrieved directly from the temporary cache and the browser database, thus providing a solution for image loading, parsing, and caching for multi-image pages.

[0072] Understandably, the entire solution considers both the blocking of image requests on the UI main thread and the transmission efficiency between the main thread and child threads. The performance overhead of image parsing is shifted to a child thread, avoiding blocking of the UI main thread by image loading. This saves resources per image, significantly improving page image loading speed. Simultaneously, it fully utilizes the browser's built-in database, performing a semi-persistent offline cache of image data, optimizing webpage image performance. In environments supporting Web Workers, a multi-threaded approach is used for image loading and parsing, shifting image loading and parsing from the main thread to other threads. This alleviates the computational pressure on the main thread, reduces its resource consumption, and resolves the blocking of the main thread during image loading and parsing, thus mitigating potential lag issues. Furthermore, this invention incorporates the emerging features of IndexedDB local storage in the web, caching loaded images and, depending on environment compatibility, caching either Blobs or ImageBitmaps. Binary data improves loading speed, and because it stores images in Blob or ImageBitmap data format, the computing resources consumed by images on the page are greatly reduced, thus reducing the overall loading requests for duplicate images and speeding up the loading of duplicate images.

[0073] As can be seen, this application provides an image loading method, including: obtaining an image storage identifier of the image to be loaded through the main thread, and querying corresponding image cache information in a temporary cache and a browser database based on the image storage identifier; if no corresponding image cache information is found, transmitting the image storage identifier to a sub-thread through the main thread, and obtaining image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method; converting the image data into preset format image data through the sub-thread, and returning the preset format image data to the main thread; storing the preset format image data in the temporary cache and the browser database through the main thread, and then performing a corresponding image loading operation based on the format of the preset format image data. Therefore, when no corresponding image cache information is found in the temporary cache or the browser database, this application transmits the image storage identifier to a sub-thread so that the obtained image data can be converted into preset format image data in the sub-thread. Then, the preset format image data is returned to the main thread and the corresponding loading operation is performed in the main thread. By placing the image parsing process in the sub-thread, the blocking of the main thread and page lag caused by image loading are reduced, the image rendering efficiency is accelerated, and the user experience is improved.

[0074] See Figure 4 As shown, this embodiment of the invention discloses an image loading method. Compared with the previous embodiment, this embodiment further explains and optimizes the technical solution.

[0075] Step S21: Obtain the image storage identifier of the image to be loaded through the main thread, and query the corresponding image cache information in the temporary cache and browser database based on the image storage identifier.

[0076] In this embodiment, the main thread obtains the image storage identifier of the image to be loaded, and queries the temporary cache and browser database for corresponding image cache information based on the image storage identifier. It can be understood that, based on the image storage identifier, it determines whether the temporary cache contains image cache information corresponding to the image to be loaded. If the image cache information exists, it is directly retrieved from the temporary cache; if the image cache information does not exist, the browser database is queried to determine whether a target database corresponding to the type of the image to be loaded exists. Figure 5As shown, if the target database does not exist, a target database corresponding to the type of the image to be loaded is created; if the target database exists, the existence of image cache information corresponding to the image to be loaded in the target database is determined based on the image storage identifier. It is understood that the browser database contains different types of databases, such as document databases, image databases, and other types of databases. Therefore, the browser database is queried to see if an image database exists. If an image database exists, it is accessed, and the existence of image cache information corresponding to the image to be loaded is determined based on the image storage identifier; if an image database does not exist, the image database is initialized, i.e., an image database is created, and then the newly created image database is queried to see if the image cache information corresponding to the image to be loaded exists.

[0077] Specifically, based on the image storage identifier, the corresponding image cache information is queried in the browser's IndexedDB database. IndexedDB is a built-in database provided by the browser, and a connection can be established with IndexedDB in the program to query the key information stored in the database. It should be noted that the database is not limited to IndexedDB and can also be used with other databases.

[0078] Step S22: If no corresponding image cache information is found, determine whether the current running environment supports the sub-thread.

[0079] In this embodiment, the main thread queries the temporary cache and browser database for corresponding image cache information based on the image storage identifier. If no corresponding image cache information is found in either cache, it is determined whether the current runtime environment supports the sub-thread. Figure 6 As shown, if the corresponding image cache information exists in IndexedDB, the image cache information is directly obtained and the next operation is performed. If the image cache information does not exist, it is necessary to determine whether the current operating environment supports Web Workers.

[0080] Step S23: If the current running environment supports the sub-thread, the main thread transmits the image storage identifier to the sub-thread, and the sub-thread obtains the image data of the image to be loaded based on the image storage identifier and a preset acquisition method.

[0081] In this embodiment, it is determined whether the current runtime environment supports the sub-thread. If the current runtime environment supports the sub-thread, the image storage identifier is transmitted to the sub-thread through the main thread, and the sub-thread obtains the image data of the image to be loaded based on the image storage identifier and a preset acquisition method. If the current runtime environment does not support the sub-thread, the image data is obtained directly through the main thread based on the image storage identifier and the preset acquisition method.

[0082] Specifically, if the current runtime environment supports the sub-thread, the image storage identifier is sent to the WebWorkers program, and the XMLHttpRequest is used in the WebWorkers to request the image data of the image to be loaded. If WebWorkers are not supported, the XMLHttpRequest is used directly in the main thread to request the image data of the image to be loaded. It is understood that the XMLHttpRequest object provides full access to the HTTP (Hypertext Transfer Protocol) protocol, including the ability to make POST (a type of request), HEAD (a type of request), and regular GET (a type of request). XMLHttpRequest can return responses from the web server synchronously or asynchronously, and can return content in the form of text or a DOM (Document Object Model) document.

[0083] It should be noted that the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and the preset acquisition method. The preset acquisition method is not limited to using XMLHttpRequest to request the image data of the image to be loaded, but is also applicable to other technical means that can be used to request images, such as fetch.

[0084] Step S24: The sub-thread converts the image data into preset format image data and returns the preset format image data to the main thread.

[0085] Step S25: The preset format image data is stored in the temporary cache and the browser database through the main thread, and then the corresponding image loading operation is performed based on the format of the preset format image data.

[0086] For details regarding steps S24 and S25, please refer to the corresponding content disclosed in the foregoing embodiments, which will not be repeated here.

[0087] As can be seen, in this embodiment, the main thread obtains the image storage identifier of the image to be loaded, and queries the corresponding image cache information in the temporary cache and browser database based on the image storage identifier. If no corresponding image cache information is found, it is determined whether the current running environment supports the sub-thread. If the current running environment supports the sub-thread, the main thread transmits the image storage identifier to the sub-thread, and the sub-thread obtains the image data of the image to be loaded based on the image storage identifier and a preset acquisition method. The sub-thread converts the image data into preset format image data and returns the preset format image data to the main thread. The main thread stores the preset format image data in the temporary cache and the browser database, and then performs the corresponding image loading operation based on the format of the preset format image data. This reduces the blocking of the main thread and page lag caused by image loading, speeds up image rendering efficiency, and improves user experience.

[0088] See Figure 7 As shown, this embodiment of the invention discloses an image loading method. Compared with the previous embodiment, this embodiment further explains and optimizes the technical solution.

[0089] Step S31: Obtain the image storage identifier of the image to be loaded through the main thread, and query the corresponding image cache information in the temporary cache and browser database based on the image storage identifier.

[0090] Step S32: If no corresponding image cache information is found, the image storage identifier is transmitted to the sub-thread through the main thread.

[0091] Step S33: Convert the image data into binary image data through the sub-thread.

[0092] In this embodiment, the image data is converted into binary image data by the sub-thread, for example, into a Blob (binary large object, a container for storing binary files) data format. It is understood that the communication content between the main thread and the sub-thread can be text, objects, or binary data; for example, File, Blob, ArrayBuffer (typed array), etc. Converting the image data to Blob data format can improve the efficiency of data transmission between the main thread and the sub-thread, and by placing some image data parsing operations in the sub-thread, the computational overhead of the main thread can be reduced.

[0093] Step S34: Determine whether the current runtime environment supports the method of creating image bitmaps.

[0094] In this embodiment, after converting the image data into binary image data, it is determined whether the current runtime environment supports the method for creating an image bitmap. If the current runtime environment does not support the method for creating an image bitmap, the binary image data (image data in Blob data format) is directly returned to the main thread.

[0095] Specifically, it checks whether the current runtime environment supports the createImageBitmap method. Normally, this method exists in the window and child threads, and can convert images in Blob data format into ImageBitmap format. Images in this format can be used directly and are easy to store without further parsing.

[0096] Step S35: If the method for creating an image bitmap is supported, the binary image data is converted into image bitmap data, and the image bitmap data is returned to the main thread.

[0097] In this embodiment, if the method for creating an image bitmap is supported, the binary image data is converted into image bitmap data, and the image bitmap data is returned to the main thread. That is, the Blob format image is converted into an ImageBitmap object, and then the ImageBitmap object is returned to the main thread.

[0098] Step S36: The main thread stores the binary image data or the image bitmap data in the temporary cache and the target database.

[0099] In this embodiment, the main thread stores the received binary image data or bitmap image data into the target database table of the connected IndexedDB database, and then stores the binary image data or bitmap image data into the temporary cache. It should be noted that during the storage process, the binary image data or bitmap image data is stored using the image storage identifier (e.g., the load address) as the key value. This is because the image storage identifier is unique, thus preventing duplicate loading of images with the same storage identifier, reducing the number of secondary image requests and page requests.

[0100] Understandably, a combination of browser database caching (such as IndexedDB local caching) and temporary caching is used to cache loaded images. The temporary cache is used to cache images used on the current page. When the page is used again, the image data stored in the temporary cache can be used directly, saving the time cost of connecting to the database for querying. In addition, the database caches images for a certain period of time. This period of time is customizable, and the length of the timeline is set according to the actual situation, such as based on the user manually clearing the browser cache, or the program automatically clearing the cache according to the set validity period of the database, thereby controlling the validity period of the cache.

[0101] Step S37: Perform the corresponding image loading operation based on the format of the preset format image data.

[0102] In this embodiment, after storing the binary image data or the image bitmap data in the temporary cache and the target database, a corresponding image loading operation is performed based on the format of the preset format image data. It can be understood that if the main thread receives the image bitmap data, it directly loads the image bitmap data to obtain the loaded image; if the main thread receives the binary image data, it loads the binary image data using a preset loading method to obtain the loaded image. For example, a Blob image is loaded using the `window.URL.createObjectURL` method, and the image data obtained from the database table is called and displayed accordingly based on the current runtime environment, completing the entire image loading, parsing, and caching process.

[0103] For details regarding steps S31 and S32, please refer to the corresponding content disclosed in the foregoing embodiments, which will not be repeated here.

[0104] As can be seen, in this embodiment, the main thread obtains the image storage identifier of the image to be loaded, and queries the corresponding image cache information in the temporary cache and browser database based on the image storage identifier. If no corresponding image cache information is found, the main thread transmits the image storage identifier to the sub-thread. The sub-thread converts the image data into binary image data. It determines whether the current running environment supports the image bitmap creation method. If the image bitmap creation method is supported, the binary image data is converted into image bitmap data and returned to the main thread. The main thread stores the binary image data or the image bitmap data in the temporary cache and the target database. Based on the preset format image data, the corresponding image loading operation is performed, reducing the blocking of the main thread and page lag caused by image loading, speeding up image rendering efficiency, and improving user experience. Storing the data in ImageBitmap or Blob format reduces the computing resources consumed when reusing the image.

[0105] See Figure 8 As shown in the figure, this application also discloses an image loading device, including:

[0106] The identifier acquisition module 11 is used to obtain the image storage identifier of the image to be loaded through the main thread;

[0107] The cache information query module 12 is used to query the corresponding image cache information in the temporary cache and the browser database based on the image storage identifier;

[0108] The data acquisition module 13 is used to transmit the image storage identifier to the sub-thread through the main thread if no corresponding image cache information is found, and to acquire the image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method.

[0109] Format conversion module 14 is used to convert the image data into preset format image data through the sub-thread, and return the preset format image data to the main thread;

[0110] Data storage module 15 is used to store the preset format image data in the temporary cache and the browser database through the main thread;

[0111] Image loading module 16 is used to perform corresponding image loading operations based on the format of the preset format image data.

[0112] As can be seen, this application includes: obtaining the image storage identifier of the image to be loaded through the main thread, and querying the corresponding image cache information in the temporary cache and the browser database based on the image storage identifier; if the corresponding image cache information is not found, the image storage identifier is transmitted to the sub-thread through the main thread, and the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and a preset acquisition method; the image data is converted into preset format image data by the sub-thread, and the preset format image data is returned to the main thread; the preset format image data is stored in the temporary cache and the browser database by the main thread, and then the corresponding image loading operation is performed based on the format of the preset format image data. Therefore, when no corresponding image cache information is found in the temporary cache or the browser database, this application transmits the image storage identifier to a sub-thread so that the obtained image data can be converted into preset format image data in the sub-thread. Then, the preset format image data is returned to the main thread and the corresponding loading operation is performed in the main thread. By placing the image parsing process in the sub-thread, the blocking of the main thread and page lag caused by image loading are reduced, the image rendering efficiency is accelerated, and the user experience is improved.

[0113] In some specific embodiments, the identifier acquisition module 11 specifically includes:

[0114] The identifier acquisition unit is used to obtain the image storage identifier of the image to be loaded through the main thread.

[0115] In some specific embodiments, the cache information query module 12 specifically includes:

[0116] A temporary cache information determination unit is used to determine, based on the image storage identifier, whether there is image cache information in the temporary cache corresponding to the image to be loaded;

[0117] A temporary cache information retrieval unit is used to directly retrieve the image cache information from the temporary cache if the image cache information exists.

[0118] The target database determination unit is used to query the browser database to see if there is a target database corresponding to the type of the image to be loaded if the image cache information does not exist.

[0119] The target database creation unit is used to create a target database corresponding to the type of image to be loaded if the target database does not exist.

[0120] The target database information determination unit is used to determine, based on the image storage identifier, whether the image cache information corresponding to the image to be loaded exists in the target database if the target database exists.

[0121] In some specific embodiments, the data acquisition module 13 specifically includes:

[0122] The sub-thread determination unit is used to determine whether the current running environment supports the sub-thread if the target database does not contain image cache information corresponding to the image to be loaded.

[0123] A storage identifier transmission unit is used to transmit the image storage identifier to the sub-thread through the main thread if the current operating environment supports the sub-thread.

[0124] The first image data acquisition unit is used to acquire the image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method;

[0125] The second image data acquisition unit is used to acquire the image data directly through the main thread based on the image storage identifier and the preset acquisition method if the current operating environment does not support the sub-thread.

[0126] In some specific embodiments, the format conversion module 14 specifically includes:

[0127] A binary image data conversion unit is used to convert the image data into binary image data through the sub-thread;

[0128] The method determination unit is used to determine whether the current runtime environment supports the method of creating image bitmaps;

[0129] An image bitmap data conversion unit is used to convert the binary image data into image bitmap data if the image bitmap creation method is supported.

[0130] The image bitmap data return unit is used to return the image bitmap data to the main thread;

[0131] The binary image data return unit is used to return the binary image data to the main thread if the image bitmap creation method is not supported.

[0132] In some specific embodiments, the data storage module 15 specifically includes:

[0133] The data storage unit is used to store the binary image data or the image bitmap data into the temporary cache and the target database through the main thread.

[0134] In some specific embodiments, the image loading module 16 specifically includes:

[0135] The first image loading unit is used to directly load the image bitmap data to obtain the loaded image if the image bitmap data is returned to the main thread.

[0136] The second image loading unit is used to load the binary image data using a preset loading method if the binary image data is returned to the main thread, so as to obtain the loaded image.

[0137] Furthermore, embodiments of this application also provide an electronic device. Figure 9 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content of the diagram should not be construed as limiting the scope of this application.

[0138] Figure 9 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of this application. Specifically, the electronic device 20 may include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the image loading method disclosed in any of the foregoing embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0139] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0140] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0141] The operating system 221 is used to manage and control the various hardware devices on the electronic device 20 and the computer program 222, which may be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the image loading method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, the computer program 222 may further include computer programs capable of performing other specific tasks.

[0142] Furthermore, this application also discloses a storage medium storing a computer program, which, when loaded and executed by a processor, implements the image loading method steps disclosed in any of the foregoing embodiments.

[0143] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to the method section.

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

[0145] The above provides a detailed description of the image loading method, apparatus, device, and storage medium provided by the present invention. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. An image loading method, characterized in that, include: The main thread and a preset algorithm are used to obtain the image storage identifier of the image to be loaded, and the corresponding image cache information is queried in the temporary cache and the browser database based on the image storage identifier. The image storage identifier is an image address or information that has a conversion relationship with the image address; The temporary cache is used to temporarily store historical image data that has been loaded on the current page. The storage address is under Windows, local storage, session storage object, or the context of the current page. The storage format is in the form of Map key-value pairs, normal object form, or Set. The browser database includes multiple browser-built-in IndexedDB databases for offline storage of different types of information; and the method further includes: automatically clearing cached images in the browser database according to a custom time period; If no corresponding image cache information is found, the image storage identifier is transmitted to the sub-thread through the main thread, and the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and the preset acquisition method. Determine whether the current running environment supports the method of creating image bitmaps, and convert the image data into preset format image data through the sub-thread, and return the preset format image data to the main thread; The main thread stores the preset format image data in the temporary cache and the browser database, and then performs the corresponding image loading operation based on the format of the preset format image data. The step of querying the corresponding image cache information in the temporary cache and browser database based on the image storage identifier includes: Based on the image storage identifier, determine whether the temporary cache contains image cache information corresponding to the image to be loaded; If the image cache information exists, then the image cache information in the temporary cache is directly retrieved; If the image cache information does not exist, then query the browser database to see if there is a target database corresponding to the type of image to be loaded; If the target database does not exist, it indicates that the image to be cached is a newly loaded image, and a target database corresponding to the type of the image to be loaded is created. If the target database exists, then based on the image storage identifier, determine whether the image cache information corresponding to the image to be loaded exists in the target database; If no corresponding image cache information is found, the image storage identifier is transmitted from the main thread to the sub-thread, and the sub-thread retrieves the image data of the image to be loaded based on the image storage identifier and a preset retrieval method, including: If the target database does not contain image cache information corresponding to the image to be loaded, then determine whether the current running environment supports the sub-thread; If the current operating environment supports the sub-thread, the image storage identifier is transmitted to the sub-thread through the main thread and the multi-threaded asynchronous solution, and the image data of the image to be loaded is obtained by the sub-thread based on the image storage identifier and the preset acquisition method. If the current operating environment does not support the sub-thread, the image data is obtained directly by the main thread based on the image storage identifier and the preset acquisition method. The method for determining whether the current runtime environment supports creating image bitmaps, and converting the image data into preset format image data through the sub-thread, and returning the preset format image data to the main thread, includes: The sub-thread converts the image data into binary image data in Blob data format; Determine if the current runtime environment supports creating bitmap images; If the method for creating an image bitmap is supported, the binary image data is converted into image bitmap data in ImageBitmap data format, and the image bitmap data is returned to the main thread; If the method for creating a bitmap image is not supported, the binary image data will be returned to the main thread. The step of storing the preset format image data in the temporary cache and the browser database through the main thread includes: The main thread stores the binary image data or the image bitmap data in the temporary cache and the target database. The method further includes: If the image bitmap data is returned to the main thread, the image bitmap data is directly loaded to obtain the loaded image; If the binary image data is returned to the main thread, the binary image data is loaded using a preset loading method to obtain the loaded image.

2. An image loading device, characterized in that, include: The identifier acquisition module is used to obtain the image storage identifier of the image to be loaded through the main thread and a preset algorithm; The image storage identifier is an image address or information that has a conversion relationship with the image address; The cache information query module is used to query the corresponding image cache information in the temporary cache and the browser database based on the image storage identifier; The temporary cache is used to temporarily store historical image data that has been loaded on the current page. The storage address can be under Windows, local storage, session storage object, or the context of the current page. The storage format can be a Map key-value pair, a normal object, or a Set. The browser database includes multiple browser-built-in IndexedDB databases for offline storage of different types of information. Furthermore, the device is also used to automatically clean up cached images in the browser database according to a custom time period. The data acquisition module is used to transmit the image storage identifier to the sub-thread through the main thread if no corresponding image cache information is found, and to acquire the image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method. The format conversion module is used to determine whether the current running environment supports the method of creating image bitmaps, and converts the image data into preset format image data through the sub-thread, and returns the preset format image data to the main thread; The data storage module is used to store the preset format image data in the temporary cache and the browser database through the main thread; The image loading module is used to perform corresponding image loading operations based on the format of the preset format image data. The cache information query module includes: A temporary cache information determination unit is used to determine, based on the image storage identifier, whether there is image cache information in the temporary cache corresponding to the image to be loaded; A temporary cache information retrieval unit is used to directly retrieve the image cache information from the temporary cache if the image cache information exists. The target database determination unit is used to query the browser database to see if there is a target database corresponding to the type of the image to be loaded if the image cache information does not exist. The target database creation unit is used to create a target database corresponding to the type of the image to be loaded if the target database does not exist, indicating that the image to be cached is a first-time loaded image. The target database information determination unit is used to determine, based on the image storage identifier, whether the image cache information corresponding to the image to be loaded exists in the target database if the target database exists. The data acquisition module includes: The sub-thread determination unit is used to determine whether the current running environment supports the sub-thread if the target database does not contain image cache information corresponding to the image to be loaded. The storage identifier transmission unit is used to transmit the image storage identifier to the sub-thread through the main thread and the multi-threaded asynchronous solution if the current operating environment supports the sub-thread. The first image data acquisition unit is used to acquire the image data of the image to be loaded through the sub-thread based on the image storage identifier and a preset acquisition method; If the current operating environment does not support the sub-thread, the second image data acquisition unit directly acquires the image data based on the image storage identifier and the preset acquisition method through the main thread. The format conversion module includes: A binary image data conversion unit is used to convert the image data into binary image data in Blob data format through the sub-thread; The method determination unit is used to determine whether the current runtime environment supports the method of creating image bitmaps; An image bitmap data conversion unit is used to convert the binary image data into image bitmap data in ImageBitmap data format if the image bitmap creation method is supported. The image bitmap data return unit is used to return the image bitmap data to the main thread; A binary image data return unit is used to return the binary image data to the main thread if the image bitmap creation method is not supported. The data storage module includes: A data storage unit is used to store the binary image data or the image bitmap data into the temporary cache and the target database via the main thread; The image loading module includes: The first image loading unit is used to directly load the image bitmap data to obtain the loaded image if the image bitmap data is returned to the main thread. The second image loading unit is used to load the binary image data using a preset loading method if the binary image data is returned to the main thread, so as to obtain the loaded image.

3. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the steps of the image loading method as described in claim 1.

4. A computer-readable storage medium, characterized in that, Used to store computer programs; wherein, when the computer programs are executed by a processor, they implement the image loading method as described in claim 1.

Images