Image loading method, device, storage medium and image browsing system

Abstract

The embodiment of the present application provides a method, device, storage medium and picture browsing system for loading pictures, the method comprising: responding to the presentation instruction of the file list page, requesting a list interface from the back end; the file list page is used to display thumbnails of the stored pictures, the list interface is used to obtain the path address of the clear picture for the displayed thumbnail, the path address is used to download the clear picture of the displayed thumbnail; responding to the loading instruction for the target thumbnail, loading the clear picture of the target thumbnail. By preferentially requesting the back end interface, the interface searches for and loads the strategy of local pictures, so that when the user browses a thumbnail in large size, the clear picture of the thumbnail can be downloaded and loaded in advance, shortening the time for the picture to appear on the screen and speeding up the display of the picture, thereby improving the user experience.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a picture loading method, a corresponding electronic device, a corresponding computer-readable storage medium, and a picture browsing system. Background Art

[0002] When browsing pictures stored in the album through the network disk, especially in the scenario of browsing large pictures in the network disk album, the stored videos and pictures usually allow mixed viewing. Therefore, the speed of opening large pictures and the speed of loading clear pictures when browsing large pictures will affect the user experience of the network disk product. Summary of the invention

[0003] In view of the above problems, embodiments of the present application are proposed to provide a picture loading method, a corresponding electronic device, a corresponding computer-readable storage medium, and a picture browsing system that overcome the above problems or at least partially solve the above problems.

[0004] The present application discloses a method for loading an image, which includes:

[0005] In response to the presentation instruction of the file list page, a list interface is requested from the backend; the file list page is used to display thumbnails of the stored pictures, and the list interface is used to obtain the path address of the clear picture of the displayed thumbnail, and the path address is used to download the clear picture of the displayed thumbnail;

[0006] In response to the loading instruction for the target thumbnail, a clear image of the target thumbnail is loaded.

[0007] Optionally, the responding to the instruction to load the target thumbnail and loading a clear image of the target thumbnail includes:

[0008] In response to a load instruction for a target thumbnail, a large image viewing page is displayed, and the target thumbnail is presented on the large image viewing page;

[0009] A clear image of the target thumbnail is obtained, and the target thumbnail presented on the large image viewing page is replaced with the clear image of the target thumbnail.

[0010] Optionally, the obtaining of a clear image of the target thumbnail and replacing the target thumbnail presented on the large image viewing page with the clear image of the target thumbnail includes:

[0011] If there is a clear picture cached locally based on the storage path, the clear picture cached locally is used to replace the target thumbnail presented on the large picture viewing page;

[0012] If there is no clear picture cached based on the storage path locally, the target thumbnail presented on the large picture viewing page is replaced based on the result of determining whether there is a local path address returned by the backend.

[0013] Optionally, the path address includes a local path address; and replacing the target thumbnail presented on the large image viewing page based on the result of determining whether the local path address returned by the backend exists includes:

[0014] If there is a local path address returned by the backend, a clear image of the target thumbnail is obtained based on the local path address, and the target thumbnail presented on the large image viewing page is replaced with the clear image cached locally;

[0015] If there is no local path address returned by the backend, the target thumbnail presented on the large image viewing page is replaced based on the result of determining whether there is a local image for the target thumbnail in the database.

[0016] Optionally, the replacing the target thumbnail presented on the large image viewing page based on the determination result of whether there is a local image for the target thumbnail in the database includes:

[0017] If the database contains a local image for the target thumbnail, the local image is used to replace the target thumbnail presented on the large image viewing page;

[0018] If the database does not have a local image for the target thumbnail, the target thumbnail presented on the large image viewing page is replaced based on a determination result of whether a path address of a clear image for the target thumbnail is obtained in advance.

[0019] Optionally, the replacing the target thumbnail presented on the large image viewing page based on the result of determining whether a path address of a clear image for the target thumbnail is obtained in advance includes:

[0020] If the path address of the clear picture for the target thumbnail is obtained in advance, the clear picture of the target thumbnail is obtained based on the path address, and the target thumbnail presented on the large picture viewing page is replaced with the obtained clear picture;

[0021] Also includes:

[0022] If the path address of the clear picture for the target thumbnail has not been obtained in advance, a path address acquisition request is generated and sent to the backend; the path address acquisition request is used to request the path address of the clear picture for the target thumbnail.

[0023] Optionally, it also includes:

[0024] When it is detected that the loading of the clear picture of the target thumbnail is completed, the path address of the clear picture of the next thumbnail relative to the target thumbnail is actively requested, and the clear picture of the next thumbnail is downloaded based on the path address of the clear picture of the next thumbnail.

[0025] The embodiment of the present application also discloses a picture browsing system, the system comprising: a client and a cloud server,

[0026] The client is used to respond to the presentation instruction of the file list page and request the list interface from the backend; the file list page is used to display thumbnails of the stored pictures;

[0027] The cloud server is used to provide the list interface to the client, and return the path address of the clear picture of the displayed thumbnail to the client, and return the clear picture of the displayed thumbnail;

[0028] The client may also be configured to respond to a loading instruction for a target thumbnail and load a clear image of the target thumbnail.

[0029] An embodiment of the present application also discloses an electronic device, including: a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements any step of the image loading method when executed by the processor.

[0030] An embodiment of the present application further discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of any one of the image loading methods are implemented.

[0031] The embodiments of the present application include the following advantages:

[0032] In an embodiment of the present application, when presenting the file list page, that is, when entering the file list page, the list interface can be requested from the back end to obtain the path address of the clear image of the displayed thumbnail, and download the clear image of the displayed thumbnail, so that when the target thumbnail is subsequently loaded, it can directly respond to the loading instruction of the target thumbnail and load the clear image of the target thumbnail. By preferentially requesting the back-end interface and the strategy of the interface to search and load local images, the clear image of the thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, shortening the time for the image to appear on the screen and speeding up the display of the image, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1It is a schematic diagram of the framework of the picture browsing system provided in the embodiment of the present application;

[0034] Figure 2 This is a flowchart of a method for loading a picture according to an embodiment of the present application;

[0035] Figure 3 is a flowchart of another picture loading method embodiment of the present application;

[0036] Figure 4 This is a schematic diagram of an application scenario of image loading provided in an embodiment of the present application;

[0037] Figure 5 It is a structural block diagram of an embodiment of a picture loading device of the present application. DETAILED DESCRIPTION

[0038] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, the present application is further described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0039] In the scenario of browsing large images in the online disk album, the speed of opening large images and the speed of loading clear images when browsing large images will affect the user experience of the online disk product.

[0040] In the relevant technologies of image loading, the browsing and loading process of large images is mainly manifested as first entering the large image browsing page, and then requesting network data through the interface to download and load a clear image of the large image; before the clear image of the large image is loaded, the system page will display a "Loading" pop-up window to indicate that the image is loading, and the image loading efficiency is low, which reduces the user experience of related network disk products.

[0041] The embodiment of the present application optimizes the loading link by adopting a preloading strategy, which is manifested as a strategy of prioritizing the request to the backend interface and the interface to search and load local images, so that the clear image of a thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, shortening the time it takes for the image to appear on the screen and speeding up the display of the image, thereby improving the user experience. Furthermore, after the clear image of the current thumbnail is loaded, the path address of the clear image of the next thumbnail that slides backwards compared to the current thumbnail can be actively requested in advance, and the clear image can be downloaded to ensure that the next image has been loaded when the user slides to the next image on the large image viewing page. The preloading of the image avoids the user from waiting for the image to load.

[0042] Reference Figure 1, showing a framework diagram of a picture browsing system provided in an embodiment of the present application, the picture browsing system 11 may include a client 111 and a cloud server 112, the client 111 may be used to provide users with functions of browsing pictures, including command response, interface display, picture display, etc.; the cloud server 112 may be mainly used to store pictures and provide corresponding interfaces for the client 111.

[0043] In an embodiment of the present application, a preloading strategy can be adopted, which is manifested as a strategy of prioritizing requesting the back-end interface and the interface searching and loading local images, so that when the user browses a large thumbnail, a clear image of the thumbnail can be downloaded and loaded in advance, thereby shortening the time it takes for the image to appear on the screen and speeding up the display of the image, thereby improving the user experience.

[0044] In the process of optimizing the loading link, the client can mainly respond to the presentation instruction of the file list page and request the list interface from the back end, wherein the presented file list page can be mainly used to display the thumbnails of the stored pictures. The back end of the client can be a cloud server, that is, a server for providing data storage cloud and cloud services. Then, after the cloud server receives the list interface request sent by the front end (that is, the client), it can be used to provide the requested list interface to the client. The acquisition of the list interface can actually be expressed as the acquisition of the path address. When the cloud server returns the list interface to the client, it is equivalent to returning the requested list interface to the client. Regarding the path address of the clear image of the displayed thumbnail, and returning the clear image of the displayed thumbnail, the aforementioned part belongs to the preloading process for subsequent loading. When the client responds to the presentation instruction for the file list page, what is actually presented to the user is the thumbnail of the stored image displayed on the file list page, and the behavior of the client requesting the list interface from the back end is a user-imperceptible behavior; when the user subsequently has a need to view a thumbnail on the file list, the client can respond to the loading instruction for the target thumbnail and load the clear image of the target thumbnail. The loaded clear image can be a pre-loaded image.

[0045] In actual applications, the entire image browsing system can be built on the cross-platform framework Flutter. Flutter is mainly a technical solution that can be developed across platforms. Its Flutter code can be allowed to run on multiple terminals. This embodiment of the present application does not limit this.

[0046] Reference Figure 2 , shows a flowchart of a method for loading a picture according to an embodiment of the present application, which may specifically include the following steps:

[0047] Step 201, responding to the presentation instruction of the file list page, requesting the list interface from the backend;

[0048] The file list can be mainly used to display thumbnails of stored images, specifically, corresponding thumbnails of images stored in the cloud server. Thumbnails can refer to small, relatively blurred images presented in the list.

[0049] The instruction for presenting the file list may be generated based on a click presentation or touch presentation operation performed by the user on the file list. The related operations of click presentation and / or touch presentation may be implemented by operating corresponding controls for the file list provided via the picture browsing interface. The embodiments of the present application do not impose any restrictions on this.

[0050] In one embodiment of the present application, the client can respond to the user's presentation instruction for the file list page by displaying thumbnails of the stored images on the file list page to the user, so as to inform the user of the specific image information stored and allow the user to preview the stored images in thumbnails.

[0051] Specifically, when thumbnails of stored images are displayed to users on a file list page, when the client detects that it has entered the file list page, in order to preload images, it can request a list interface from the backend on the file list page. The backend of the client can be a cloud server.

[0052] It should be noted that when the client responds to the instruction to present the file list page, what is actually presented to the user is the thumbnail of the stored image on the file list page, and the client's behavior of requesting the list interface from the backend is an action that the user is not aware of.

[0053] Among them, the list interface requested by the client can be used to obtain the path address of the clear picture of the displayed thumbnail, that is, the acquisition of the list interface can actually be expressed as the acquisition of the path address, and the path address can be mainly used to download the clear picture of the displayed thumbnail, then the acquisition of the list interface can actually be understood as the download of the clear picture, thereby facilitating the preloading of the clear picture.

[0054] Step 202, in response to a loading instruction for a target thumbnail, a clear image of the target thumbnail is loaded.

[0055] When a user has a need to view a thumbnail on a file list, the user can enter the large-image viewing page by clicking on a thumbnail presented on the aforementioned file list page. At this time, the client can generate a loading instruction for the target thumbnail based on the user's click operation on the target thumbnail. The loading instruction can mainly be used to inform the client to load a clear image of the target thumbnail on the large-image viewing page. Then, at this time, the client can respond to the loading instruction for the target thumbnail and load a clear image of the target thumbnail.

[0056] The clear picture may refer to a clear picture viewed by the user when browsing the thumbnails in large format.

[0057] In actual applications, the loaded clear image can be a pre-loaded image, which can usually be presented as a clear image cached locally based on a storage path, thereby improving the image loading efficiency by displaying the pre-loaded image. The embodiments of the present application are not limited to this.

[0058] In an embodiment of the present application, when presenting the file list page, that is, when entering the file list page, the list interface can be requested from the back end to obtain the path address of the clear image of the displayed thumbnail, and download the clear image of the displayed thumbnail, so that when the target thumbnail is subsequently loaded, it can directly respond to the loading instruction of the target thumbnail and load the clear image of the target thumbnail. By preferentially requesting the back-end interface and the strategy of the interface to search and load local images, the clear image of the thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, shortening the time for the image to appear on the screen and speeding up the display of the image, thereby improving the user experience.

[0059] Reference Figure 3 , shows a flowchart of another picture loading method embodiment of the present application, which may specifically include the following steps:

[0060] Step 301, responding to the presentation instruction of the file list page, requesting the list interface from the backend;

[0061] In one embodiment of the present application, the client can respond to the user's presentation instruction for the file list page by displaying thumbnails of the stored images on the file list page to the user, so as to inform the user of the specific image information stored and allow the user to preview the stored images in thumbnails.

[0062] Among them, the file list can be mainly used to display thumbnails of stored pictures, specifically, corresponding thumbnails of pictures stored in the cloud server, and thumbnails can refer to relatively blurred small pictures presented in the list; the presentation instruction of the file list can be expressed as being generated based on the user's click presentation or touch presentation operation on the file list, and the related operations of click presentation and / or touch presentation can be expressed as operating the corresponding controls for the file list provided through the picture browsing interface, and the embodiments of the present application are not limited to this.

[0063] Specifically, when thumbnails of stored images are displayed to users on a file list page, when the client detects that it has entered a file list page, in order to preload images, it can request a list interface from the backend on the file list page. The backend of the client can be a cloud server, that is, a server for providing cloud data storage and cloud services.

[0064] In actual applications, after receiving the list interface request sent by the front end (i.e., the client), the cloud server can be used to provide the requested list interface to the client. The acquisition of the list interface can actually be expressed as the acquisition of the path address. When the cloud server returns the list interface to the client, it is equivalent to returning the path address of the clear picture of the displayed thumbnail to the client, and returning the clear picture of the displayed thumbnail. The aforementioned part belongs to the preloading process for subsequent loading. When the client responds to the presentation instruction for the file list page, what is actually presented to the user is the thumbnail of the stored picture displayed on the file list page, and the client's behavior of requesting the list interface from the back end is a user-imperceptible behavior.

[0065] In a preferred embodiment, after the cloud server returns the path address of the clear image of the displayed thumbnail to the client, and returns the clear image of the displayed thumbnail, the client can locally cache the path address and clear image returned by the cloud server, so that the clear image of the thumbnail can be downloaded and loaded in advance when the user browses the large image of a thumbnail.

[0066] Step 302, in response to the instruction to load the target thumbnail, displaying a large image viewing page, and presenting the target thumbnail on the large image viewing page;

[0067] When a user has a need to view a thumbnail on a file list, the user can enter the large-image viewing page by clicking on a thumbnail presented on the aforementioned file list page. At this time, the client can generate a loading instruction for the target thumbnail based on the user's click operation on the target thumbnail. The loading instruction can mainly be used to inform the client to load a clear image of the target thumbnail on the large-image viewing page. Then, at this time, the client can respond to the loading instruction for the target thumbnail and load a clear image of the target thumbnail.

[0068] In one embodiment of the present application, when the client responds to a loading instruction, in order to avoid the user's feeling of having to wait too long, after displaying the large image viewing page to the user, the client can preferentially load the thumbnails that have been displayed on the file list page on the large image viewing page.

[0069] Step 303, obtain a clear image of the target thumbnail, and use the clear image of the target thumbnail to replace the target thumbnail presented on the large image viewing page.

[0070] After obtaining a clear image of the target thumbnail, the obtained clear image of the target thumbnail can be used to replace the target thumbnail presented on the aforementioned large image viewing page, so as to render a clear image. This can further avoid the user's feeling of waiting too long on the basis of pre-loading images using a pre-loading strategy, shorten the image's on-screen time, speed up the image's display speed, improve image loading efficiency, and enhance user experience.

[0071] In a preferred embodiment of the present application, when rendering a clear image, in addition to actively replacing the thumbnail loaded on the large image viewing page, the loaded clear image can also be cached so that the cached clear image can be directly displayed when the same thumbnail is viewed as a large image again later.

[0072] Specifically, when the client enters the file list page and requests the list interface from the backend, the client can locally cache the path address and clear image returned by the cloud server. After the client caches the returned clear image, the clear image can be called a local cache image relative to the client, and after the client caches the returned path address, the storage path storing the path address can be called a local storage path relative to the client.

[0073] Then, in the process of obtaining a clear image of the target thumbnail, a strategy of prioritizing requesting the backend interface and the interface searching and loading local images is adopted. First, it can be determined whether there is a clear image based on the storage path cache locally. In one case, if there is a clear image based on the storage path cache locally, the clear image in the local cache can be directly used to replace the target thumbnail presented on the large image viewing page; in another case, if there is no clear image based on the storage path cache locally, the target thumbnail presented on the large image viewing page can be replaced based on the judgment result of whether there is a local path address returned by the backend.

[0074] In actual applications, the entire image browsing system can be built on the cross-platform framework Flutter, that is, the client to which the cloud server actually returns the path address and clear image is actually the native side, that is, the native side can cache the returned path address and clear image. When the client on the flutter side loads local images, it can usually obtain images from the local album from the client on the native side. Specifically, it can obtain local images based on file information, such as the ID (Identity) of the image, or based on the path where the ID is saved locally when uploading; if the content occupied by the local image is particularly large, it will cause poor performance when the client loads the acquired local image. At this time, the flutter side can initiate a call for downsizing decoding of the local image on the native side, so that after the native side obtains the call, the image data of the local album is directly handed over to the engine side for downsizing rendering, avoiding excessive encoding and decoding to the flutter side, which can improve performance.

[0075] The path address may include a local path address, that is, after the client caches the returned path address, the storage path storing the path address may be referred to as a local storage path relative to the client. When there is no clear image based on the storage path cache locally, it may be determined whether there is a local path address returned by the backend. In one case, if there is a local path address returned by the backend, that is, the path address local_path returned by the backend is consistent with the local storage path, the clear image of the target thumbnail may be obtained based on the local path address, and the clear image cached locally may be used to replace the target thumbnail presented on the large image viewing page; in another case, if there is no local path address returned by the backend, the target thumbnail presented on the large image viewing page may be replaced based on the result of determining whether there is a local image for the target thumbnail in the database.

[0076] When there is no local path address returned by the backend, it can be determined whether there is a local image for the target thumbnail in the database, that is, it can be queried whether there is a local image in the local database used to upload, download, and back up images. In one case, if there is a local image for the target thumbnail in the database, the local image can be used to replace the target thumbnail presented on the large image viewing page; in another case, if there is no local image for the target thumbnail in the database, the target thumbnail presented on the large image viewing page can be replaced based on the judgment result of whether the path address of a clear image for the target thumbnail has been obtained in advance.

[0077] When there is no local picture for the target thumbnail in the database, it can be determined whether the path address of a clear picture for the target thumbnail has been obtained in advance, that is, the path address obtained by the interface in advance may not be able to obtain the path addresses of all thumbnails. At this time, based on the judgment result of whether the path address of a clear picture for the target thumbnail has been obtained in advance, the user can actively obtain the path address that has not been obtained in advance.

[0078] In one case, if the path address of a clear image for the target thumbnail is obtained in advance, the clear image of the target thumbnail can be obtained based on the path address, and the target thumbnail presented on the large image viewing page can be replaced with the obtained clear image; in another case, when the path address obtained by the pre-interface does not obtain the path addresses of all thumbnails, the user can actively obtain them, that is, if the path address of the clear image for the target thumbnail is not obtained in advance, a path address acquisition request can be generated and sent to the back end. The path address acquisition request can mainly be used to request the back end to obtain the path address of the clear image for the target thumbnail, so that the back end returns the path address of the clear image of the displayed thumbnail to the client, and returns the clear image of the displayed thumbnail, and replaces the target thumbnail preferentially loaded on the large image viewing page based on the judgment result of whether there is a clear image based on the storage path cache locally on the client.

[0079] In a preferred embodiment of the present application, when it is detected that the loading of the clear image of the target thumbnail is completed, the path address of the clear image of the next thumbnail relative to the target thumbnail can be actively requested, and the clear image of the next thumbnail can be downloaded based on the path address of the clear image of the next thumbnail, so as to ensure that the next image has been loaded when the user slides to the next image on the large image viewing page, thereby realizing the preloading strategy proposed in the embodiment of the present application, avoiding users from waiting for the image loading based on the preloading of the image, and improving the efficiency of image loading.

[0080] In an embodiment of the present application, by prioritizing the request to the backend interface and the interface searching and loading the local image strategy, a clear image of a thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, thereby shortening the time the image is on the screen and speeding up the display of the image, thereby improving the user experience.

[0081] Reference Figure 4, shows a schematic diagram of the application scenario of image loading provided by the embodiment of the present application. The image browsing system can be applied to the scenario where users browse and view images in a network disk product. The image browsing system may include a client and a cloud server. The client may be used to provide users with functions for browsing images, including command response, interface display, image display, etc. The cloud server may serve as the backend of the client, that is, a server for providing cloud data storage and cloud services. In actual applications, it can be mainly used to store images and provide corresponding interfaces for the client.

[0082] Specifically, in the process of optimizing the loading link, the client can mainly respond to the presentation instruction of the file list page and request the list interface from the backend, wherein the presented file list page can be mainly used to display the thumbnails of the stored pictures. At this time, after the cloud server receives the list interface request sent by the front end (i.e., the client), it can be used to provide the requested list interface to the client. The acquisition of the list interface can actually be expressed as the acquisition of the path address. When the cloud server returns the list interface to the client, it is equivalent to returning the path address of the clear picture of the displayed thumbnail to the client, and returning the clear picture of the displayed thumbnail. The aforementioned part belongs to the preloading process for subsequent loading. When the client responds to the presentation instruction of the file list page, what is actually presented to the user is the thumbnail of the stored picture displayed on the file list page, and the behavior of the client requesting the list interface from the backend is a user-imperceptible behavior; when the user subsequently has a need to view a thumbnail on the file list, the client can respond to the loading instruction of the target thumbnail and load the clear picture of the target thumbnail. The loaded clear picture can be a preloaded picture.

[0083] In the specific process, Figure 4As shown, when the client enters the file list page, it can actively request the list interface from the backend on the file list page, that is, perform the pre-reading operations of preview_url and preview local_path; after entering the large image viewing page, it can preferentially load the thumbnails that have been displayed on the file list page; when loading the clear image of the thumbnail, it can be determined based on the file information whether there is a clear image based on the storage path cache locally. If there is a clear image based on the storage path cache locally, the clear image of the local cache can be directly used to replace the target thumbnail presented on the large image viewing page to achieve the rendering of the clear image; if there is no clear image based on the storage path cache locally, it can be determined whether there is a local path address local_path returned by the backend; if there is a local path address returned by the backend, that is, the path address local_path returned by the backend is consistent with the local storage path, it can be based on The local path address is used to obtain the clear image of the target thumbnail, and the clear image cached locally is used to replace the target thumbnail presented on the large image viewing page to achieve the rendering of the clear image; if the local path address returned by the backend does not exist, it can be determined whether there is a local image for the target thumbnail in the database, that is, it can be checked whether there is a local image in the local database used for uploading, downloading, and backing up images; if the database has a local image for the target thumbnail, the local image can be used to replace the target thumbnail presented on the large image viewing page to achieve the rendering of the clear image; if the database does not have a local image for the target thumbnail, it can be determined whether the path address of the clear image for the target thumbnail is obtained in advance, that is, the URL (Uniform URI) of the clear image Resource Locator, Uniform Resource Locator); if the path address of the clear image for the target thumbnail is obtained in advance, the clear image of the target thumbnail can be obtained based on the path address, and the obtained clear image is used to replace the target thumbnail presented on the large image viewing page to achieve rendering of the clear image; if the path address of the clear image for the target thumbnail is not obtained in advance, a path address acquisition request can be generated and sent to the back end to actively request the path address of the clear image for the target thumbnail, that is, to request the URL of the clear image.

[0084] In actual applications, the entire image browsing system can be built on the cross-platform framework Flutter, that is, the client to which the cloud server actually returns the path address and clear image is actually the native side, that is, the native side can cache the returned path address and clear image. When the client on the flutter side loads local images, it can usually obtain images from the local album from the client on the native side. Specifically, it can obtain local images based on file information, such as the ID of the image, or based on the path where the ID is saved locally when uploading. If the content occupied by the local image is particularly large, it will cause poor performance when the client loads the obtained local image. At this time, the flutter side can initiate a call for downsizing decoding of the local image on the native side, so that after the native side obtains the call, the image data of the local album is directly handed over to the engine side for downsizing rendering, avoiding excessive encoding and decoding to the flutter side, which can improve performance.

[0085] It should be noted that, in addition to the above-mentioned calling strategy of local map size reduction decoding, the memory control of clear images can also adopt a display strategy of limiting the loading width of clear images, such as 1000px and then performing geometric scaling. The embodiments of this application do not limit other specific strategies of memory control and the specific implementation methods of the strategies.

[0086] In the embodiment of the present application, the loading link is optimized by adopting a preloading strategy, which is manifested as a strategy of preferentially requesting the backend interface, and the interface searching and loading local images, so that the clear image of a thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, shortening the time the image is on the screen and speeding up the display of the image, thereby improving the user experience. Furthermore, after the clear image of the current thumbnail is loaded, the path address of the clear image of the next thumbnail that slides back compared to the current thumbnail can be actively requested in advance, and the clear image can be downloaded to ensure that the next image has been loaded when the subsequent user slides to the next image on the large image viewing page, and the user is prevented from waiting for the image to load based on the preloading of the image.

[0087] It should be noted that, for the method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present application are not limited by the described order of actions, because according to the embodiments of the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present application.

[0088] Reference Figure 5 , shows a structural block diagram of an embodiment of a picture loading device of the present application, which may specifically include the following modules:

[0089] The list interface request module 501 is used to respond to the presentation instruction of the file list page and request the list interface from the backend; the file list page is used to display the thumbnails of the stored pictures, and the list interface is used to obtain the path address of the clear picture of the displayed thumbnail, and the path address is used to download the clear picture of the displayed thumbnail;

[0090] The picture loading module 502 is used to respond to a loading instruction for a target thumbnail and load a clear picture of the target thumbnail.

[0091] In one embodiment of the present application, the picture loading module 502 may include the following submodules:

[0092] The picture loading submodule is used to respond to the loading instruction of the target thumbnail, display the large picture viewing page, and present the target thumbnail on the large picture viewing page; obtain a clear picture of the target thumbnail, and use the clear picture of the target thumbnail to replace the target thumbnail presented on the large picture viewing page.

[0093] In one embodiment of the present application, the picture loading submodule may include the following units:

[0094] The image loading unit is used to replace the target thumbnail presented on the large image viewing page with the clear image cached locally when there is a clear image cached based on the storage path locally; when there is no clear image cached based on the storage path locally, the target thumbnail presented on the large image viewing page is replaced based on the judgment result of whether there is a local path address returned by the backend.

[0095] Among them, the path address includes a local path address; the step of replacing the target thumbnail presented on the large image viewing page based on the judgment result of determining whether there is a local path address returned by the backend includes: if there is a local path address returned by the backend, a clear image of the target thumbnail is obtained based on the local path address, and the target thumbnail presented on the large image viewing page is replaced with a clear image cached locally; if there is no local path address returned by the backend, the target thumbnail presented on the large image viewing page is replaced based on the judgment result of determining whether there is a local image for the target thumbnail in the database.

[0096] The step of replacing the target thumbnail presented on the large image viewing page based on the judgment result of whether there is a local picture for the target thumbnail in the database includes: if there is a local picture for the target thumbnail in the database, replacing the target thumbnail presented on the large image viewing page with the local picture; if there is no local picture for the target thumbnail in the database, replacing the target thumbnail presented on the large image viewing page based on the judgment result of whether the path address of a clear picture for the target thumbnail is obtained in advance.

[0097] The step of replacing the target thumbnail presented on the large image viewing page based on the result of determining whether the path address of the clear image for the target thumbnail has been obtained in advance includes: if the path address of the clear image for the target thumbnail has been obtained in advance, the clear image of the target thumbnail is obtained based on the path address, and the target thumbnail presented on the large image viewing page is replaced with the obtained clear image; and also includes: if the path address of the clear image for the target thumbnail has not been obtained in advance, a path address acquisition request is generated, and the path address acquisition request is sent to the back end; the path address acquisition request is used to request the path address of the clear image for the target thumbnail.

[0098] In one embodiment of the present application, the image loading module can also be used to actively request the path address of the clear image of the next thumbnail relative to the target thumbnail when it detects that the loading of the clear image of the target thumbnail is completed, and download the clear image of the next thumbnail based on the path address of the clear image of the next thumbnail.

[0099] In an embodiment of the present application, when presenting a file list page, that is, when entering a file list page, the image loading device provided by the embodiment of the present application can request a list interface from the back end to obtain the path address of a clear image of the displayed thumbnail, and download the clear image of the displayed thumbnail, so that when the target thumbnail is subsequently loaded, it can directly respond to the loading instruction of the target thumbnail and load the clear image of the target thumbnail. By preferentially requesting the back end interface and the strategy of the interface searching and loading local images, the clear image of the thumbnail can be downloaded and loaded in advance when the user browses a large image of a thumbnail, shortening the time for the image to appear on the screen and speeding up the display of the image, thereby improving the user experience.

[0100] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0101] The present application also provides an electronic device, including:

[0102] It includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned image loading method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0103] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned image loading method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0104] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0105] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, devices, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0106] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0107] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0108] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0109] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present application.

[0110] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0111] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0112] The above is a detailed introduction to a picture loading method, a corresponding electronic device, a corresponding computer-readable storage medium, and a picture browsing system provided by the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A method for loading an image, characterized in that: The method comprises: In response to the presentation instruction of the file list page, a list interface is requested from the backend; the file list page is used to display thumbnails of the stored pictures, and the list interface is used to obtain the path address of the clear picture of the displayed thumbnail, and the path address is used to download the clear picture of the displayed thumbnail; In response to the loading instruction for the target thumbnail, a clear image of the target thumbnail is loaded.

2. The method according to claim 1, characterized in that The step of responding to the instruction to load the target thumbnail and loading a clear image of the target thumbnail includes: In response to a load instruction for a target thumbnail, a large image viewing page is displayed, and the target thumbnail is presented on the large image viewing page; A clear image of the target thumbnail is obtained, and the target thumbnail presented on the large image viewing page is replaced with the clear image of the target thumbnail.

3. The method according to claim 2, characterized in that The step of obtaining a clear image of the target thumbnail and replacing the target thumbnail presented on the large image viewing page with the clear image of the target thumbnail includes: If there is a clear picture cached locally based on the storage path, the clear picture cached locally is used to replace the target thumbnail presented on the large picture viewing page; If there is no clear picture cached based on the storage path locally, the target thumbnail presented on the large picture viewing page is replaced based on the result of determining whether there is a local path address returned by the backend.

4. The method according to claim 3, characterized in that The path address includes a local path address; and replacing the target thumbnail presented on the large image viewing page based on the result of determining whether the local path address returned by the back end exists includes: If there is a local path address returned by the backend, a clear image of the target thumbnail is obtained based on the local path address, and the target thumbnail presented on the large image viewing page is replaced with the clear image cached locally; If there is no local path address returned by the backend, the target thumbnail presented on the large image viewing page is replaced based on the result of determining whether there is a local image for the target thumbnail in the database.

5. The method according to claim 4, characterized in that The step of replacing the target thumbnail presented on the large image viewing page based on the result of determining whether there is a local image for the target thumbnail in the database comprises: If the database contains a local image for the target thumbnail, the local image is used to replace the target thumbnail presented on the large image viewing page; If the database does not have a local image for the target thumbnail, the target thumbnail presented on the large image viewing page is replaced based on a determination result of whether a path address for a clear image for the target thumbnail is obtained in advance.

6. The method according to claim 5, characterized in that The step of replacing the target thumbnail presented on the large image viewing page based on the result of determining whether the path address of the clear image for the target thumbnail is obtained in advance comprises: If the path address of the clear picture for the target thumbnail is obtained in advance, the clear picture of the target thumbnail is obtained based on the path address, and the target thumbnail presented on the large picture viewing page is replaced with the obtained clear picture; Also includes: If the path address of the clear picture for the target thumbnail has not been obtained in advance, a path address acquisition request is generated and sent to the backend; the path address acquisition request is used to request the path address of the clear picture for the target thumbnail.

7. The method according to claim 1 or 2, characterized in that: Also includes: When it is detected that the loading of the clear picture of the target thumbnail is completed, the path address of the clear picture of the next thumbnail relative to the target thumbnail is actively requested, and the clear picture of the next thumbnail is downloaded based on the path address of the clear picture of the next thumbnail.

8. A picture browsing system, characterized in that: The system comprises: a client and a cloud server, The client is used to respond to the presentation instruction of the file list page and request the list interface from the backend; the file list page is used to display thumbnails of the stored pictures; The cloud server is used to provide the list interface to the client, and return the path address of the clear picture of the displayed thumbnail to the client, and return the clear picture of the displayed thumbnail; The client may also be configured to respond to a loading instruction for a target thumbnail and load a clear image of the target thumbnail.

9. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements the method according to any one of claims 1 to 7 when executed by the processor.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images