Picture display method and device and medium

Abstract

The invention provides a picture display method and device and a medium, the method is applied to the device, and the method comprises the steps that according to all obtained picture information, position information of each attribution class in N attribution classes is determined, N is a positive integer larger than or equal to 1, and all picture information comprises the N attribution classes and N picture numerical values in one-to-one correspondence with the N attribution classes; determining a target position in response to a browsing operation of a user; according to the position information of each affiliation class in the N affiliation classes, determining information of a to-be-displayed picture corresponding to the target position; and loading the to-be-displayed picture according to the information of the to-be-displayed picture. Through the method, the device and the medium, random browsing of the picture by the user can be realized based on the position information of each attribution class in the N attribution classes, and all the acquired picture information only comprises the attribution classes and the picture numerical values corresponding to each attribution class, so that the data volume is small, the load of the device can be reduced, and the browsing fluency of the picture is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of device display, and more specifically, to a method, device and medium for displaying pictures. Background Art

[0002] When viewing massive images through image browsing software or browsers on a device, most software presents massive images in a waterfall flow, that is, new and continuous images are dynamically displayed as you slide down.

[0003] However, in this way, the browsing range corresponding to the scroll bar at the current moment is the pictures that have been displayed, and the pictures that have been displayed can only be browsed by scrolling the current scroll bar up and down. The browsing range does not include the pictures that have not been displayed, and the pictures that have not been displayed cannot be browsed by scrolling the current scroll bar down. In other words, the waterfall flow picture display method cannot realize the picture dragging to the bottom and the top, nor can it realize random browsing of pictures. Summary of the invention

[0004] The present application provides a method, device and medium for displaying an image. Through this method, device and medium, the location information of each of N belonging categories can be determined by obtaining all the image information. Based on the location information of each of the N belonging categories, the user can browse the images randomly. In addition, all the information obtained only includes the belonging categories and the image values ​​corresponding to each belonging category. The data volume is small, which can reduce the load of the device and improve the browsing fluency of the images.

[0005] In a first aspect, a method for displaying a picture is provided, the method being applied to a device, the method comprising: determining position information of each of N belonging categories based on all acquired picture information, the all picture information comprising N belonging categories and N picture values ​​corresponding one-to-one to the N belonging categories, N being a positive integer greater than or equal to 1; determining a target position in response to a user's browsing operation; acquiring information of a picture to be displayed corresponding to the target position based on the position information of each of the N belonging categories; and loading the picture to be displayed based on the information of the picture to be displayed.

[0006] In an embodiment of the present application, the location information of each of all the belonging categories can be determined by obtaining all the image information, and the user can randomly browse the images based on the location information of each of all the belonging categories. Moreover, the obtained all the image information only includes the belonging category and the number of pictures corresponding to each belonging category. The data volume is small, which can reduce the load of the device and improve the browsing fluency of the images.

[0007] In combination with the first aspect, in a possible implementation, before determining the location information of each of N belonging categories based on the acquired all picture information, the method also includes: sending a request message to a server, the request message being used to acquire the all picture information; and receiving the all picture information sent by the server.

[0008] In the embodiment of the present application, all the image information obtained only includes the category and the image value corresponding to each category. The data volume is small, which can reduce the load of the device and improve the browsing fluency of the image.

[0009] In combination with the first aspect, in a possible implementation method, the pictures to be displayed corresponding to the target position are C pictures starting from the Bth picture corresponding to the first belonging category and moving in the first browsing direction, wherein the N belonging categories include the first belonging category, and B and C are positive integers greater than or equal to 1.

[0010] In other words, the target position is used to indicate that the pictures to be displayed are C pictures starting from the Bth picture corresponding to the first category and heading toward the first browsing direction.

[0011] In some embodiments, the first attribution category is the last attribution category displayed in the corresponding display page before the user performs a browsing operation, and the Bth picture corresponding to the first attribution category is the Bth picture in the first attribution category, which refers to the last picture displayed in the first attribution category, and also refers to the last picture displayed in the corresponding display page before the user performs a browsing operation.

[0012] When the user browses from top to bottom, the first browsing direction is downward, and when the user browses from bottom to top, the first browsing direction is upward.

[0013] In the embodiment of the present application, the target location can be obtained based on the browsing operation of the user, and the location information of the image to be displayed corresponding to the target location can be further determined according to the location information of the target location and each of the N belonging categories, so that the information of the image to be displayed can be obtained. This allows the user to browse randomly to any location, and the device can quickly determine the image to be displayed. The user does not need to wait for the images to be loaded and displayed in sequence, so that the user can browse the images randomly.

[0014] In combination with the first aspect, in a possible implementation method, the information of the pictures to be displayed includes the category corresponding to each picture in the pictures to be displayed, the serial number of each picture in the pictures to be displayed in the corresponding category, and the download address of each picture in the pictures to be displayed.

[0015] In some embodiments, the device first downloads the pictures to be displayed according to the download address of each picture to be displayed, and then displays the pictures to be displayed at the corresponding display position according to the corresponding category of each picture to be displayed and the serial number of each picture to be displayed in the corresponding category.

[0016] In combination with the first aspect, in a possible implementation method, all the pictures have the same size, and the overall interface formed by all the pictures is divided into a top placeholder area, an upper buffer area, a visible area, a lower buffer area, and a bottom placeholder area which are connected end to end in sequence, wherein the top placeholder area and the bottom placeholder area are picture placeholder areas, the upper buffer area, the visible area, and the lower buffer area are picture loading areas, and the pictures in the visible area are displayed on the screen of the device.

[0017] It can be understood that when the user browses from top to bottom, the pictures in the lower buffer are displayed in the visible area in sequence as the user browses, and the pictures displayed in the visible area are displayed in the upper buffer in sequence as the user browses. In this way, the height of the lower buffer gradually decreases, and the height of the upper buffer gradually increases. The speed at which the height of the upper buffer increases and the speed at which the height of the lower buffer decreases can be the same, and the height of the upper buffer increases can be equal to the height of the lower buffer decreases.

[0018] In the embodiment of the present application, by pre-allocating and pre-rendering the buffer, the pictures can be loaded in the buffer in advance. In this way, when the user browses the pictures continuously, the pictures in the buffer are directly displayed in the visual area, which can greatly improve the smoothness of the user's browsing of pictures.

[0019] In combination with the first aspect, in a possible implementation method, when the user's browsing operation is a continuous browsing operation downward, the loaded pictures in the lower buffer are displayed in the visible area in turn, and the pictures displayed in the visible area are displayed in the upper buffer in turn, and the information of the picture to be displayed corresponding to the target position is determined according to the position information of each of the N belonging categories, including: determining whether the height of the lower buffer is less than the first height according to the target position; if the height of the lower buffer is less than the first height, determining the information of the picture to be displayed corresponding to the target position according to the position information of each of the N belonging categories; loading the picture to be displayed according to the information of the picture to be displayed, including: loading the picture to be displayed into the lower buffer according to the information of the picture to be displayed.

[0020] The first height may be any height from 0.5 screens to 3 screens, for example, and the preferred height is 1 screen.

[0021] In an embodiment of the present application, a method for displaying images corresponding to continuous browsing is provided. When the height of the buffer zone is too low during the continuous browsing process of the user, the processing and rendering process of subsequent image data will be started and loaded into the buffer zone, so that the images in the visible area seen by the user during the browsing process enter the visible area directly from the buffer zone, thereby improving the smoothness of image browsing.

[0022] In combination with the first aspect, in a possible implementation, the method also includes: determining whether the height of the upper buffer is greater than the second height based on the target position; if the height of the upper buffer is greater than the second height, releasing the image data of the upper buffer at a third height, and the third height is the height difference between the second height and the height of the upper buffer.

[0023] The second height may be any height between 0.5 screens and 3 screens, and the preferred height is 1 screen.

[0024] In an embodiment of the present application, when the height of the buffer is too high, the data of the loaded images that have been displayed will be reasonably released so that the memory occupied by the image rendering process will not increase with the user's browsing process, which can save the device's resource overhead and further improve the smoothness of image browsing.

[0025] In combination with the first aspect, in a possible implementation manner, the first height is equal to the second height.

[0026] In combination with the first aspect, in a possible implementation method, the current upper buffer, visible area and lower buffer are respectively the first upper buffer, the first visible area and the first lower buffer. When the user's browsing operation is an operation of randomly browsing downward from a first position corresponding to a first picture to a second position corresponding to a second picture, the information of the picture to be displayed corresponding to the target position is determined according to the position information of each of the N belonging categories, including: determining whether the second position exceeds the first lower buffer; if the second position exceeds the first lower buffer, determining the information of the picture to be displayed corresponding to the target position according to the position information of each of the N belonging categories; loading the picture to be displayed according to the information of the picture to be displayed, including: loading the picture to be displayed according to the information of the picture to be displayed, forming a second upper buffer, a second visible area and a second lower buffer corresponding to the second position, and displaying the picture in the second visible area on the screen of the device.

[0027] In an embodiment of the present application, a method for displaying pictures corresponding to random browsing is provided. When the current browsing position of the user exceeds the buffer zone during random browsing, the buffer zone and visible area corresponding to the current browsing position will be re-determined, and the pictures to be displayed will be loaded into the newly determined buffer zone and visible area, thereby realizing random jump browsing of the user.

[0028] In combination with the first aspect, in a possible implementation manner, the method further includes: if the second position exceeds the first lower buffer, releasing the image data of the first upper buffer, the first visible area and the first lower buffer.

[0029] In an embodiment of the present application, when the current browsing position exceeds the buffer zone, it indicates that the images loaded or displayed in the original buffer zone and the original visible area no longer need to be displayed to the user. Therefore, the image data in the original buffer zone and the original visible area can be released so that the memory occupied by the image rendering process does not increase with the user's browsing process, which can save the device's resource overhead and further improve the smoothness of image browsing.

[0030] In a second aspect, a device is provided, which includes modules / units for executing the method of the first aspect or any possible design of the first aspect; these modules / units can be implemented by hardware, or corresponding software can be implemented by hardware.

[0031] In a third aspect, a device is provided, comprising one or more memories and one or more processors, wherein the one or more memories are used to store one or more programs, and when the one or more programs are executed by the one or more processors, the device executes the method in the above-mentioned first aspect or any possible implementation manner of the first aspect.

[0032] According to a fourth aspect, a readable storage medium is provided, in which a program is stored. When the program is executed, the method according to the first aspect or any possible implementation of the first aspect is implemented.

[0033] In a fifth aspect, a chip system is provided, the chip system includes a processor, the processor includes an application processor and a baseband processor, the processor is coupled to a memory, and the processor executes a program stored in the memory to implement any one of the methods described in the first aspect. The chip system may be a single chip or a chip module composed of multiple chips. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 It is a schematic diagram of the structure of a device;

[0035] Figure 2 It is a software structure diagram of a device;

[0036] Figure 3 is a schematic flow chart of a method for displaying a picture;

[0037] Figure 4 This is a schematic diagram of the waterfall flow display method of the picture;

[0038] Figure 5is a schematic flow chart of another method for displaying pictures;

[0039] Figure 6 It is a schematic diagram of the interface corresponding to the two display image formats provided in the embodiment of the present application;

[0040] Figure 7 It is a schematic diagram of the interface corresponding to the three modes of continuously browsing pictures provided in the embodiment of the present application;

[0041] Figure 8 It is a schematic diagram of the interface corresponding to the two random browsing image modes provided in the embodiment of the present application;

[0042] Fig. 9 is a schematic flow chart of a method for displaying a picture provided in an embodiment of the present application;

[0043] Fig.10 This is a schematic diagram of dividing the interface area corresponding to a picture provided in an embodiment of the present application;

[0044] Fig.11 is a schematic flow chart of another method for displaying a picture provided in an embodiment of the present application;

[0045] Fig.12 This is a schematic diagram of changes in the interface area corresponding to a continuous browsing process provided by an embodiment of the present application;

[0046] Fig.13 This is an example diagram of changes in the interface area corresponding to a continuous browsing process provided by an embodiment of the present application;

[0047] Fig.14 A schematic flow chart of another method for displaying a picture provided in an embodiment of the present application is shown;

[0048] Fig.15 This is a schematic diagram of changes in the interface area corresponding to a random browsing process provided in an embodiment of the present application;

[0049] Fig.16 It is a schematic diagram of the functional modules of a device for displaying pictures provided in an embodiment of the present application. DETAILED DESCRIPTION

[0050] The technical solution in the present application will be described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments.

[0051] The technical solution in the embodiment of the present application will be described below in conjunction with the drawings in the embodiment of the present application. In the description of the embodiment of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0052] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this embodiment, unless otherwise specified, "plurality" means two or more.

[0053] The method provided in the embodiments of the present application can be applied to mobile phones, tablet computers, wearable devices, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), and other devices. The embodiments of the present application do not impose any restrictions on the specific types of devices.

[0054] For example, Figure 1 1 shows a schematic diagram of the structure of the device 100. The device 100 may include a processor 110, an internal memory 121, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, a sensor module 180, and a display screen 194. The sensor module 180 may include a touch sensor 180K, etc.

[0055] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the device 100. In other embodiments of the present application, the device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0056] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0057] The controller may be the nerve center and command center of the device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0058] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0059] In some embodiments, the processor 110 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0060] The wireless communication function of the device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0061] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of the antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0062] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied on the device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0063] The modem processor may include a modulator and a demodulator. The modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device, or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0064] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0065] In some embodiments, antenna 1 of device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that device 100 can communicate with the network and other devices through wireless communication technology.

[0066] The device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0067] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0068] The internal memory 121 can be used to store program codes, which include instructions. The processor 110 executes various functional applications and data processing of the device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a picture browsing function), etc. The data storage area can store data (such as picture data, etc.) created during the use of the device 100, etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, etc.

[0069] The touch sensor 180K is also called a "touch panel". The touch sensor 180K can be set on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the device 100, which is different from the position of the display screen 194.

[0070] Figure 2 1 is a software structure diagram of the device 100 of the embodiment of the present application. The layered architecture divides the software into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the Android runtime (Android runtime) and the system library, and the kernel layer. The application layer can include a series of application packages.

[0071] like Figure 2 As shown, the application layer may include a camera, a user interface (UI), third-party applications, etc. Among them, the third-party applications may include, for example, a gallery, a calendar, a map, etc.

[0072] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer may include some predefined functions.

[0073] like Figure 2 As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0074] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc. The content provider is used to store and obtain data and make the data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0075] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. The display interface can be composed of one or more views.

[0076] The notification manager allows applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, the device vibrates, the indicator light flashes, etc.

[0077] Android runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0078] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

[0079] The system library may include multiple functional modules, such as surface manager, media libraries, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0080] The surface manager is used to manage the display subsystem and provide the fusion of two-dimensional and three-dimensional layers for multiple applications.

[0081] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats.

[0082] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0083] A 2D graphics engine is a drawing engine for 2D drawings.

[0084] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver.

[0085] The hardware layer can include various types of sensors, such as Figure 1 The sensor introduced in .

[0086] It should be understood that the technical solutions in the embodiments of the present application can be used in Android, IOS, Hongmeng and other systems.

[0087] The technical solution of the embodiment of the present application can be applied to devices with screens. For example, it can be applied to mobile phones, folding screens, tablets, portable computers, cameras and other devices, and can also be applied to televisions (for example, smart screens), desktop computers and other devices. It can also be applied to other devices with screen display functions, devices in 5G networks, or devices in future evolved public land mobile communication networks (public land mobile networks, PLMNs), etc. This application does not limit this.

[0088] Due to the huge number of massive images, the image data corresponding to the massive images is also huge. At present, how to enable users to browse massive images smoothly is still a technical problem that needs to be solved urgently.

[0089] For example, Figure 3 FIG. 3 is a schematic flow chart of a method 300 for displaying a picture. Figure 3 As shown, the method 300 includes:

[0090] S301: Acquire multiple pictures to be displayed.

[0091] In detail, obtaining multiple pictures to be displayed refers to requesting picture information from a file server. After receiving the request, the server returns the picture address, picture width and height, and picture sorting information of each picture.

[0092] S302: Initialize the current page.

[0093] Initializing the current page here means selecting a certain number of pictures from the multiple pictures obtained to fill the screen.

[0094] S303: while the display page is being dragged, the picture controls and the corresponding pictures are sequentially loaded into the waterfall flow, and the picture controls corresponding to the pictures that are moved out of the screen are recycled.

[0095] Among them, the waterfall flow, also known as the waterfall flow layout, is a website page layout method. It is visually presented as an uneven multi-column layout. As the page scroll bar scrolls down, this layout will continue to load data blocks and append them to the current tail.

[0096] In actual applications, when displaying, it is necessary to load the picture control onto the display page, and then load the corresponding picture according to the picture control. The picture control here refers to a control specifically used to load pictures, and the information it may contain includes background pictures, picture descriptions, etc.

[0097] In this method, since the picture controls corresponding to the pictures that are moved out of the screen are recycled, it can be avoided that too many picture controls are occupied during the waterfall flow display process, thereby reducing the occupation of CPU and memory.

[0098] However, in this method, the pictures are displayed in a waterfall flow, which means that the smoothness of the picture display is still subject to the network speed and the picture loading speed; and the browsing mode of this method is sequential browsing, which requires waiting for the network request to return before further scrolling. The user cannot browse the target picture conveniently, which greatly affects the user experience.

[0099] In order to more clearly understand the above waterfall flow display mode, the following is an example, combined with Figure 4 , which gives a detailed introduction to the waterfall flow display method of pictures.

[0100] like Figure 4 As shown, the waterfall flow is an uneven multi-column layout, and multiple pictures are displayed on the display screen of the device. The sizes of the multiple pictures are inconsistent. The multiple pictures can be, for example, multiple pictures of fixed width and variable height. When the user wants to continue browsing other pictures that are not displayed on the display screen, the user browses the other pictures on the display screen by sliding up and down.

[0101] For example, Figure 5 FIG. 5 is a schematic flow chart of another method 500 for displaying a picture. Figure 5 As shown, the method 500 includes:

[0102] S501: Rendering the list structure of the picture list according to the acquired framework data of the picture list.

[0103] The list structure includes the corresponding relationship between the identifier and position of each picture in the picture list, and the framework data includes the identifier and width and height information of each picture.

[0104] S502: Determine a target location based on the user's operation instruction.

[0105] When browsing a picture list, a user inputs an operation instruction through a device, such as sliding the screen of the device or clicking the screen to browse pictures in the picture list. The location of the picture that the user wants to browse, i.e., the target location, can be determined according to the user's operation instruction.

[0106] S503: According to the list structure, detailed information of the to-be-displayed picture corresponding to the target position is obtained.

[0107] S504: Display the picture to be displayed according to the detailed information.

[0108] The list structure includes the correspondence between the identifier and the position of the picture, so after the above-mentioned target position is determined, the picture to be displayed corresponding to the target position can be determined.

[0109] In this method, the data requested from the server includes information about the frame corresponding to each image, that is, the width and height information, location information, etc. of each photo. The amount of data requested is large, which is not conducive to initial rendering. Moreover, in this method, if the user browses for a long time, as more and more images are loaded, more and more memory will be occupied, which may cause the device to freeze, etc., reducing browsing efficiency.

[0110] Therefore, the above-mentioned methods for displaying pictures all have the problem of low browsing efficiency and cannot enable users to browse massive pictures smoothly.

[0111] In view of this, the present application provides a method, device and medium for displaying pictures. Through this method, device and medium, the position information of each belonging category in N belonging categories can be determined by obtaining all the picture information, and the user can browse pictures randomly based on the position information of each belonging category in the N belonging categories, and the obtained all information only includes the belonging category and the picture value corresponding to each belonging category, and the data volume is small, which can reduce the load of the device and improve the browsing fluency of the picture; taking the time axis display mode of the picture as an example, the obtained all picture information only includes the belonging day and the number of pictures corresponding to each belonging day, and the position information of each belonging day is determined by the obtained all picture data, so that the user can browse pictures continuously and randomly based on the position information of each belonging day, and can also realize the picture dragging to the bottom and the top; and the method can also improve the smoothness of the browsing process by pre-allocating and pre-rendering buffers; in addition, the method can also release the picture data in the saturated buffer based on the browsing direction, thereby reducing the occupation of device memory and CPU resources during the browsing process, and further improving the smoothness of picture browsing.

[0112] The terms used in the following embodiments are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and the appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include expressions such as "one or more", unless there is a clear contrary indication in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one, two or more. The term "and / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist; for example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship.

[0113] References to "one embodiment" or "some embodiments" etc. described in this specification mean that a particular feature, structure or characteristic described in conjunction with the embodiment is included in one or more embodiments of the present application. Thus, the phrases "one embodiment", "some embodiments", "another embodiment", "some other embodiments", etc. appearing in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized.

[0114] In order to more clearly understand the solution of the present application, the relevant terms involved in the embodiments of the present application are first introduced below.

[0115] 1. Massive pictures

[0116] Massive images refer to a huge number of images, such as more than 10,000 images displayed.

[0117] 2. Timeline pictures

[0118] The timeline pictures are placed under the corresponding time titles in chronological order, and the sliding display is achieved using scroll bars and touch screen.

[0119] 3. Scrollbar

[0120] When using software, the scroll bar is a bar that can be scrolled and used to display the remaining interface because the entire interface cannot be displayed. The scroll bar control is generally used in conjunction with other controls.

[0121] It should be understood that the applicable scenarios of the method for displaying pictures provided in the embodiments of the present application are classified display scenarios of pictures, for example: scenes of displaying pictures in a timeline display manner (which can be understood as classification by time), scenes of displaying pictures by location, scenes of displaying pictures by save path, scenes of displaying pictures by picture type, etc., are particularly suitable for the classified display of massive pictures (for example: pictures in the millions).

[0122] In order to more clearly understand the solution of the present application, the following is exemplarily described in combination with Figures 6 to 8 , the application scenario of the present application scheme is schematically illustrated.

[0123] For example, Figure 6 A schematic diagram of the interface corresponding to the two image display modes provided in the embodiment of the present application is shown.

[0124] Figure 6(a) shows a schematic diagram of an interface for displaying pictures in a time axis form provided by an embodiment of the present application, such as Figure 6 As shown in (a), when the pictures are displayed in the form of a timeline, multiple pictures are displayed under the corresponding time bar according to the acquisition time. For example, the five pictures acquired on September 1, 2023 are displayed under the time bar "September 1, 2023"; the three pictures acquired on August 16, 2023 are displayed under the time bar "August 16, 2023"; the four pictures acquired on May 2, 2023 are displayed under the time bar "May 2, 2023". In addition, the user can browse other undisplayed time bars and the pictures under them through browsing operations (such as sliding up and down, scrolling the mouse up and down, scrolling the scroll bar up and down, clicking on a random position of the scroll bar, etc.).

[0125] Figure 6 (b) in the figure shows a schematic diagram of an interface for displaying pictures according to the acquisition location provided in an embodiment of the present application, such as Figure 6 As shown in (b) in the figure, when the pictures are displayed according to the acquisition location, multiple pictures are displayed under the corresponding location columns according to the acquisition location. For example, 5 pictures acquired in Hangzhou are displayed under the location column "Hangzhou"; 3 pictures acquired in Beijing are displayed under the location column "Beijing"; 6 pictures acquired in Xiamen are displayed under the location column "Xiamen". In addition, users can browse other undisplayed location columns and the pictures under them through browsing operations (such as sliding up and down, scrolling the mouse up and down, scrolling the scroll bar up and down, clicking on a random position of the scroll bar, etc.).

[0126] It should be understood that the embodiments of the present application are merely illustrative of the display format of images and do not constitute a limitation on the display format of images to which the scheme of the present application is applicable. The scheme of the present application is applicable to any scenario of displaying images in a classified manner.

[0127] It should also be understood that the embodiment of the present application uses a smart phone as the device for illustration purposes, but this does not constitute any limitation on the devices to which the solution of the present application is applicable. The solution of the present application is applicable to any device with a picture display function, such as tablet computers, laptop computers, smart TVs, smart watches, etc.

[0128] It should also be understood that the embodiments of the present application are applicable to image display scenarios in all applications or web pages that can display images, for example, image display scenarios in video applications, chat applications, gallery applications, network disk applications, browsers, shopping applications, navigation applications, and other applications.

[0129] For example, Figure 7 A schematic diagram of the interface corresponding to three modes of continuously browsing pictures provided in the embodiments of the present application is shown.

[0130] Figure 7(a) in the figure shows a schematic diagram of an interface for continuously browsing pictures on a PC screen provided by an embodiment of the present application. The user can browse pictures continuously by continuously rolling the mouse wheel up and down, or by clicking the "up" control and the "down" control on the keyboard, or by continuously sliding up and down with a stylus or a finger on the touch pad. If the PC screen is a touch screen, the user can also browse pictures continuously by sliding a finger up and down on the screen, such as Figure 7 As shown in (a), in the current display interface of device 700a, multiple pictures are displayed in the form of a timeline. For example, the user can scroll the mouse wheel down to browse pictures after August 16, 2023. The user can also scroll the mouse wheel up to browse pictures before September 1, 2023.

[0131] Figure 7 (b) in the figure shows a schematic diagram of an interface for continuously browsing pictures by sliding a finger up and down on the screen provided in an embodiment of the present application, such as Figure 7 As shown in (b), in the current display interface of device 700b, multiple pictures are displayed in the form of a timeline, and the user can browse other undisplayed pictures by sliding his finger up and down on the screen. For example, the user can slide his finger up on the screen to browse pictures after May 2, 2023, and the user can also slide his finger down on the screen to browse pictures before September 1, 2023.

[0132] Figure 7 (c) in the figure shows a schematic diagram of an interface for continuously browsing pictures by dragging a scroll bar provided in an embodiment of the present application, such as Figure 7 As shown in (c), in the current display interface of the device 700b, multiple pictures are displayed in the form of a timeline, and the user can browse other pictures that are not displayed by dragging the scroll bar slider 701 in the scroll bar on the screen. For example, the user can drag the scroll bar slider 701 downward to browse pictures after May 2, 2023, and the user can also drag the scroll bar slider 701 upward to browse pictures before September 1, 2023.

[0133] The user can drag the scroll bar slider in the scroll bar up and down in the following manner, for example: Figure 7 (c) shows the method of dragging the scroll bar by the user using the finger. When the device 700b is a PC screen, the user can also drag the scroll bar up and down using the mouse, or the user can drag the scroll bar up and down using the touch pad, etc.

[0134] It should be understood that the embodiments of the present application are merely illustrative of a method for continuously browsing pictures, and do not constitute a limitation on the method for continuously browsing pictures to which the scheme of the present application is applicable. The scheme of the present application is applicable to any method for continuously browsing pictures.

[0135] For example, Figure 8 A schematic diagram of an interface corresponding to two random browsing image modes provided in an embodiment of the present application is shown.

[0136] Figure 8 (a) and Figure 8 (b) in the figure shows a schematic diagram of an interface for randomly browsing pictures by randomly clicking on a scroll bar provided in an embodiment of the present application, such as Figure 8 As shown in (a) of FIG. 1 , in the current display interface of the device 800, multiple pictures acquired between May 2, 2023 and September 1, 2023 are displayed in the form of a timeline, and the scroll bar slider in the current scroll bar is at the first position; when the user clicks the second position of the scroll bar, or the user quickly drags the scroll bar slider from the first position to the second position, the display interface of the device 800 is as follows: Figure 8 As shown in (b), in this interface, the scroll slider in the scroll bar is located at the second position, and the display interface displays multiple pictures corresponding to the second position (multiple pictures acquired between December 1, 2022 and April 5, 2023).

[0137] In some embodiments, when a user clicks on the second position of the scroll bar, the user may click on the second position with a finger or a stylus (for example, when the device 800 is a smart phone), or the user may click on the second position using a mouse or a touchpad (for example, when the device 800 is a PC screen); similarly, when a user quickly drags the scroll bar slider from the first position to the second position, the user may quickly drag the scroll bar slider from the first position to the second position with a finger or a stylus (for example, when the device 800 is a smart phone), or the user may quickly drag the scroll bar slider from the first position to the second position using a mouse or a touchpad (for example, when the device 800 is a PC screen).

[0138] Figure 8 (c) in the figure shows a schematic diagram of an interface for randomly browsing pictures by switching floating directories provided in an embodiment of the present application, such as Figure 8 As shown in (c) of FIG. 1 , multiple pictures belong to one of category 1, category 2 and category 3. The current display interface of the device 800 is located at the display interface corresponding to browsing from category 1 to category 2. The user can continuously browse all pictures belonging to category 1, category 2 and category 3 by sliding up and down on the screen or rolling the mouse up and down. If the user is in the following manner: Figure 8Continue browsing downward on the interface shown in (c) in the figure. After the pictures corresponding to category 2 are displayed, the pictures corresponding to category 3 will begin to be displayed on the interface. At this time, the navigation cursor (the black triangle icon in front of the category directory) switches to category 3. Alternatively, the user can also Figure 8 Directly click "Category 3" on the interface shown in (c) to switch the current image display to the image display corresponding to Category 3. At this time, the navigation cursor switches to Category 3.

[0139] It should be understood that the embodiments of the present application are only illustrative of the random browsing method of images, and do not constitute a limitation on the random browsing method of images to which the scheme of the present application is applicable. The scheme of the present application is applicable to any random browsing method of images, for example, displaying one or more images related to a search term by searching.

[0140] For example, Fig. 9 FIG. 9 is a schematic flow chart of a method 900 for displaying a picture provided by an embodiment of the present application. Fig. 9 As shown, it should be understood that the method 900 can be executed by a device or one or more processors inside the device. The method 900 includes:

[0141] S901: Determine the position information of each of N belonging categories according to all the acquired picture information, where N is a positive integer greater than or equal to 1.

[0142] The whole picture information refers to the information of all pictures in the picture library, and the whole picture information includes N belonging categories and N picture values ​​corresponding to the N belonging categories one by one.

[0143] All the pictures in the picture library can be, for example, all the pictures stored in the device's gallery application, for example, all the pictures under a certain picture theme (for example: a user searches for a certain picture theme through a browser, and all the pictures associated with the searched picture theme are searched out), for example, all the pictures stored in the device's cloud disk, for example, all the pictures stored in a certain folder in the device, or multiple pictures existing in other ways, and this application is not limited to this.

[0144] In some embodiments, the determination module in the device determines the location information of each of the N belonging categories based on all the acquired picture information.

[0145] In some embodiments, the above-mentioned location information may be coordinate information.

[0146] In some embodiments, a first coordinate table is generated based on all acquired picture information, and the first coordinate table includes location information of each of the N belonging categories.

[0147] In some embodiments, the N attribution categories have a specific arrangement order. For example, if there are 6 attribution categories in the picture library, when the attribution category is the acquisition date of the picture, the 6 attribution categories are sorted in chronological order.

[0148] Among them, all pictures in the picture library have the same size, that is, all pictures in the picture library have fixed height and fixed width. On this basis, the position information of each of the N belonging categories can be determined according to the size of the picture and all picture information.

[0149] In some embodiments, the attribution category may refer to the attribution time (for example, attribution day, attribution month, attribution year, etc.), attribution location, etc., or may refer to other attribution categories, which is not limited in this application.

[0150] In one example, all the acquired picture information includes 6 categories and 6 picture values ​​corresponding to the 6 categories: 2, 4, 8, 7, 5, 9. The 6 categories can be arranged in a specific order, and the position information of the 6 categories can be determined based on all the picture information.

[0151] In some embodiments, the method further includes the step of obtaining all image information before rendering the image for the first time.

[0152] In one implementation, the device sends a request message to the server, where the request message is used to request to obtain all the picture information; the device receives all the picture information sent by the server.

[0153] S902: In response to a browsing operation of the user, determine a target location.

[0154] In some embodiments, the user's browsing operation can be a continuous browsing operation, such as: the operation of continuously browsing pictures by scrolling the mouse up and down, the operation of continuously browsing pictures by sliding the finger up and down on the screen, the operation of continuously browsing pictures by dragging the scroll bar, the operation of continuously browsing pictures by using the up and down buttons of the keyboard connected to the screen, etc.

[0155] In some embodiments, the user's browsing operation can be a random browsing operation, for example: randomly browsing pictures by randomly clicking on the scroll bar or randomly browsing pictures by switching the floating directory, or it can be an operation of randomly browsing pictures through other classification navigation methods. This application does not limit this.

[0156] Among them, the target position is the position of the picture to be displayed, and the target position includes the starting category, the starting number, the number of pictures to be displayed and the browsing direction. In other words, the target position is used to indicate that C pictures after the Bth picture in category A need to be displayed.

[0157] In an example, the last picture displayed by the current device is the 6th picture in the 3rd category, and the user's downward browsing operation triggers 9 pictures to be displayed. Then, the first browsing information is used to indicate that 9 pictures starting from the 6th picture in the 3rd category need to be displayed, that is, the starting category is the 3rd category, the starting number is 6, the number of pictures to be displayed is 9, and the browsing direction is downward.

[0158] In some embodiments, the determination module in the device determines the target location in response to a browsing operation of the user.

[0159] S903: Acquire information of a to-be-displayed picture corresponding to a target position according to the position information of each of the N classes.

[0160] The information of the pictures to be displayed includes the category corresponding to each picture in the pictures to be displayed, the serial number of each picture in the pictures to be displayed in the corresponding category, and the download address of each picture in the pictures to be displayed.

[0161] In an example, all the image information obtained includes 6 categories and 6 image values ​​corresponding to the 6 categories: 2, 4, 8, 7, 5, 9. The 6 categories can be arranged in a specific order, and the position information of the 6 categories can be determined based on all the image information; the last picture displayed on the current device is the 6th picture in the 3rd category. When the user's downward browsing operation triggers the display of 9 pictures, the target position is determined: the starting category is the 3rd category, the starting number is 6, the number of pictures to be displayed is 9, and the browsing direction is downward; based on the target position and the position information of each of the N categories, the position information of the 3rd category is determined, and then the category, serial number in the category and download address of each of the 9 pictures starting from the 6th picture in the 3rd category are obtained.

[0162] In some embodiments, this step can also be described as: acquiring information of a to-be-displayed picture corresponding to a target position according to position information of each of the N belonging classes.

[0163] In some embodiments, the acquisition module in the device acquires information of the to-be-displayed picture corresponding to the target location according to the location information of each of the N belonging categories.

[0164] S904: Load the picture to be displayed according to the information of the picture to be displayed.

[0165] Among them, the process of loading the pictures to be displayed according to the information of the pictures to be displayed can be: first download the original pictures to be displayed according to the download address of each picture to be displayed, and then load the pictures to be displayed to the corresponding target position according to the belonging category corresponding to each picture to be displayed and the serial number of each picture to be displayed in the corresponding belonging.

[0166] Among them, after the image to be displayed is loaded, it can be further displayed on the device screen; it can also be located in the device buffer first, and then displayed on the device screen in response to the user's browsing operation, depending on the actual browsing situation.

[0167] The interface for downloading the original image information of the image to be displayed may be an http resource request interface. If the images in the gallery are all stored locally, this interface is a local file reading interface.

[0168] In some embodiments, a loading module in the device loads the picture to be displayed according to the information of the picture to be displayed.

[0169] In the embodiment of the present application, since the width and height of each image in the image library are equal and are fixed values, it is only necessary to obtain the image category and the image value corresponding to each category to determine the position information of each category among all categories. During the browsing process of the image, the category to be displayed and its position (which can be described as a full indexing method) can be directly determined based on the user's current browsing information and the position information of each category among all categories, thereby enabling random browsing of the images. Taking browsing through the scroll bar as an example, the function of dragging the scroll bar to any position at any time and displaying the corresponding image can be realized.

[0170] Moreover, before the initial rendering of the image, the information of all the images in the gallery obtained only includes the category and the image value corresponding to each category. There is no need to obtain more detailed image information (such as the size information of each image). This can reduce the load of the device to a large extent and improve the browsing smoothness of the images. For example: assuming that the time span is 10 years, images are obtained every day, and the number of images obtained per day does not exceed 30,000, the maximum data volume of all the image information obtained is only 10×365×2 bytes, about 7K, and the corresponding image carrying capacity can reach millions of images.

[0171] In order to more clearly understand the picture display method provided by the embodiment of the present application to be described below, the following is exemplarily combined with Fig.10 , the division of the interface area corresponding to a picture provided in an embodiment of the present application is introduced.

[0172] like Fig.10As shown, the total interface formed by the arrangement of all pictures in the picture library can be divided into five areas, which are: a top placeholder area, an upper buffer area, a visible area, a lower buffer area and a bottom placeholder area. The visible area is located in the middle of the five areas, the upper buffer area is located above the visible area and adjacent to the visible area, the lower buffer area is located below the visible area and adjacent to the visible area, the top placeholder area is located above the upper buffer area and adjacent to the upper buffer area, and the bottom placeholder area is located below the lower buffer area and adjacent to the lower buffer area.

[0173] Among them, the visible area corresponds to the display screen of the device, which means that the user can see the pictures in the visible area on the display screen of the device. The upper buffer, visible area and lower buffer are areas where pictures need to be loaded (that is, areas where picture data processing and picture rendering are required). The space occupied by the upper buffer, visible area and lower buffer accounts for a very small proportion of the overall space (the overall space refers to the space occupied by all pictures in the picture library), for example, it may be less than 1%. The top placeholder area and the bottom placeholder area account for a very large proportion of the overall space, for example, it may be more than 99%. The ratio of the space occupied by the upper buffer, visible area and lower buffer to the overall space is related to the number of all pictures in the picture library. The larger the number, the smaller the ratio of the space occupied by the buffer, visible area and lower buffer to the overall space. However, the top placeholder area and the bottom placeholder area The content inside is empty, and each of the pictures in the top placeholder and the bottom placeholder is replaced by a cell or other placeholder of the same size as the picture. That is to say, there is no picture data in the top placeholder and the bottom placeholder, and pictures will not be loaded. Pictures will only start to obtain picture information and load pictures when they are included in the upper buffer, visible area or lower buffer. The height of the top placeholder and the bottom placeholder can be dynamically adjusted according to actual conditions. For example, when the user browses from top to bottom, if the height of the upper buffer and the lower buffer is kept unchanged, the upper buffer, visible area and lower buffer will gradually move downward, the height of the top placeholder will gradually increase, and the height of the bottom placeholder will gradually decrease.

[0174] It should be understood that the five areas of top placeholder area, upper buffer area, visible area, lower buffer area and bottom placeholder area are divided based on all the pictures in the picture library. The width and height of all the pictures in the picture library are the same and are fixed values. They can be arranged based on the belonging category and the number of pictures under each belonging category to form an overall interface, that is, the overall interface formed by the five areas of top placeholder area, upper buffer area, visible area, lower buffer area and bottom placeholder area. The width of the overall interface is the width of the device display screen, and the length is related to the total number of pictures. The overall interface includes all the pictures in the picture library. Among all these pictures, only the pictures corresponding to the upper buffer, lower buffer and visible area need to obtain picture data and load pictures (which can also be understood as the need to process pictures). The pictures corresponding to the top placeholder area and the bottom placeholder area do not include picture data and do not need to load pictures. They are just picture placeholders (for example: blank cells with the same size as the picture take up place). Therefore, when the number of all pictures in the picture library remains unchanged, the height of the overall interface formed by the top placeholder area, upper buffer, visible area, lower buffer and bottom placeholder area is fixed. When the user is browsing, the visible area moves up or down on the overall interface with the user's browsing operation, and the corresponding area that needs to obtain picture data and process the picture will also change.

[0175] It should also be understood that since the number of all pictures in the picture library remains unchanged, the height of the total interface formed by the five areas of the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area is fixed, which also makes the range of pictures covered by the scroll bar of the picture browsing interface all the pictures in the picture library, and it is possible to drag all the pictures in the picture library to the bottom and to the top. For example, the last picture of all the pictures in the picture library can be browsed by dragging the scroll bar slider in the scroll bar to the bottom of the scroll bar.

[0176] It should be understood that among the five areas of the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area, only the visible area is visible to the user, and the image in the visible area is displayed on the display screen of the device accordingly.

[0177] It is precisely because the height of the total interface formed by the top placeholder area, upper buffer area, visible area, lower buffer area and bottom placeholder area is fixed, so in actual programming, some control properties can be used to automatically maintain the scroll bar status, without the need for special processing of the scroll bar range, thereby reducing the difficulty of programming and algorithms.

[0178] In some embodiments, common user interface (UI) controls in different systems (such as table, div in H5, List in Duilib, etc.) can be used to divide the overall interface formed by the arrangement of all pictures in the picture library into five areas: top placeholder area, upper buffer area, visible area, lower buffer area, and bottom placeholder area.

[0179] For example, taking the case where a user continuously browses downward, Fig.11 FIG. 1 is a schematic flow chart of another method 1100 for displaying a picture provided by an embodiment of the present application. It should be understood that the method 1100 may be executed by a device or one or more processors within the device. Fig.11 As shown, the method 1100 includes:

[0180] S1101: Determine the position information of each of N belonging categories according to all the acquired picture information, where N is a positive integer greater than or equal to 1.

[0181] The explanation of step S1101 is given in Fig. 9 S901 in the illustrated embodiment has been described in detail, and will not be described again for the sake of brevity. S1102: In response to the user's browsing operation, determine the target location.

[0182] The explanation of step S1102 is given in Fig. 9 S902 in the illustrated embodiment has been described in detail and will not be described again here for the sake of brevity.

[0183] S1103: Determine whether the height of the lower buffer area is less than the first height according to the target position.

[0184] As the user browses continuously downward, the images loaded in the lower buffer enter the visible area one by one and are displayed on the device screen, so the height of the lower buffer gradually decreases, and the images in the visible area enter the upper buffer one by one, so the height of the upper buffer gradually increases.

[0185] In some embodiments, the height of the lower buffer is measured in "screens", and the height of "one screen" corresponds to the height of a visible area. The first height can be, for example, any height between 0.5 screens and 3 screens, with the preferred height being 1 screen. In addition, the first height can also be a height determined based on the user's browsing speed to match the browsing speed. When the browsing speed is slow, the first height is smaller, and when the browsing speed is fast, the first height is larger. This application does not limit this.

[0186] In some embodiments, the determination module in the device determines whether the height of the lower buffer area is less than the first height according to the target position.

[0187] S1104: When the height of the lower buffer is less than the first height, information of the to-be-displayed picture corresponding to the target position is obtained according to the position information of each of the N belonging classes.

[0188] The explanation of step S1104 is given in Fig. 9 S903 in the illustrated embodiment has been described in detail, and will not be described again here for the sake of brevity.

[0189] S1105: Load the picture to be displayed into the lower buffer according to the information of the picture to be displayed.

[0190] Among them, due to the user's downward browsing operation, some pictures in the lower buffer are displayed in the visible area, the height of the lower buffer is reduced, and a new lower buffer is formed after the displayed pictures are loaded. The height of the new lower buffer can make up for the reduced height of the lower buffer.

[0191] In some embodiments, the loading module in the device loads the picture to be displayed in the lower buffer according to the information of the picture to be displayed.

[0192] In some embodiments, when browsing downward, if it is detected that the upper buffer height is greater than the second height, the data of the picture corresponding to the height higher than the second height (the height corresponding to the difference between the second height and the buffer height) will be released, and the occupied height corresponding to the picture of the released picture data will be transferred to the top placeholder area (which can be described as a dynamic release method).

[0193] In some embodiments, the height of the upper buffer is measured in "screens", and the height of "one screen" corresponds to the height of a visible area. The second height can be, for example, any height from 0.5 screens to 3 screens, and the preferred height is 1 screen.

[0194] In some embodiments, the first height and the second height are the same, or the first height is smaller than the second height, for example, the difference between the second height and the height of the initial upper buffer zone is equal to the difference between the height of the initial lower buffer zone and the first height.

[0195] In some embodiments, the height of the newly added lower buffer is the same as the height of the released upper buffer, so that the absolute position of the loaded image in the total interface formed by the top placeholder area, upper buffer, visible area, lower buffer and bottom placeholder area remains unchanged. It can also be understood that the space occupied by the rendered image in the total interface formed by the top placeholder area, upper buffer, visible area, lower buffer and bottom placeholder area remains unchanged.

[0196] The embodiment of the present application may be applicable to a scenario where the height of downward browsing triggered by a single continuous browsing operation of a user is lower than or equal to the height of the lower buffer zone.

[0197] The solution of the embodiment of the present application is particularly suitable for the continuous browsing process of the user. For example, when scrolling down, since the scrolling speed of continuous browsing is relatively slow, after each scrolling operation, if it is detected that the height of the lower buffer is too small, the subsequent information of the picture to be displayed will be obtained, and the picture to be displayed will be completely loaded into the lower buffer. Since the scrolling speed is not fast, it is only necessary to ensure the height of the lower buffer and the interface response speed, so that the user can never scroll out of the lower buffer, so that the visible area can always see the picture smoothly; and the entire browsing process can be promoted while rendering and releasing. Since rendering occupies a large amount of memory, the memory usage in this way will not expand, which plays a role in saving device resources.

[0198] It should be noted that when the page is initially opened, it is necessary to request the first screen of data, that is, the data of the visible area and the lower buffer, while the height of the upper buffer and the top placeholder area are both 0 at this time.

[0199] In the embodiment of the present application, by pre-allocating and pre-rendering the buffer, the picture can be loaded in the buffer in advance. In this way, when the user browses the pictures continuously, the pictures in the buffer are directly displayed in the visible area, which can greatly improve the fluency of the user's browsing of pictures. Moreover, when the height of the buffer is too high, the data of the loaded pictures in the buffer will be reasonably released (which can be described as a dynamic release method) so that the memory occupied by the picture rendering process will not increase with the user's browsing process, which can save the resource overhead of the device and further improve the fluency of picture browsing.

[0200] To understand more clearly Fig.11 The method for displaying a picture provided by the illustrated embodiment is, exemplarily, Fig.12 A schematic diagram showing changes in an interface area corresponding to a continuous browsing process provided in an embodiment of the present application is shown.

[0201] like Fig.12 As shown in (a), the height of the total interface formed by the top placeholder area, upper buffer area, visible area, lower buffer area and bottom placeholder area is fixed. When the user browses downward continuously, the pictures displayed at the top of the visible area gradually enter the upper buffer area, which also makes the upper buffer area expand continuously and its height gradually increase. At the same time, the loaded pictures at the top of the lower buffer area gradually enter the visible area, which also makes the lower buffer area continuously consumed and its height gradually decrease. It can be understood that the speed of the upper buffer area expansion is the same as the speed of the lower buffer area consumption, that is, the height of the upper buffer area increases and the height of the lower buffer area decreases at the same time.

[0202] like Fig.12As shown in (b), when the height of the lower buffer is reduced to less than the first height, the image information of the to-be-displayed image corresponding to the target position is obtained according to each of the N belonging categories. After the to-be-displayed image is loaded, a new buffer is formed, and the height of the corresponding bottom placeholder area is reduced, and the reduced height of the bottom placeholder area is equal to the height of the new buffer; at the same time, when the height of the upper buffer increases to greater than the second height, the upper buffer of a certain height is released, and the height of the corresponding top placeholder area is increased, and the increased height of the top placeholder area is equal to the height of the released upper buffer. In some embodiments, the height of the released upper buffer is the same as the height of the newly added buffer, which makes the total height of the upper buffer, the visible area and the lower buffer unchanged; and the increased height of the top placeholder area is the same as the reduced height of the bottom placeholder area, which also makes the height of the total interface formed by the top placeholder area, the upper buffer, the visible area, the lower buffer and the bottom placeholder area unchanged, which ultimately makes the range of the scroll bar corresponding to the picture display page correspond to all the pictures in the picture library, and the user can browse the corresponding picture at any position by dragging or clicking the scroll bar, and the user can drag to the bottom (browse the last picture in all the pictures in the picture library) and drag to the top (browse the first picture in all the pictures in the picture library).

[0203] In some embodiments, the first height and the second height are the same, or the first height is smaller than the second height, for example, the difference between the second height and the height of the initial upper buffer zone is equal to the difference between the height of the initial lower buffer zone and the first height.

[0204] In some embodiments, the space outside the upper buffer, the visible area, and the lower buffer, that is, the space in the top placeholder area and the bottom placeholder area, can be replaced by a default image instead of an actual image. In this way, even in a poor network environment, users can easily navigate to the location they want to browse, which can improve the browsing fluency.

[0205] For example, Fig.13 An example diagram showing changes in the interface area corresponding to a continuous browsing process provided by an embodiment of the present application is shown.

[0206] like Fig.13As shown in (a) in the figure, all the pictures in the picture library include 35 pictures corresponding to 6 categories (each category corresponds to 2, 4, 8, 7, 5, and 9 pictures respectively), and the pictures under each category are arranged in a row of 3 pictures. The obtained picture information includes 6 categories and 6 picture values ​​corresponding to the 6 categories: 2, 4, 8, 7, 5, and 9. The 6 categories can be arranged in a specific order. The 35 pictures corresponding to the 6 categories are distributed in 5 areas: the top placeholder area, the upper buffer area, the visible area, the lower buffer area, and the bottom placeholder area. Among them, since the first picture in the first category is in the upper buffer area, the height of the corresponding top placeholder area is 0 at this time. According to all The picture information can determine the position information of the six categories in the overall interface (the overall interface formed by the five areas of the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area); the pictures displayed in the current visible area are the first picture in the second category to the sixth picture in the third category (indicated by pure black filling), the current upper buffer area is loaded with the first picture in the first category to the second picture in the first category (indicated by oblique line filling), the current lower buffer area is loaded with the seventh picture in the third category to the sixth picture in the fourth category (indicated by oblique line filling), and the current bottom placeholder area has the seventh picture in the fourth category to the ninth picture in the sixth category (indicated by blank filling); such as Fig.13 As shown in (b) in FIG. 1 , when the user performs a downward browsing operation, so that the current visible area presents a display interface of the first picture in the third category to the third picture in the fourth category, then the height of the upper buffer increases by the height occupied by the first picture in the second category to the fourth picture in the second category, and the height of the lower buffer decreases by the height occupied by the seventh picture in the third category to the third picture in the fourth category;

[0207] It should be understood that: Fig.13 (a) and Fig.13 In the total interface of all pictures shown in (b) of FIG. 1 , the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area are included. Since the first picture of all pictures (i.e., the first picture in the first category) is in the upper buffer area, the height of the top placeholder area is 0 (in Fig.13 (a) and Fig.13 In (b), the line indicates the interface area with a height of 0. As the user browses downward, when the image data of some loaded images in the upper buffer is released, the corresponding placeholder heights of these released loaded images are transferred to the top placeholder area, and the height of the top placeholder area increases (e.g. Fig.13 , as shown in (c) in the figure).

[0208] Similarly, when the first picture of all pictures is in the visible area (for example, when the user drags the scroll bar slider in the scroll bar in the display interface of the device display to the top), the heights of the top placeholder area and the upper buffer are both 0.

[0209] Similarly, when the last picture of all pictures is in the visible area (for example, when the user drags the scroll bar slider in the scroll bar in the display interface of the device display to the bottom), the heights of the bottom placeholder area and the bottom buffer are both 0.

[0210] Similarly, when the last picture of all pictures is in the lower buffer, the height of the bottom placeholder area is 0.

[0211] like Fig.13 As shown in (c), if the height of the lower buffer is less than the first height at this time, the target position is determined to be "the 4 pictures starting from the 6th picture in the 4th belonging category", and then the information of the picture to be displayed corresponding to the target position is obtained according to the position information of each of the 6 belonging categories, that is, the information of the 7th picture in the 4th belonging category to the 3rd picture in the 5th belonging category, and the 7th picture in the 4th belonging category to the 3rd picture in the 5th belonging category are loaded according to the information of the 7th picture in the 4th belonging category to the 3rd picture in the 5th belonging category to form a newly added lower buffer. Correspondingly, the height of the bottom placeholder area is reduced by the height of the newly added lower buffer, and if the height of the upper buffer is greater than the second height at this time (here taking the height of 2 rows of pictures as an example), the picture data corresponding to the excess height is released, that is, the picture data corresponding to the 1st picture in the 1st belonging category to the 2nd picture in the 1st belonging category is released, and the corresponding pictures occupy the top placeholder area in the form of cells of the same size.

[0212] For example, a user randomly browses downward from the position corresponding to the first picture to the position corresponding to the second picture. Fig.11 The embodiments shown are in parallel, Fig.14 FIG. 1 is a schematic flow chart of another method 1400 for displaying a picture provided by an embodiment of the present application. It should be understood that the method 1400 may be executed by a device or one or more processors within the device. Fig.14 As shown, the method 1400 includes:

[0213] S1401 to S1402 and Fig. 9 S901 to S902 in the illustrated embodiment are the same and will not be described again for the sake of brevity.

[0214] S1403: Determine whether the position corresponding to the second picture exceeds the first lower buffer.

[0215] Before the user performs a browsing operation, the corresponding upper buffer is the first upper buffer, the corresponding lower buffer is the second lower buffer, and the corresponding visible area is the first visible area.

[0216] In some embodiments, the position corresponding to the first image is the position of the last image displayed on the device display before the browsing operation is performed in the total interface formed by the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area, that is, the position of the last image in the first visible area in the total interface formed by the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area; the position corresponding to the second image is the position of the last image displayed on the device display after the browsing operation is performed in the total interface formed by the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area, that is, the position of the last image in the second visible area in the total interface formed by the top placeholder area, the upper buffer area, the visible area, the lower buffer area and the bottom placeholder area. In some embodiments, the determination module in the device determines whether the position corresponding to the second image exceeds the first lower buffer area.

[0217] S1404: When the position corresponding to the second image exceeds the first lower buffer, the image data of the first upper buffer, the first visible area and the first lower buffer are released, and information of the image to be displayed corresponding to the target position is obtained based on the position information of each of the N belonging categories.

[0218] Among them, after the image data is released, the corresponding position is only a placeholder for the image.

[0219] In some embodiments, a release module in the device releases the image data of the first upper buffer, the first visible area and the first lower buffer when the current browsing position exceeds the first lower buffer, and an acquisition module in the device acquires information of the image to be displayed corresponding to the target position based on the position information of each of the N belonging categories.

[0220] S1405: Load the picture to be displayed according to the information of the picture to be displayed, form a second upper buffer, a second visible area, and a second lower buffer corresponding to the position corresponding to the second picture, and display the picture in the second visible area on the screen of the device.

[0221] The embodiments of the present application may be applicable to random browsing scenarios of users, for example.

[0222] In some embodiments, a loading module in the device loads the picture to be displayed according to the information of the picture to be displayed, forming a second upper buffer, a second visual area and a second lower buffer corresponding to the position corresponding to the second picture, and the display module of the device displays the picture in the second visual area on the screen of the device.

[0223] In the embodiment of the present application, by pre-allocating and pre-rendering the buffer, the picture can be loaded in the buffer in advance. In this way, when the user browses the pictures continuously, the pictures in the buffer are directly displayed in the visible area, which can greatly improve the fluency of the user's browsing of pictures. Moreover, when the height of the buffer is too high, the data of the loaded pictures in the buffer will be reasonably released (which can be described as a dynamic release method) so that the memory occupied by the picture rendering process will not increase with the user's browsing process, which can save the resource overhead of the device and further improve the fluency of picture browsing.

[0224] In some embodiments, the space outside the upper buffer, the visible area, and the lower buffer, that is, the space of the top placeholder area and the bottom placeholder area, can be replaced by a default image instead of the actual image as the momentary visible area. In this way, even in a poor network environment, users can easily navigate to the location they want to browse, which can improve the browsing fluency.

[0225] In the embodiment of the present application, when the user randomly drags in a certain direction, the actual picture can be replaced by a default picture as the instantaneous visible area, thereby achieving a "leap" browsing effect. When the user finally finds the category he wants, he only needs to pause slightly to see the specific picture data, which not only enables the user to browse the pictures randomly, but also enables smooth browsing of the pictures.

[0226] To understand more clearly Fig.14 The method for displaying a picture provided by the illustrated embodiment is, exemplarily, Fig.15 A schematic diagram showing changes in an interface area corresponding to a random browsing process provided in an embodiment of the present application is shown.

[0227] like Fig.15 As shown in (a) in FIG. 1 , the screen of the device currently displays an image corresponding to the first visible area (corresponding to the first position). When the user switches the scroll bar slider in the scroll bar of the display interface of the device from the first position to the second position (for example, the user can switch by clicking the second position or by dragging the scroll bar slider to the second position), the corresponding interface area changes as shown in FIG. Fig.15 As shown in (b) of Fig.15As can be seen from (b), when the user switches the scroll bar slider in the scroll bar of the display interface of the device from the first position to the second position, since the browsing position corresponding to the second position exceeds the first buffer, the device releases the image data in the first upper buffer, the first visible area and the first lower buffer corresponding to the first position, and obtains the information of the image to be displayed corresponding to the target position according to the position information of each of the N belonging categories, and then loads the image to be displayed according to the information of the image to be displayed, forming a second upper buffer, a second visible area and a second lower buffer corresponding to the second position, and the image in the second visible area is displayed through the display screen of the device.

[0228] In some embodiments, when the user randomly drags within the page, the page will first display the category and image placeholder, and the page will not display the image until the image to be displayed is obtained.

[0229] For example, Fig.16 FIG. 1 is a schematic diagram showing the functional modules of a device 1600 provided in an embodiment of the present application. Fig.16 As shown, the device 1600 includes:

[0230] The determination module 1610 is used to determine the position information of each of N belonging categories according to the acquired all picture information, where N is a positive integer greater than or equal to 1.

[0231] The whole picture information refers to the information of all pictures in the picture library, and the whole picture information includes N belonging categories and N picture values ​​corresponding to the N belonging categories one by one.

[0232] In some embodiments, the device 1600 further includes a generating module for generating a first coordinate table according to all acquired picture information, wherein the first coordinate table includes location information of each of the N belonging categories.

[0233] In some embodiments, the N attribution categories have a specific arrangement order. For example, if there are 6 attribution categories in the picture library, when the attribution category is the acquisition date of the picture, the 6 attribution categories are sorted in chronological order.

[0234] Among them, all pictures in the picture library have the same size, that is, all pictures in the picture library have fixed height and fixed width. On this basis, the position information of each of the N belonging categories can be determined according to the size of the picture and all picture information.

[0235] In some embodiments, the attribution category may refer to the attribution time (for example, attribution day, attribution month, attribution year, etc.), attribution location, etc., or may refer to other attribution categories, which is not limited in this application.

[0236] In one example, all the acquired image information includes 6 categories and 6 image values ​​corresponding to the 6 categories: 2, 4, 8, 7, 5, 9. The 6 categories can be arranged in a specific order, and the determination module 1610 can determine the position information of the 6 categories based on all the image information.

[0237] In some embodiments, the device further includes an acquisition module 1620 for acquiring all image information before rendering the image for the first time.

[0238] The determination module 1610 is further configured to determine a target location in response to a browsing operation of the user.

[0239] In some embodiments, the user's browsing operation can be a continuous browsing operation, such as: the operation of continuously browsing pictures by scrolling the mouse up and down, the operation of continuously browsing pictures by sliding the finger up and down on the screen, the operation of continuously browsing pictures by dragging the scroll bar, the operation of continuously browsing pictures by using the up and down buttons of the keyboard connected to the screen, etc.

[0240] In some embodiments, the user's browsing operation can be a random browsing operation, for example: randomly browsing pictures by randomly clicking on the scroll bar or randomly browsing pictures by switching the floating directory, or it can be an operation of randomly browsing pictures through other classification navigation methods. This application does not limit this.

[0241] Among them, the target position is the position of the picture to be displayed, and the target position includes the starting category, the starting number, the number of pictures to be displayed and the browsing direction. In other words, the target position is used to indicate that C pictures after the Bth picture in category A need to be displayed.

[0242] In an example, the last picture displayed by the current device is the 6th picture in the 3rd category, and the user's downward browsing operation triggers 9 pictures to be displayed. Then, the first browsing information is used to indicate that 9 pictures starting from the 6th picture in the 3rd category need to be displayed, that is, the starting category is the 3rd category, the starting number is 6, the number of pictures to be displayed is 9, and the browsing direction is downward.

[0243] The acquisition module 1620 is used to acquire information of a to-be-displayed picture corresponding to a target position according to position information of each of the N belonging classes.

[0244] The information of the pictures to be displayed includes the category corresponding to each picture in the pictures to be displayed, the serial number of each picture in the pictures to be displayed in the corresponding category, and the download address of each picture in the pictures to be displayed.

[0245] The device 1600 may further include a loading module, configured to load the picture to be displayed according to the information of the picture to be displayed.

[0246] The display module 1630 is used to display the picture in the visible area on the display screen of the device.

[0247] In the embodiment of the present application, since the width and height of each image in the image library are equal and are fixed values, it is only necessary to obtain the image category and the image value corresponding to each category to determine the position information of each category among all categories. During the browsing process of the image, the category to be displayed and its position (which can be described as a full indexing method) can be directly determined based on the user's current browsing information and the position information of each category among all categories, thereby enabling random browsing of the images. Taking browsing through the scroll bar as an example, the function of dragging the scroll bar to any position at any time and displaying the corresponding image can be realized.

[0248] Moreover, before the initial rendering of the image, the information obtained for all the images in the gallery only includes the number of categories and the image values ​​corresponding to each category. There is no need to obtain more detailed image information (such as the size information of each image). This can reduce the load on the device to a great extent and improve the smoothness of image browsing.

[0249] One or more of the modules or units described herein can be implemented by software, hardware, or a combination of the two. When any of the above modules or units are implemented in software, the software exists in the form of a program and is stored in a memory, and a processor can be used to execute the program and implement the above method flow. The processor may include, but is not limited to, at least one of the following: a central processing unit (CPU), a microprocessor, a digital signal processor (DSP), a microcontroller (MCU), or an artificial intelligence processor and other types of computing devices that run software, each of which may include one or more cores for executing software instructions to perform operations or processing. The processor may be built into an SoC (system on chip) or an application specific integrated circuit (ASIC), or it may be an independent semiconductor chip. In addition to the core used to execute software instructions for operations or processing in the processor, it may further include necessary hardware accelerators, such as field programmable gate arrays (FPGA), PLDs (programmable logic devices), or logic circuits that implement dedicated logic operations.

[0250] When the modules or units described in this document are implemented in hardware, the hardware can be any one or any combination of a CPU, a microprocessor, a DSP, an MCU, an artificial intelligence processor, an ASIC, a SoC, an FPGA, a PLD, a dedicated digital circuit, a hardware accelerator, or a non-integrated discrete device, which can run the necessary software or be independent of the software to execute the above method flow.

[0251] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for displaying a picture, applied to a device, characterized in that: The method comprises: Determine, according to all the acquired picture information, the position information of each of N belonging categories, where N is a positive integer greater than or equal to 1, and the all the picture information includes the N belonging categories and N picture values ​​corresponding to the N belonging categories one by one; In response to a browsing operation by a user, determining a target location; According to the position information of each of the N belonging categories, acquiring information of the picture to be displayed corresponding to the target position; The picture to be displayed is loaded according to the information of the picture to be displayed.

2. The method according to claim 1, characterized in that Before determining the position information of each of the N belonging categories according to all the acquired picture information, the method further includes: Sending a request message to the server, wherein the request message is used to obtain all the image information; Obtain all the picture information sent by the server.

3. The method according to claim 1 or 2, characterized in that: The pictures to be displayed corresponding to the target position are C pictures starting from the Bth picture corresponding to the first belonging category and heading toward the first browsing direction, wherein the N belonging categories include the first belonging category, and B and C are positive integers greater than or equal to 1.

4. The method according to any one of claims 1 to 3, characterized in that The information of the pictures to be displayed includes the category corresponding to each picture in the pictures to be displayed, the serial number of each picture in the pictures to be displayed in the corresponding category, and the download address of each picture in the pictures to be displayed.

5. The method according to any one of claims 1 to 4, characterized in that All the pictures have the same size, and the overall interface formed by all the pictures is divided into a top placeholder area, an upper buffer area, a visible area, a lower buffer area and a bottom placeholder area which are connected end to end in sequence, wherein the top placeholder area and the bottom placeholder area are picture placeholder areas, the upper buffer area, the visible area and the lower buffer area are picture loading areas, and the pictures in the visible area are displayed on the screen of the device.

6. The method according to claim 5, characterized in that When the browsing operation of the user is a downward continuous browsing operation, the loaded pictures in the lower buffer are sequentially displayed in the visible area, and the pictures displayed in the visible area are sequentially displayed in the upper buffer, and the information of the picture to be displayed corresponding to the target position is determined according to the position information of each of the N belonging categories, including: Determine whether the height of the lower buffer area is less than a first height according to the target position; If the height of the lower buffer is less than the first height, determining information of the to-be-displayed picture corresponding to the target position according to the position information of each of the N belonging classes; The step of loading the picture to be displayed according to the information of the picture to be displayed comprises: The picture to be displayed is loaded into the lower buffer according to the information of the picture to be displayed.

7. The method according to claim 5 or 6, characterized in that: The method further comprises: Determine whether the height of the upper buffer zone is greater than a second height according to the target position; If the height of the upper buffer is greater than the second height, the picture data of the upper buffer at a third height is released, and the third height is a height corresponding to the difference between the second height and the height of the upper buffer.

8. The method according to claim 7, characterized in that The first height is equal to the second height.

9. The method according to claim 5, characterized in that The current upper buffer, visible area and lower buffer are respectively the first upper buffer, the first visible area and the first lower buffer. When the browsing operation of the user is an operation of randomly browsing downward from a first position corresponding to a first picture to a second position corresponding to a second picture, the information of the picture to be displayed corresponding to the target position is determined according to the position information of each of the N belonging categories, including: determining whether the second position exceeds the first lower buffer zone; If the second position exceeds the first lower buffer, determining information of the to-be-displayed picture corresponding to the target position according to the position information of each of the N belonging categories; The step of loading the picture to be displayed according to the information of the picture to be displayed comprises: The picture to be displayed is loaded according to the information of the picture to be displayed, a second upper buffer, a second visible area and a second lower buffer corresponding to the second position are formed, and the picture in the second visible area is displayed on the screen of the device.

10. The method according to claim 9, characterized in that The method further comprises: If the second position exceeds the first lower buffer, the image data of the first upper buffer, the first visible area and the first lower buffer are released.

11. A device, characterized in that: include: one or more processors; one or more memories; and one or more programs, wherein the one or more programs are stored in the one or more memories, and when the one or more programs are executed by the one or more processors, the device performs the method as claimed in any one of claims 1 to 10.

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

Images