A picture loading method and device, an electronic terminal and a storage medium

By setting image identifiers in the storage space and using them to query target images, the problems of image caching timeliness and repeated loading are solved, enabling fast display of high-resolution images and improving user experience.

CN114117102BActive Publication Date: 2026-01-30GUAHAO (HANGZHOU) TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202111407025.X
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-11-24
Publication Date
2026-01-30
Estimated Expiration
2041-11-24

AI Technical Summary

Technical Problem

In existing technologies, image URLs are time-sensitive, which means that cached images need to be reloaded. The same image needs to be loaded according to different URLs in different loading scenarios, and high-resolution images take a long time to load, which affects the user experience.

Method used

By adding image identifiers, target images corresponding to the image identifiers are stored in a preset storage space. The target images are retrieved based on the image identifiers, eliminating the timeliness of cached images. The same set of image identifiers is used for loading in different loading scenarios. When loading high-resolution images, a preset low-resolution image is downloaded and displayed.

Benefits of technology

This avoids repeated loading due to the time-sensitivity of cached images, improves user experience, reduces user waiting time, and enables fast display when loading high-resolution images.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114117102B_ABST
    Figure CN114117102B_ABST
Patent Text Reader

Abstract

This invention discloses an image loading method, apparatus, electronic terminal, and storage medium. The method includes: responding to a loading event of a target image, determining an image identifier at at least one resolution based on its Uniform Resource Locator (URL); determining a target identifier corresponding to the loading event from the image identifiers, and sequentially determining a current query identifier in descending order of the corresponding resolution, starting from the target identifier; repeatedly querying the target image from a preset storage space based on the current query identifier until the query is successful, or the current query identifier corresponds to the lowest resolution and the query fails; if the query is successful, loading the queried target image; if the current query identifier corresponds to the lowest resolution and the query fails, downloading and loading a target image at a preset resolution (where the preset resolution is lower than the lowest resolution). This method can eliminate the time-sensitivity of cached images, avoid repeated waiting for image loading in different scenarios, and reduce user waiting time.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The embodiments of the present invention relate to computer technology, and in particular to an image loading method, apparatus, electronic terminal and storage medium. Background Technology

[0002] In existing technologies, when software applications display images, they often use image loading frameworks to load and display the images based on the image's Uniform Resource Locator (URL).

[0003] The shortcomings of existing technologies include at least the following: First, the URLs of images are time-sensitive, and the cached images corresponding to the URLs need to be reloaded after the expiration period; Second, the same image needs to be loaded according to different URLs in different loading scenarios, resulting in repeated waiting for image loading in each scenario; Third, when the image resolution is high, the loading time is long, resulting in longer waiting time for users and affecting the user experience. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide an image loading method, apparatus, electronic terminal, and storage medium, which can eliminate the time-sensitivity of cached images, avoid repeated waiting for image loading in different scenarios, reduce user waiting time, and thus improve user experience.

[0005] In a first aspect, embodiments of the present invention provide an image loading method, including:

[0006] In response to a loading event of a target image, the image identifier of the target image at at least one resolution is determined based on the Uniform Resource Locator (URL) of the target image.

[0007] Determine the target identifier corresponding to the loading event from the image identifiers, and starting from the target identifier, determine the current query identifier from the image identifiers in descending order of their corresponding resolutions;

[0008] The system continuously queries the target image from the preset storage space based on the current query identifier until the query is successful, or until the current query identifier corresponds to the lowest resolution among the at least one resolutions and the query fails.

[0009] If the query is successful, the target image obtained from the query is loaded; if the current query identifier corresponds to the minimum resolution and the query fails, the target image at a preset resolution is downloaded and loaded; wherein the preset resolution is less than the minimum resolution.

[0010] Secondly, embodiments of the present invention also provide an image loading device, comprising:

[0011] The image identifier determination module is used to determine the image identifier of the target image at at least one resolution in response to the loading event of the target image, based on the Uniform Resource Locator (URL) of the target image.

[0012] The query identifier determination module is used to determine the target identifier corresponding to the loading event from the image identifiers, and to determine the current query identifier from the image identifiers in descending order of the corresponding resolution, starting from the target identifier.

[0013] The query module is used to repeatedly query the target image from the preset storage space according to the current query identifier until the query is successful, or until the current query identifier corresponds to the lowest resolution among the at least one resolutions and the query fails.

[0014] The loading module is used to load the target image obtained from the query if the query is successful; if the current query identifier corresponds to the minimum resolution and the query fails, the module downloads and loads the target image at a preset resolution, wherein the preset resolution is less than the minimum resolution.

[0015] Thirdly, embodiments of the present invention also provide an electronic terminal, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the image loading method provided in any embodiment of the present application.

[0016] Fourthly, embodiments of the present invention also provide a computer-readable storage medium having a computer program stored thereon, characterized in that, when the program is executed by a processor, it implements the image loading method provided in any embodiment of the present application.

[0017] This invention provides an image loading method, apparatus, electronic terminal, and storage medium. The image loading method includes: responding to a loading event of a target image, determining an image identifier of the target image at at least one resolution based on the Uniform Resource Locator (URL) of the target image; determining a target identifier corresponding to the loading event from the image identifiers; starting from the target identifier, sequentially determining a current query identifier from the image identifiers in descending order of the corresponding resolutions; cyclically querying the target image from a preset storage space based on the current query identifier until the query is successful, or until the current query identifier corresponds to the lowest resolution among at least one resolutions and the query fails; if the query is successful, loading the queried target image; if the current query identifier corresponds to the lowest resolution and the query fails, downloading and loading a target image of a preset resolution; wherein the preset resolution is less than the lowest resolution.

[0018] Compared to the traditional mapping of cached images to time-sensitive URLs, this invention implements a mapping between cached images and image identifiers by adding an image identifier to the target image and storing the target image corresponding to the image identifier in a preset storage space. Since the image identifier does not change over time, after determining the image identifier based on the target image's URL, the target image can be queried based on the image identifier, thereby eliminating the time-sensitivity of cached images and preventing images from being reloaded after their expiration date.

[0019] Compared to the traditional approach where the same image corresponds to different URLs in different loading scenarios, this invention determines the image identifier for each resolution of the target image at any loading event, and then determines the identifier to be queried from the image identifiers based on the current loading event. This ensures that the same image corresponds to the same set of image identifiers in different loading scenarios. Since the stored target image can be queried based on the same set of image identifiers in different loading scenarios, it is possible to load the already stored target image, avoiding repeated waiting for the image to load and improving the user experience.

[0020] Furthermore, when the image resolution is high, loading a previously stored target image or downloading and loading a target image with a lower preset resolution can enable rapid display of the target image, reducing user waiting time and improving user experience. Attached Figure Description

[0021] Figure 1 This is a flowchart illustrating an image loading method provided in Embodiment 1 of the present invention;

[0022] Figure 2 This is a flowchart of an image loading method provided in Embodiment 3 of the present invention;

[0023] Figure 3 This is a flowchart of another image loading method provided in Embodiment 3 of the present invention;

[0024] Figure 4 This is a schematic diagram of the structure of an image loading device provided in Embodiment 4 of the present invention;

[0025] Figure 5 This is a schematic diagram of the structure of an electronic terminal provided in Embodiment 5 of the present invention. Detailed Implementation

[0026] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of this invention. Obviously, the described embodiments are only some embodiments of this invention, not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention. In the following embodiments, each embodiment provides optional features and examples. The various features described in the embodiments can be combined to form multiple optional solutions. Each numbered embodiment should not be regarded as only one technical solution.

[0027] Example 1

[0028] Figure 1 This is a flowchart illustrating an image loading method according to Embodiment 1 of the present invention. This embodiment is applicable to image loading, such as image loading in various loading scenarios within application software. The image loading method provided in this embodiment can be executed by an image loading device, which can be implemented in software and / or hardware. The image loading device can be integrated into the software application and can be installed in an electronic terminal along with the software application, such as in a mobile phone, computer, or other electronic terminal.

[0029] See Figure 1 The image loading method provided in this embodiment may include:

[0030] S110. In response to the loading event of the target image, determine the image identifier of the target image at at least one resolution based on the Uniform Resource Locator (URL) of the target image.

[0031] The target image can be understood as the image that needs to be loaded.

[0032] Software applications that install image loading mechanisms can include, but are not limited to, communication applications, social sharing applications, and news applications—any application with image loading capabilities. Different applications involve different scenarios for loading images, and the corresponding loading events also differ. For example, a social sharing application might load images for shared content on a sharing details page; the corresponding loading event for the target image could be opening the sharing details page. Similarly, a news application might load images for news recommendations on a news recommendation page; the corresponding loading event for the target image could be refreshing the news recommendation page. This document does not exhaustively list the target image loading events for each application.

[0033] Different loading scenarios require loading target images of different resolutions. For example, in news applications, the images used in the news preview page can be lower resolution, while the images used in the news details page can be higher resolution. Since different loading scenarios correspond to different loading events, these loading events can be correlated with the resolution of the target image.

[0034] This involves sending a loading request for the target image at the corresponding resolution to the server based on the target image loading event, so that the server can respond with a Uniform Resource Locator (URL) for the target image at that resolution. The server can generate the target image URL based on the following steps: receiving the target image at its original resolution uploaded by the client application; processing the original resolution target image into target images at at least one resolution; storing the original resolution and the processed target images at each resolution in different locations, and determining the URL of the target image at each resolution based on the storage location. The URLs of the target images at different resolutions have a corresponding relationship, and the URLs of other resolutions can be determined based on the URL of any given resolution.

[0035] Image identifiers serve as names for stored images, and each image identifier uniquely corresponds to a target image at a specific resolution. After obtaining the URL of the target image at the resolution corresponding to the loading event, a base URL can be determined based on preset storage naming rules. It can then be checked whether the obtained URL is the base URL. If it is, the obtained URL is directly processed to obtain image identifiers for each resolution. If not, the base URL can be further obtained from the server based on the correspondence between URLs, and then processed to obtain image identifiers for each resolution.

[0036] The process of processing the obtained URL / baseline URL to obtain image identifiers at various resolutions may include: preprocessing the URL (e.g., filtering, removing spaces, removing characters, deduplication, etc.); encoding the preprocessed results in different ways to obtain image identifiers at various resolutions; or encoding the preprocessed results in the same way and adding different identifiers to obtain image identifiers at various resolutions.

[0037] S120. Determine the target identifier corresponding to the loading event from the image identifiers. Starting from the target identifier, determine the current query identifier from the image identifiers in descending order of the corresponding resolution.

[0038] Since loading events can be correlated with the resolution of the target image, the resolution at which the target image needs to be loaded can be determined based on the loading events. Furthermore, based on the resolution at which the loading is required, the target identifier can be determined from the image identifiers at various resolutions of the target image.

[0039] The target image resolution can be categorized into different levels from high to low. Other resolutions with lower resolutions than the target identifier can be identified sequentially, from highest to lowest resolution, thus yielding image identifiers for each of these lower resolutions. The target identifier and the sequentially obtained image identifiers can then be used as the current query identifier.

[0040] S130. Loop through the target image from the preset storage space according to the current query identifier until the query is successful, or until the current query identifier corresponds to the lowest resolution among at least one resolution and the query fails.

[0041] After determining the current query identifier, the target image of the corresponding resolution can be retrieved from the preset storage space based on the current query identifier. If the query is successful, the loop query can be stopped; if the query fails, a new current query identifier can be determined, and the target image can be retrieved based on the new current query identifier. Furthermore, the loop query can be stopped if the current query identifier is the image identifier corresponding to the lowest resolution among at least one resolution, and the query fails.

[0042] This can be understood as starting from the resolution that needs to be loaded, sequentially checking the preset storage space to see if the corresponding target image has been stored in descending order of resolution, until the target image is found, or until the lowest resolution is reached.

[0043] S140. If the query is successful, load the target image obtained from the query; if the current query identifier corresponds to the minimum resolution and the query fails, download and load the target image with the preset resolution.

[0044] In the process of searching for target images in a loop, querying images in descending order of resolution ensures that images with resolutions closest to the current requirement are queried first. Upon successful query, the retrieved image can be loaded and displayed directly, trading storage space resources for loading time. This speeds up image loading while ensuring that the loaded image is as close as possible to the required resolution.

[0045] The preset resolution is lower than the minimum resolution. The preset resolution can be pre-set according to the actual loading scenario to balance download speed and clarity. For example, when loading an image into an image card on a chat list page, the preset resolution can be 100kb, ensuring both fast download and relatively clear image display in the image card.

[0046] When the target image corresponding to each query identifier is not stored in the preset storage space, the target image at the preset resolution can be downloaded and loaded. Because the preset resolution is relatively small, downloading can be quite fast; when a target image query fails, the target image at the preset resolution can be downloaded without occupying the preset storage space. Furthermore, in some implementations, the Least Recently Used (LRU) algorithm can be used to control the number or size of cached images in the preset storage space, thereby further conserving storage resources.

[0047] In this embodiment, by loading and displaying a stored target image, or by downloading and loading a target image at a preset resolution, the user can achieve the effect of fast image display and optimize the user experience.

[0048] In some optional implementations, determining the image identifier of the target image at at least one resolution based on the Uniform Resource Locator (URL) of the target image may include: filtering out time-sensitive information from the URL of the target image, encrypting the filtered URL, and adding a corresponding suffix to the encryption result for each resolution to generate an image identifier at at least one resolution.

[0049] This process filters out time-sensitive information from the base URL of the target image, leaving only fixed information. Time-sensitive information can include, for example, tokens or other information that changes over time. Encryption algorithms such as Message Digest (MD), Data Encryption Standard (DES), and Advanced Encryption Standard (AES) can be used to encrypt the URL from which time-sensitive information is filtered. For example, assuming the target image resolution can be divided into large image resolution and original image resolution, the encrypted result could be `img_id`. In this case, adding the suffix `_big` to `img_id` generates the image identifier for the large image resolution; adding the suffix `_origin` to `img_id` generates the image identifier for the original image resolution.

[0050] In these alternative implementations, by filtering out time-sensitive information, the immutability of the remaining information can be guaranteed, ensuring that a fixed image identifier is obtained based on the URL obtained at any given time; by encrypting the filtered URL, the leakage of URL information can be avoided when storing images, thus ensuring the security of images on the server; by adding different suffixes to obtain image identifiers for target images at various resolutions, the form of image identifiers can be unified.

[0051] In some optional implementations, when the image loading method is applied to a communication application, the loading event of the target image may include at least one of the following: the rendering event of a view control in the communication page; or the opening event of the full-screen preview interface of the image.

[0052] The communication page could be a chat list page, and the view control could be an image card for displaying pictures. When the current terminal sends an image, or receives an image from another terminal, the image card can be rendered on the chat list page, triggering the loading of the target image. Clicking on the image card can redirect to a full-screen image preview interface, simultaneously triggering the loading of the target image.

[0053] Among these optional implementations, using the loading method of this solution to load images in scenarios involving image loading in communication applications can improve the speed of image viewing in chat, thereby improving communication efficiency.

[0054] In traditional image loading methods, although image loading frameworks can perform local caching, image URLs typically append a token. This token changes after its expiration, causing the URL of the same image to change over time, necessitating a re-download of the corresponding image. Compared to the traditional mapping of cached images to time-sensitive URLs, the image loading method provided in this invention adds an image identifier to the target image and stores the target image corresponding to that identifier in a preset storage space, thus establishing a mapping between cached images and image identifiers. Since the image identifier does not change over time, after determining the image identifier based on the target image's URL, the target image can be queried based on the identifier, thereby eliminating the time-sensitivity of cached images and preventing the need to reload images after their expiration date.

[0055] In traditional image loading methods, after an image is successfully loaded in one loading scenario, switching to another requires reloading and displaying the image again due to the changed image URL. This forces the user to wait for the already loaded image to load again. Compared to the traditional method where the same image corresponds to different URLs in different loading scenarios, the image loading method provided in this invention determines the image identifiers for each resolution of the target image at any loading event, and then determines the identifier to be queried from these identifiers based on the current loading event. This ensures that the same image corresponds to the same set of image identifiers in different loading scenarios. Since the stored target image can be queried using the same set of image identifiers in different loading scenarios, already stored target images can be used for loading, avoiding repeated waiting for image loading and improving the user experience.

[0056] In traditional image loading methods, loading high-resolution images, such as 1000kb high-definition images, can result in a long loading time when using an image loading framework. This invention provides an image loading method that, by loading and displaying a previously stored target image or downloading and loading a target image with a preset low resolution, achieves rapid display of the target image, reducing user waiting time and improving user experience.

[0057] Example 2

[0058] The image loading method provided in this embodiment can be combined with various optional schemes in the image loading methods provided in the above embodiments. The raw image loading method provided in this embodiment can download and load target images of a preset resolution simultaneously, and can also download target images of resolutions corresponding to download identifiers. Furthermore, it can replace the currently loaded low-resolution target image with a downloaded high-resolution target image, thereby presenting a clearer target image without the user's awareness.

[0059] Furthermore, downloaded target images can be stored in a preset storage space, allowing for direct loading of the same image the next time it is loaded, thus speeding up image loading. Additionally, while displaying the target image at the preset resolution, appropriate information can be provided when the target image at the specified resolution fails to download; a loading placeholder image can be used when the target image at the preset resolution fails to load, clearly indicating the current image loading status to the user and improving the user experience.

[0060] In this embodiment, while downloading and loading a target image at a preset resolution, the method may also include: determining a download identifier from image identifiers, wherein the resolution corresponding to the download identifier is less than or equal to the resolution corresponding to the target identifier; downloading the target image at the resolution corresponding to the download identifier; and replacing the currently loaded target image based on the download result.

[0061] When the preset storage space does not contain the target images corresponding to each query identifier, target images at a preset resolution can be downloaded and loaded. However, due to the low preset resolution, the displayed target images do not meet the required resolution. To address this, a higher resolution target image can be downloaded while the preset resolution target image is being displayed. This allows the downloaded target image to replace the preset resolution target image, resulting in a clearer final image.

[0062] Downloading only the target image at the resolution corresponding to the target identifier can be time-consuming and may not promptly improve the clarity of the displayed target image. In this embodiment, in addition to using the target identifier as the download identifier, other image identifiers with resolutions lower than the target identifier can also be used as download identifiers. By downloading the target images corresponding to each download identifier and replacing the currently loaded and displayed target image based on the download results, the clarity of the displayed target image can be optimized in a timely manner, improving the user experience.

[0063] In addition, when the target image retrieved does not meet the required resolution, a download identifier can be determined from the image identifier. In this case, the resolution corresponding to the download identifier can be less than or equal to the resolution corresponding to the target identifier, but greater than the resolution of the currently loaded target image. Downloading the image at the resolution corresponding to the download identifier and replacing the currently loaded target image based on the download results can also optimize the clarity of the presented target image in a timely manner.

[0064] The process of downloading the target image at the resolution corresponding to the download identifier may include: sending a download request to the server for the target image at the resolution corresponding to the download identifier, so that the server can provide the URL of the target image at the resolution corresponding to the download identifier; and downloading the target image at the corresponding resolution from the server based on each URL.

[0065] The process of replacing the currently loaded target image based on the download results can include: if the resolution of the currently downloaded target image is greater than the resolution of the currently loaded target image, then the currently loaded target image is replaced with the currently downloaded target image. Conversely, if the resolution of the currently downloaded image is not greater than that of the currently loaded target image, then no replacement is needed. By replacing the currently displayed low-resolution target image with a high-resolution target image, the clarity of the presented target image can be optimized.

[0066] In some optional implementations, the following may also be included: setting an image identifier for the downloaded target image based on its resolution; and storing the downloaded target image and the corresponding image identifier in a preset storage space.

[0067] Among these optional implementations, the downloaded target images at different resolutions can be named according to a preset storage naming rule to obtain image identifiers. The naming of the downloaded target images at different resolutions based on the storage naming rule can be referenced in determining the content of the image identifiers for each resolution, and will not be elaborated here. By storing the downloaded target images and their corresponding image identifiers in a preset storage space, it is convenient to directly use the stored target images for loading the next time the target image is loaded, thus speeding up image loading.

[0068] In some optional implementations, at least one of the following may also be included: if the target image at the resolution corresponding to the target identifier fails to download, a preset message is displayed; if the target image at the preset resolution fails to load, a preset placeholder image is loaded.

[0069] The preset information can include messages indicating that the download of a target image at the required resolution failed, as well as messages indicating the resolution of the currently loaded target image. By displaying this preset information when a target image at the resolution corresponding to the target identifier fails to download, users can understand the loading status of the target image, thus improving the user experience.

[0070] The preset placeholder images can include, but are not limited to, "loading" and "loading failed" placeholder images. For example, a "loading failed" placeholder image can be displayed when the search for the target image corresponding to the query icon fails, the download of the target image corresponding to the download icon fails, and the target image at the preset resolution fails to load. Similarly, a "loading" placeholder image can be displayed during the download process of the target image at the preset resolution or the target image corresponding to the download icon. This allows users to understand the loading status of the target image and improves the user experience.

[0071] The image loading method provided in this embodiment of the invention can download and load target images of a preset resolution while simultaneously downloading target images of the same resolution as the download identifier. It can also replace the currently loaded low-resolution target image with the downloaded high-resolution target image, thereby presenting a clearer target image without the user's awareness.

[0072] Furthermore, downloaded target images can be stored in a preset storage space, allowing for direct loading of the same image the next time it is loaded, thus speeding up image loading. Additionally, while displaying the target image at the preset resolution, appropriate information can be provided when the target image at the specified resolution fails to download; a loading placeholder image can be used when the target image at the preset resolution fails to load, clearly indicating the current image loading status to the user and improving the user experience.

[0073] The image loading method provided in this embodiment belongs to the same technical concept as the image loading method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0074] Example 3

[0075] The image loading method provided in this embodiment can be combined with various optional schemes in the image loading methods provided in the above embodiments. Taking the image loading method provided in this embodiment as an example when applied to communication applications, with the loading events being the rendering event of a view control in the communication page and the opening event of the full-screen image preview interface, the image loading method is described in detail, realizing the application of the image loading method in specific loading scenarios.

[0076] For example, Figure 2 This is a flowchart of an image loading method provided in Embodiment 3 of the present invention. See also... Figure 2 In some implementations, the target image loading event can be a rendering event of a view control on the communication page, specifically a rendering event of an image card on a chat list page. In this case, the image loading method can include:

[0077] S201, in response to the rendering event of the image card in the chat list page, the process of loading the image begins.

[0078] In this embodiment, the resolution of the target image can be divided into original image resolution, large image resolution and thumbnail resolution from high to low. At least one resolution of the target image can refer to the original image resolution and the large image resolution, and the preset resolution can refer to the thumbnail resolution.

[0079] The target images at each resolution can be referred to as the original image, the large image, and the thumbnail. The original image can refer to the uncompressed target image uploaded to the server by the client application; the large image can refer to the target image after the server has compressed the original image based on factors such as view control size and transmission conditions. The corresponding image identifiers for the original image and the large image can be referred to as the original image identifier and the large image identifier, respectively.

[0080] S202, Determine the large image identifier based on the URL of the target image.

[0081] In scenarios where images are loaded into image cards, the target identifier can be the large image identifier, and the current query identifier can also be the large image identifier.

[0082] Client applications can respond to image card rendering events by sending a large-resolution image loading request to the server, prompting the server to return the URL of the large image. When the large image URL is the base URL, the large image identifier can be directly determined from it. For example, time-sensitive information such as tokens can be filtered out from the large image URL; the filtered URL can be MD5 encrypted; and the encrypted result can be appended with the suffix "_big" to generate the large image identifier.

[0083] S203: Query the target image from the preset storage space according to the large image identifier; if the query is successful, proceed to S204; if the query fails, proceed to S205.

[0084] S204, Loading the large image and displaying it in the image card, loading complete.

[0085] S205, Download thumbnails and large images; if the thumbnails finish downloading before the large images, proceed to S206; if the large images finish downloading before the thumbnails, proceed to S204.

[0086] The download identifier can be a large image identifier. While downloading thumbnails at a preset resolution, it can also download the target image corresponding to the large image identifier.

[0087] S206: Load the thumbnail and display it in the image card until the large image is downloaded. Then, replace the thumbnail in the image card with the large image and the loading is complete.

[0088] Among these implementation methods, a check can be performed in the preset storage space to see if a large image is stored. If it is, it can be loaded and displayed directly; otherwise, a thumbnail can be loaded and displayed, thus achieving fast image loading. Because the image card size is small, a 100kb thumbnail can be clearly displayed within the image card. Furthermore, while displaying the thumbnail, the large image can be downloaded simultaneously, and after the large image is successfully downloaded, the thumbnail in the image card can be replaced to optimize the clarity of the presented image.

[0089] After the large image is downloaded, you can set a large image icon and save the large image and icon to a preset storage space for later display. Furthermore, if the large image download fails, a preset message containing "Large image download failed" can be displayed; and if the large image search fails, the large image download fails, and the thumbnail fails to load, a "Loading failed" placeholder image can be displayed to help users understand the image loading status.

[0090] For example, Figure 3 This is a flowchart of another image loading method provided in Embodiment 3 of the present invention. See also... Figure 3 In some implementations, the loading event for the target image can be the opening event for the full-screen image preview interface. For example, triggering an image card could open the full-screen image preview interface.

[0091] At this point, the image loading method can include:

[0092] S301, in response to the opening event of the full-screen image preview interface, begins the process of loading the image.

[0093] The image loading process in this example can be viewed as... Figure 2 For subsequent processes corresponding to the example, and for technical details not described in detail in this example, please refer to [link to relevant documentation]. Figure 2Corresponding example.

[0094] S302, determine the original image identifier and the large image identifier based on the URL of the target image.

[0095] In scenarios where images are loaded in a full-screen image preview interface, the target identifier can be the original image identifier, and the current query identifier can be either the original image identifier or the large image identifier. Specifically, when the URL of the large image is the base URL, the original image identifier can also be determined when determining the large image identifier based on the large image URL. For example, the original image identifier can be generated by adding the suffix "_origin" to the encrypted result.

[0096] S303: Query the target image from the preset storage space according to the original image identifier; if the query is successful, proceed to S308; if the query fails, proceed to S304.

[0097] In some implementations, if retrieving the original image fails, a "Load Original Image" button can be displayed in the full-screen image preview interface. If the original image retrieval is successful, the "Load Original Image" button can be hidden in this interface. Furthermore, when the "Load Original Image" button is triggered, it can be assumed that the user requests loading the original image. In this case, the following steps can be skipped, and the original image can be downloaded, loaded, and displayed directly. When the "Load Original Image" button is not triggered, it can be assumed that the user has not requested loading the original image. In this case, the following steps can be performed; alternatively, when executing S305, only the thumbnail and the large image can be downloaded, without downloading and loading the original image, thereby improving image loading efficiency.

[0098] S304: Query the target image from the preset storage space according to the large image identifier; if the query is successful, proceed to S307; if the query fails, proceed to S305.

[0099] The app can also start downloading the original image while redirecting to S307. Once the original image is downloaded, the large image in the full-screen preview interface will be replaced with the original image, and the loading process will end.

[0100] S305: Download thumbnail, large image, and original image; if the thumbnail finishes downloading first, proceed to S306; if the large image finishes downloading first, proceed to S307; if the original image finishes downloading first, proceed to S308.

[0101] The download identifier can be either a large image identifier or an original image identifier. While downloading thumbnails at a preset resolution, it can also download the target images corresponding to the large image identifier and the original image identifier.

[0102] S306: Load the thumbnail and display it in the full-screen preview interface until the large image finishes downloading before the original image, then jump to S307, or until the original image finishes downloading before the large image, then jump to S308.

[0103] S307 loads a large image and displays it in the full-screen preview interface until the original image is downloaded. Then, the large image in the full-screen preview interface is replaced with the original image, and the loading process ends.

[0104] S308, the original image is loaded and displayed in the full-screen preview interface. Loading is complete.

[0105] In these implementations, the system sequentially checks the preset storage space to see if the original image and the large image are stored. If they are, they can be loaded and displayed directly; otherwise, thumbnails can be loaded and displayed, thus achieving fast image loading. While displaying thumbnails, the large image and the original image can also be downloaded. Once the large image or the original image is successfully downloaded, it can replace the loaded thumbnail. The downloaded original image can replace the loaded large image, but the downloaded large image cannot replace the loaded original image, thus optimizing the clarity of the displayed image.

[0106] After the large image is completed, a large image identifier can be set, and both the large image and the identifier are stored in a preset storage space. Similarly, after the original image is completed, an original image identifier can be set, and both the original image and the identifier are stored in a preset storage space. This is for easy display of the large image and the original image later. Furthermore, a preset message containing "Original image download failed" can be displayed when the original image download fails; a "Loading failed" placeholder image can also be displayed when large image or original image search fails, large image or original image download fails, and thumbnail loading fails, so that users can understand the image loading status.

[0107] During the download process of thumbnails, large images, and original images, a "Loading" placeholder image can also be displayed. If the large image download fails while the thumbnail is already displayed, an existing image loading framework (such as the Glide framework) can be used to reload the large image. Upon successful loading, the process can proceed to S307. Although loading large images using the Glide framework does not allow setting large image identifiers and storing them based on the image loading method provided in this embodiment, it can serve as a fallback for fast image loading. Furthermore, since thumbnails do not require storage, existing image loading frameworks can also be used to load them.

[0108] In different loading scenarios within the application, target images can be loaded based on the same loading logic in the image loading method provided in this embodiment of the invention, sharing cached images in the preset storage space. This achieves at least the following technical effects: 1. It ensures that the same target image, once loaded and displayed in one scenario, can be directly loaded and displayed from the stored file when loaded in other scenarios, avoiding repeated downloads and saving image loading time; 2. It saves on the waste of file system resources caused by different URLs for the same image; 3. It improves loading efficiency; if the target image is already in the memory cache, it reduces the I / O time spent loading the image.

[0109] The image loading method provided in this embodiment of the invention, taking an application in a communication application as an example, where the loading events are the rendering event of a view control in the communication page and the triggering event of loading the original image control in the full-screen image preview interface, elaborates on the image loading method in detail, realizing the application of the image loading method in specific loading scenarios. Furthermore, the image loading method provided in this embodiment belongs to the same technical concept as the image loading methods provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0110] Example 4

[0111] Figure 4 This is a schematic diagram of an image loading device provided in Embodiment 4 of the present invention. This embodiment is applicable to image loading, for example, to image loading in various loading scenarios within application software.

[0112] See Figure 4 The image loading device provided by the present invention may include:

[0113] Image identifier determination module 410 is used to determine the image identifier of the target image at at least one resolution based on the Uniform Resource Locator of the target image in response to the loading event of the target image.

[0114] The query identifier determination module 420 is used to determine the target identifier corresponding to the loading event from the image identifiers. Starting from the target identifier, the current query identifier is determined from the image identifiers in descending order of the corresponding resolution.

[0115] The query module 430 is used to repeatedly query the target image from the preset storage space according to the current query identifier until the query is successful, or until the current query identifier corresponds to the lowest resolution among at least one resolution and the query fails.

[0116] The loading module 440 is used to load the target image obtained by the query if the query is successful; if the current query identifier corresponds to the minimum resolution and the query fails, the target image with the preset resolution is downloaded and loaded; wherein the preset resolution is less than the minimum resolution.

[0117] In some alternative implementations, the image identifier determination module can be used for:

[0118] Filter out time-sensitive information from the Uniform Resource Locator (URL) of the target image, and then encrypt the filtered URL.

[0119] For each resolution, a corresponding suffix is ​​added to the encrypted result to generate an image identifier for at least one resolution.

[0120] In some alternative implementations, loading modules can also be used for:

[0121] While downloading and loading the target image at a preset resolution, a download identifier is determined from the image identifier, wherein the resolution corresponding to the download identifier is less than or equal to the resolution corresponding to the target identifier;

[0122] Download the target image at the resolution corresponding to the download identifier, and replace the currently loaded target image based on the download results.

[0123] In some alternative implementations, loading modules can be specifically used for:

[0124] If the resolution of the currently downloaded target image is greater than the resolution of the currently loaded target image, then the currently loaded target image will be replaced with the currently downloaded target image.

[0125] In some alternative implementations, the image loading device may also include:

[0126] The caching module is used to set the image identifier of the target image to be downloaded based on its resolution.

[0127] The downloaded target image and its corresponding image identifier are stored in the preset storage space.

[0128] In some alternative implementations, the image loading device may also include at least one of the following:

[0129] The information prompt module is used to display preset information if the download of the target image at the resolution corresponding to the target identifier fails;

[0130] The placeholder image display module is used to load a preset placeholder image if the target image at the preset resolution fails to load.

[0131] In some alternative implementations, the image loading device can be applied to communication applications; the loading event of the target image includes at least one of the following: the rendering event of a view control in the communication page; the triggering event of the loading original image control in the full-screen image preview interface.

[0132] The image loading apparatus provided in this embodiment of the invention can execute the image loading method provided in this embodiment of the invention, and has the corresponding functional modules and beneficial effects of executing the method. For technical details not described in detail, please refer to the image loading method provided in this embodiment of the invention.

[0133] Example 5

[0134] Figure 5 This is a schematic diagram of the structure of an electronic terminal provided in Embodiment 5 of the present invention. Figure 5 A block diagram is shown of an exemplary electronic terminal 12 suitable for implementing embodiments of the present invention. Figure 5 The electronic terminal 12 shown is merely an example and should not be construed as limiting the functionality or scope of use of the embodiments of the present invention. Device 12 is typically an electronic terminal that performs image loading functions.

[0135] like Figure 5 As shown, the electronic terminal 12 is presented in the form of a general-purpose computing device. The components of the electronic terminal 12 may include, but are not limited to: one or more processors or processing units 16, memory 28, and bus 18 connecting different components (including memory 28 and processing unit 16).

[0136] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. Examples of these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MCA) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0137] Electronic terminal 12 typically includes a variety of computer-readable media. These media can be any available media that can be accessed by electronic terminal 12, including volatile and non-volatile media, and removable and non-removable media.

[0138] Memory 28 may include computer device readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. Electronic terminal 12 may further include other removable / non-removable, volatile / non-volatile computer storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (…). Figure 5 Not shown; usually referred to as a "hard drive"). Although Figure 5 Not shown, disk drives for reading and writing to removable non-volatile disks (e.g., "floppy disks") and optical disc drives for reading and writing to removable non-volatile optical discs (e.g., Compact Disc-Read Only Memory (CD-ROM), Digital Video Disc-Read Only Memory (DVD-ROM), or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product 40 having a set of program modules 42 configured to perform the functions of the embodiments of the present invention. Program product 40 may be stored, for example, in memory 28. Such program modules 42 include, but are not limited to, one or more application programs, other program modules, and program data, each or some combination of these examples may include an implementation of a network environment. Program modules 42 typically perform the functions and / or methods described in the embodiments of the present invention.

[0139] The electronic terminal 12 can also communicate with one or more external devices 14 (e.g., keyboard, mouse, camera, etc., and monitor), and with one or more devices that enable a user to interact with the electronic terminal 12, and / or with any device that enables the electronic terminal 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed via input / output (I / O) interface 22. Furthermore, the electronic terminal 12 can also communicate with one or more networks (e.g., Local Area Network (LAN), Wide Area Network (WAN) and / or public networks, such as the Internet) via network adapter 20. As shown, network adapter 20 communicates with other modules of the electronic terminal 12 via bus 18. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with the electronic terminal 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, Redundant Arrays of Independent Disks (RAID) devices, tape drives, and data backup storage devices.

[0140] Processor 16 executes various functional applications and data processing by running programs stored in memory 28, such as implementing the image loading method provided in the above embodiments of the present invention, including:

[0141] In response to a target image loading event, the system determines the image identifier of the target image at at least one resolution based on the target image's Uniform Resource Locator (URL). It then identifies the target identifier corresponding to the loading event from the image identifiers, and, starting with the target identifier, sequentially identifies the current query identifier from the image identifiers in descending order of their corresponding resolutions. The system iteratively queries the target image from the preset storage space based on the current query identifier until a successful query is obtained, or until the current query identifier corresponds to the lowest resolution among at least one resolutions and the query fails. If the query is successful, the retrieved target image is loaded. If the current query identifier corresponds to the lowest resolution and the query fails, the target image at a preset resolution is downloaded and loaded; where the preset resolution is lower than the lowest resolution.

[0142] Of course, those skilled in the art will understand that the processor can also implement the technical solution of the image loading method provided in the embodiments of the present invention.

[0143] Example 6

[0144] Embodiment 6 of the present invention also provides a computer-readable storage medium having a computer program stored thereon. When executed by a processor, the program implements the image loading method provided in the embodiments of the present invention, the method comprising:

[0145] In response to a target image loading event, the system determines the image identifier of the target image at at least one resolution based on the target image's Uniform Resource Locator (URL). It then identifies the target identifier corresponding to the loading event from the image identifiers, and, starting with the target identifier, sequentially identifies the current query identifier from the image identifiers in descending order of their corresponding resolutions. The system iteratively queries the target image from the preset storage space based on the current query identifier until a successful query is obtained, or until the current query identifier corresponds to the lowest resolution among at least one resolutions and the query fails. If the query is successful, the retrieved target image is loaded. If the current query identifier corresponds to the lowest resolution and the query fails, the target image at a preset resolution is downloaded and loaded; where the preset resolution is lower than the lowest resolution.

[0146] Of course, the computer program stored on the computer-readable storage medium provided in the embodiments of the present invention is not limited to the above-described method operation, and can also execute the image loading method provided in the embodiments of the present invention.

[0147] The computer storage medium of this invention can be any combination of one or more computer-readable media. A computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor device, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used or combined with an instruction execution device, apparatus, or device.

[0148] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit programs for use by or in connection with an instruction execution device, apparatus, or apparatus.

[0149] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including—but not limited to—wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0150] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof. Programming languages ​​include object-oriented programming languages—such as Java, Smalltalk, and C++—as well as conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0151] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.

Claims

1. A picture loading method, characterized by, The method comprises the following steps: in response to a loading event of a target picture, determining picture identifiers of the target picture at at least one resolution according to a uniform resource locator of the target picture; determining a target identifier corresponding to a required resolution of the loading event from the picture identifiers, and determining a current query identifier from the picture identifiers in order of corresponding resolutions from high to low, starting from the target identifier; cycling through querying a target picture from a preset storage space according to the current query identifier until a query is successful or the current query identifier corresponds to a lowest resolution of the at least one resolution and the query fails; if the query is successful, loading the target picture obtained through the query; if the current query identifier corresponds to the lowest resolution and the query fails, downloading and loading a target picture of a preset resolution; wherein the preset resolution is less than the lowest resolution; the step of determining the picture identifiers of the target picture at at least one resolution according to the uniform resource locator of the target picture comprises the following steps: filtering out time-sensitive information in the uniform resource locator of the target picture, and encrypting the filtered uniform resource locator; for each resolution, adding a corresponding suffix to the encrypted result to generate picture identifiers at at least one resolution.

2. The method of claim 1, wherein, The step of downloading and loading the target picture of the preset resolution also comprises the following steps: determining a download identifier from the picture identifiers, wherein a resolution corresponding to the download identifier is less than or equal to a resolution corresponding to the target identifier; downloading a target picture of a resolution corresponding to the download identifier, and replacing a currently loaded target picture according to a download result.

3. The method of claim 2, wherein, The step of replacing the currently loaded target picture according to the download result comprises the following step: if a resolution of the currently downloaded target picture is greater than a resolution of the currently loaded target picture, replacing the currently loaded target picture with the currently downloaded target picture.

4. The method of claim 2, wherein, The method further comprises the following steps: setting a picture identifier of the downloaded target picture according to a resolution of the downloaded target picture; storing the downloaded target picture and the corresponding set picture identifier to the preset storage space.

5. The method of claim 2, wherein, The method further comprises at least one of the following steps: if the target picture of the resolution corresponding to the target identifier fails to be downloaded, prompting preset information; if the target picture of the preset resolution fails to be loaded, loading a preset placeholder picture.

6. The method according to any one of claims 1 to 5, characterized in that, The method is applied to a communication application; the loading event of the target picture comprises at least one of the following steps: a rendering event of a view control in a communication page; an opening event of a picture full-screen preview interface.

7. An image loading apparatus, characterized by comprising: The method comprises the following steps: a picture identifier determination module, configured to determine picture identifiers of a target picture at at least one resolution according to a uniform resource locator of the target picture in response to a loading event of the target picture; a query identifier determination module, configured to determine a target identifier corresponding to a required resolution of the loading event from the picture identifiers, and determine a current query identifier from the picture identifiers in order of corresponding resolutions from high to low, starting from the target identifier. The query module is configured to query a target picture from a preset storage space according to the current query identifier in a loop until a query succeeds or until the current query identifier corresponds to a lowest resolution in the at least one resolution and the query fails. The loading module is configured to load the target picture obtained by the query if the query succeeds. If the current query identifier corresponds to the lowest resolution and the query fails, the loading module is configured to download and load a target picture of a preset resolution. The preset resolution is less than the lowest resolution. The picture identifier determination module is configured to: filter information that is time-sensitive from a uniform resource locator of a target picture, and encrypt the filtered uniform resource locator; for each resolution, add a corresponding suffix to the encrypted result to generate a picture identifier under the at least one resolution.

8. An electronic terminal comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the program to implement the picture loading method of any one of claims 1-6.

9. A computer readable storage medium having stored thereon a computer program, characterized in that, The program is executed by the processor to implement the picture loading method of any one of claims 1-6.

Citation Information

Patent Citations

  • Picture preloading method and device, electronic equipment and readable medium

    CN110647702A