Image loading method, device and storage medium

Abstract

The present application discloses a method, device and storage medium for loading an image, and relates to the field of data processing technology. The method for loading an image comprises: a front-end interface determines a scrolling direction of a window of a current frame based on a scrolling event; predicts at least one newly added target image corresponding to the window of the next frame according to the scrolling direction of the window; if the target image is not in a cache module, requests the target image from a back-end server, and caches the target image to the cache module; if it is detected that the target image enters a viewport, obtains the target image from the cache module; and displays the target image in the viewport, thereby improving the efficiency of loading images on the EPG interface.

Description

Technical Field

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

[0002] In the IPTV (Internet Protocol Television) service, the EPG (Electronic Program Guide) interface is the main way for users to obtain program information. As the content becomes increasingly rich, the number of pictures displayed on the EPG interface is also increasing. Therefore, the EPG interface needs to be able to respond to user operations in a timely manner and quickly load and display pictures.

[0003] Currently, the EPG interface adopts an instant loading method to respond to user operations to load and display pictures, that is, when the user browses to a certain interface, the picture corresponding to the interface is displayed.

[0004] However, when there are a large number of images displayed on the interface, the instant loading method will cause the page loading speed to slow down, and the image display will require more waiting time.

[0005] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0006] The main purpose of this application is to provide a picture loading method, device and storage medium, aiming to solve the technical problem that the EPG interface is slow when loading multiple pictures.

[0007] To achieve the above purpose, the present application proposes a picture loading method, which is applied to a picture loading system. The picture loading system includes a front-end interface and a cache module. The picture loading method includes:

[0008] The front-end interface determines the scrolling direction of the window of the current frame based on the scrolling event;

[0009] Predicting at least one target image to be added to the next frame window according to the window scrolling direction;

[0010] If the target image is not in the cache module, request the target image from the backend server and cache the target image in the cache module;

[0011] If it is detected that the target image enters the viewport, the target image is obtained in the cache module;

[0012] Display the target image in the viewport.

[0013] In one embodiment, the step of predicting at least one newly added target picture corresponding to the next frame window according to the window scrolling direction includes:

[0014] According to the design interface, determine the undisplayed images in the current frame in the scrolling direction of the window;

[0015] The image to be included in the viewport among the undisplayed images is used as the target image.

[0016] In one embodiment, after the step of requesting the target image from the backend server and caching the target image in the cache module, the method further includes:

[0017] If the target image fails to be cached, the cache module sends a prompt message of cache failure to the front-end interface;

[0018] If it is detected that the target image enters the viewport and the front-end interface receives the prompt information, the target image obtained from the backend server is displayed in the viewport.

[0019] In one embodiment, before the step of detecting that the target image enters the viewport, the method further includes:

[0020] Use the intersection observer to determine whether the target image enters the viewport;

[0021] If the intersection area between the target image and the viewport reaches a preset threshold, it is determined that the target image enters the viewport.

[0022] In one embodiment, the step of displaying the target image in the viewport includes:

[0023] Display a placeholder for the target image in the viewport;

[0024] Use Cascading Style Sheets to smoothly transition from the placeholder to the target image.

[0025] In one embodiment, before the step of displaying the target image in the viewport, the method further includes:

[0026] Obtain device performance and / or network status;

[0027] Determine the quality parameters of the target image according to device performance and / or network conditions;

[0028] Select the target image based on the quality parameter.

[0029] In one embodiment, the step of obtaining the performance indicator and / or the network indicator includes:

[0030] The front-end interface uses built-in tools to obtain device performance; and / or,

[0031] The front-end interface uses the network information application programming interface to obtain network status.

[0032] In one embodiment, the image loading system further includes a backend server, and the image loading method includes:

[0033] The backend server obtains the list of images to be processed;

[0034] Use an image processing algorithm to compress the images corresponding to the list of images to be processed to obtain compressed images to be processed;

[0035] Store the compressed image to be processed in the specified path;

[0036] Generate a unique identifier and metadata for each compressed image to be processed, and save the identifier and metadata in a database.

[0037] In addition, to achieve the above-mentioned purpose, the present application also proposes a picture loading device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the picture loading method as described above.

[0038] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium. A computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the image loading method as described above are implemented.

[0039] The present application determines the scrolling direction of the window of the current frame based on the scrolling event through the front-end interface; predicts at least one newly added target image corresponding to the next frame window according to the window scrolling direction; if the target image is not in the cache module, requests the target image from the back-end server, and caches the target image to the cache module; if it is detected that the target image enters the viewport, obtains the target image in the cache module; displays the target image in the viewport, so that the EPG interface can load the newly added image in advance before the next frame window arrives and save it in the local cache, thereby reducing the waiting time for the EPG interface to call the newly added image of the next frame window and improving the efficiency of EPG interface image loading. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0041] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0042] Figure 1 A schematic diagram of the process flow provided for the first embodiment of the image loading method of the present application;

[0043] Figure 2This is a brief flowchart of the image loading method of this application;

[0044] Figure 3 A flowchart of the second embodiment of the image loading method of the present application is provided;

[0045] Figure 4 A schematic diagram of a process flow provided for the third embodiment of the image loading method of the present application;

[0046] Figure 5 A flowchart of the fourth embodiment of the image loading method of the present application is provided;

[0047] Figure 6 A flowchart of the fifth embodiment of the image loading method of the present application is provided;

[0048] Figure 7 A flowchart of the sixth embodiment of the image loading method of the present application is provided;

[0049] Figure 8 A flowchart of the seventh embodiment of the image loading method of the present application is provided;

[0050] Fig. 9 A flowchart of the eighth embodiment of the image loading method of the present application is provided;

[0051] Fig.10 Schematic diagram of the device structure of the hardware operating environment involved in the image loading method in the embodiment of the present application.

[0052] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0053] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0054] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0055] At present, in IPTV services, the EPG interface is the main way for users to obtain program information. With the increasing content, the number of pictures displayed on the EPG interface is also increasing. Therefore, the EPG interface needs to be able to respond to user operations in a timely manner and load and display pictures quickly. The EPG interface uses instant loading to respond to user operations and load and display pictures, that is, when the user browses to a certain interface, the picture corresponding to the interface is displayed. However, when the number of displayed pictures on the interface is large, the instant loading method will cause the page loading speed to slow down, and the picture display will require more waiting time.

[0056] In response to the above problems, the main solution of this application is: the front-end interface determines the scrolling direction of the window of the current frame based on the scrolling event; predicts at least one new target image corresponding to the next frame window according to the window scrolling direction; if the target image is not in the cache module, request the target image from the back-end server and cache the target image to the cache module; if it is detected that the target image enters the viewport, obtain the target image in the cache module; and display the target image in the viewport.

[0057] The solution of the present application introduces a lazy loading mechanism, which predicts the new target image corresponding to the next frame window by monitoring the scrolling event of the window, loads the new target image into the local cache in advance, and directly displays the new target image in the local cache on the viewport when the next frame window arrives, thereby reducing the waiting time for displaying images on the EPG interface and improving the efficiency of loading images on the EPG interface.

[0058] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, a picture loading system, etc. The following takes the picture loading system as an example to illustrate this embodiment and the following embodiments.

[0059] It should be noted that the application scenarios of this embodiment include but are not limited to IPTV platforms, mobile platforms, OTT (Over The Top, OTT services) and APK (Android Package, Android operating system application package) platforms, smart home and Internet of Things scenarios, as well as public places and commercial display scenarios.

[0060] It should be noted that the image loading system of this embodiment includes a front-end interface, a back-end server, a cache module and a database.

[0061] Based on this, the present application embodiment provides a method for loading an image. Figure 1 , Figure 1 This is a flow chart of the first embodiment of the image loading method of the present application.

[0062] In this embodiment, the image loading method includes steps S10 to S50:

[0063] Step S10: the front-end interface determines the scrolling direction of the window of the current frame based on the scrolling event.

[0064] It should be noted that the scrolling event is an event triggered when the user scrolls the EPG interface. The scrolling direction of the window is divided into four directions: up, down, left and right.

[0065] In a feasible implementation manner, according to an event listener installed in the front-end interface, a scrolling event is detected to determine the scrolling direction of the window of the current frame.

[0066] Exemplarily, an event listener is added to the scrolling window, and the sliding position difference before and after the scrolling is completed is obtained according to the event listener, and then the scrolling direction of the window is determined according to the sliding position difference.

[0067] In a feasible implementation of this embodiment, the EPG interface is applied to a mobile device, and the scrolling event can be triggered by the user touching the display screen of the mobile device. By adding an event listener to the scrolling window, taking a point on the viewport as a reference point, recording the position coordinates of the reference point at the beginning of the touch, X1, Y1, and the position coordinates of the reference point at the end of the touch, X2, Y2, and determining the scrolling direction of the window by calculating the difference between the position coordinates of the reference point at the beginning of the touch and the position coordinates at the end of the touch, if the horizontal sliding difference is recorded as X2-X1 and the vertical sliding difference is recorded as Y2-Y1, then when the absolute value of the horizontal sliding difference is greater than the absolute value of the vertical sliding difference and the horizontal sliding difference is a positive number, it is determined that the window is scrolled to the right; when the absolute value of the horizontal sliding difference is greater than the absolute value of the vertical sliding difference and the horizontal sliding difference is a negative number, it is determined that the window is scrolled to the left; when the absolute value of the horizontal sliding difference is less than the absolute value of the vertical sliding difference and the vertical sliding difference is a negative number, it is determined that the window is scrolled up; when the absolute value of the horizontal sliding difference is less than the absolute value of the vertical sliding difference and the vertical sliding difference is a positive number, it is determined that the window is scrolled down.

[0068] In another feasible implementation of this embodiment, when the EPG interface is applied on a display device that cannot be controlled by touch, an event listener is set to monitor the scrolling position of the scrolling window, and the difference between the position when the scrolling starts and when the scrolling ends is calculated to determine the scrolling direction of the window.

[0069] Step S20, predicting at least one newly added target picture corresponding to the next frame window according to the window scrolling direction.

[0070] It should be noted that the next frame window refers to the window that will appear in the viewport corresponding to the window scrolling direction, and the target image refers to the image that appears in the next frame window but does not exist in the viewport of the current frame. The number of target images is not limited and is at least one.

[0071] In a feasible implementation, based on the scrolling direction of the window, the picture that will appear in the next frame window but is not in the viewport is used as a newly added target picture.

[0072] Step S30: If the target image is not in the cache module, request the target image from the backend server and cache the target image to the cache module.

[0073] It should be noted that the cache module is a local cache of the device where the front-end interface is located.

[0074] It should be noted that if the target image already exists in the cache module, there is no need to request the target image from the backend server.

[0075] In a feasible implementation manner, if the request to the cache module for the target image fails, the target image is requested from the backend server, and the acquired target image is cached in the cache module.

[0076] In this embodiment, if the target image is not in the cache module, the front-end interface sends a request to obtain the target image to the back-end server. After obtaining the target image from the back-end server, the target image is cached in the cache module to improve the subsequent retrieval efficiency of the target image and reduce the waiting time for displaying the target image.

[0077] In addition, whether the target image is in the cache module can be determined through the browser's own cache mechanism or through a query on the backend server.

[0078] Step S40: if it is detected that the target image enters the viewport, the target image is obtained in the cache module.

[0079] It should be noted that in the browser scenario, using a cross observer to detect whether an image has entered the viewport has higher performance and a better user experience than the traditional method of monitoring scroll events and calculating element positions.

[0080] In addition, it should be noted that the viewport refers to the visible area of ​​the EPG interface.

[0081] In a feasible implementation, after the target image enters the viewport, if the visible area of ​​the target image reaches a preset threshold, the target image is obtained in the cache module, wherein the preset threshold may be a single value or an array of values.

[0082] In this embodiment, the preset threshold is 0. As long as any area on the target image enters the viewport, it is determined that the target image has entered the viewport, and the target image is obtained in the cache module.

[0083] Step S50, displaying the target image in the viewport.

[0084] In a feasible implementation manner, the target image obtained from the cache module is displayed in the viewport.

[0085] In this embodiment, the target image is obtained from the cache module according to the image number of the target image and displayed in the viewport.

[0086] In this embodiment, by monitoring the scrolling direction of the window, the newly added target image that will appear in the viewport is predicted, the newly added target image is requested from the back-end server in advance and stored in the cache module, and when the target image enters the viewport, the corresponding target image in the cache module is called to be displayed on the viewport. By predicting the target image in advance and storing the target image in the cache module, the loading time of the EPG interface when displaying the image can be reduced, and the efficiency of displaying the image on the EPG interface can be improved.

[0087] For example, to help understand the implementation process of the image loading method obtained by combining this embodiment with the above-mentioned embodiment 1, please refer to Figure 2 , Figure 2 A brief flowchart of a method for loading an image is provided, specifically:

[0088] When the user opens the EPG interface, on the one hand, the front-end interface will request the list of pictures in the current window. If the pictures corresponding to the above picture list exist in the local cache, the front-end interface will directly load the pictures corresponding to the above list from the local cache and display them on the interface; if the pictures corresponding to the above picture list do not exist in the local cache, the front-end interface will request the back-end server to download the pictures corresponding to the above list through the network, and save the pictures corresponding to the above list to the local cache and display them on the interface. On the other hand, by monitoring the scrolling event, predicting the scrolling direction of the user interface, loading the pictures that are about to enter the window in advance, and loading the pictures that are about to enter the window into the local cache, when the pictures that are about to enter the window enter the window, first display the placeholder of the picture, and then smoothly transition to the specific picture of the picture.

[0089] It should be noted that the current window is the viewport mentioned in this application, and the local cache is the cache module mentioned in this application.

[0090] This embodiment is implemented based on the first embodiment. In the second embodiment of the present application, refer to Figure 3 , step S20 of the image loading method further includes steps S21 to S22:

[0091] Step S21, according to the design interface, determine the undisplayed pictures in the current frame in the window scrolling direction.

[0092] It should be noted that the design interface refers to the layout of the EPG interface and the order of picture layout. The design interface is a definite design blueprint to determine the adjacent pictures of each picture.

[0093] In this embodiment, the window scrolling direction is upward, so the undisplayed pictures should be in the area above the current frame. According to the design interface, the pictures in the area above the current frame can be determined, that is, the undisplayed pictures.

[0094] Step S22: taking the picture to be entered into the viewport among the undisplayed pictures as the target picture.

[0095] It should be noted that the image to be entered into the viewport refers to the image at the edge of the viewport.

[0096] In a feasible implementation manner, a preset number of pictures to be entered into the viewport are used as target pictures.

[0097] In this embodiment, the window scrolling direction is downward, so the undisplayed picture corresponding to the next frame window should be in the downward direction of the current frame. Assume that this display interface can display X pictures in one layer, and the current frame displays pictures of layers 1 to 5. X is a positive integer. The preset number is set to 2X, and the target picture is the two layers of pictures in the downward direction of the current frame, that is, the pictures of layers 6 to 7. Then the 2X undisplayed pictures are at least one newly added target picture corresponding to the next frame window, so as to determine the target picture of the next frame window in advance and reduce the waiting time when loading pictures on the EPG interface.

[0098] This embodiment is implemented based on the first embodiment. In the third embodiment of the present application, refer to Figure 4 After step S30, the image loading method further includes steps A01 to A02:

[0099] Step A01: If the target image fails to be cached, the cache module sends a prompt message of cache failure to the front-end interface.

[0100] It should be noted that there are many reasons for cache failure, including but not limited to target data expiration, error handling and logging, and cache penetration, among which error handling includes network errors and database connection failures.

[0101] In this embodiment, the target image does not exist in the cache module, causing the front-end interface to bypass the cache module and request the target image from other places. This behavior is recorded in the access log. This abnormal situation recorded in the log serves as a cache failure prompt message to inform the front-end interface to enhance the need for the front-end interface to obtain the target image from another channel.

[0102] Step A02: If it is detected that the target image enters the viewport and the front-end interface receives the prompt information, the target image obtained from the backend server is displayed in the viewport.

[0103] In this embodiment, the front-end interface receives a prompt message that the target image cache fails from the cache module. When it detects that the target image enters the viewport, it requests the target image from the back-end server and displays the target image in the viewport to improve the stability of the EPG interface in image loading and reduce the interference of emergencies on the interface image display.

[0104] In a feasible implementation manner, after the front-end interface receives the prompt information that the target image cache fails, the next time the front-end interface requests the target image from the back-end server, the target image will be downloaded from the back-end server and stored in the cache module.

[0105] This enables target images that do not exist in the cache module to be stored in the cache module in a timely manner, thereby improving the efficiency of the front-end interface in obtaining the target images for display.

[0106] This embodiment is implemented based on the first embodiment. In the fourth embodiment of the present application, refer to Figure 5 , step S40 of the image loading method further includes steps S01 to S02:

[0107] Step S01, using a cross viewer to determine whether a target image enters a viewport.

[0108] It should be noted that the target image can be used as a document object model element on the front-end interface, so that the cross viewer can determine whether the target image enters the viewport.

[0109] Step S02: If the intersection area between the target image and the viewport reaches a preset threshold, it is determined that the target image enters the viewport.

[0110] It should be noted that the preset thresholds include but are not limited to numerical thresholds and numerical arrays, where the numerical thresholds can be 0 and 1. When the numerical threshold is 0, it means that if any area of ​​the target image enters the viewport, the target image is considered to have entered the viewport. When the numerical threshold is 1, it means that if the target image completely enters the viewport, the target image is considered to have entered the viewport. The numerical array is an array containing multiple thresholds, for example [0, 0.25, 0.5, 0.75, 1]. If the visible ratio of the target element after entering the viewport reaches any one of the thresholds in the array, the target image is considered to have entered the viewport.

[0111] In this embodiment, a callback function is registered by using a cross observer, and the preset threshold is set to 0. If any area of ​​the target image enters the viewport, the callback function will be called asynchronously to prompt the front-end interface to start retrieving the target image in the cache module, so that the front-end interface can respond to the interface scrolling in time.

[0112] This embodiment is implemented based on the first embodiment. In the fifth embodiment of the present application, refer to Figure 6 , step S50 of the image loading method further includes steps S51 to S52:

[0113] Step S51, displaying a placeholder of the target image in the viewport.

[0114] It should be noted that placeholders include but are not limited to gray boxes and loading animations.

[0115] In a feasible implementation manner, a placeholder for the newly added image that has entered the viewport area to a preset value is displayed in the viewport.

[0116] In this embodiment, when the area of ​​the newly added image entering the viewport reaches 30% of the image, a loading animation is displayed at the location of the target image to reduce the user's anxiety about waiting and improve the user experience.

[0117] Step S52: Use cascading style sheets to smoothly transition the display from the placeholder to the target image.

[0118] In this embodiment, a container is created to contain a placeholder and a target image. By default, the placeholder is visible and the target image is hidden. When the target image is loaded, a transition animation is triggered by using a cascading style sheet. During the transition animation, the placeholder gradually disappears and the target image gradually appears, so as to smoothly transition the placeholder to the real target image, thereby improving the user's visual experience.

[0119] This embodiment is implemented based on the first embodiment. In the sixth embodiment of the present application, refer to Figure 7 , step S50 of the image loading method further includes steps S53 to S55:

[0120] Step S53, obtaining device performance and / or network status.

[0121] It should be noted that device performance refers to the functional indicators and parameter performance of the device using EPG, including but not limited to the resolution, grayscale, refresh rate, response time, viewing angle, contrast, brightness, color accuracy, stability and fluency of the device, and the image formats supported by the device. Network status refers to the overall performance of the network environment when the device uses EPG, including but not limited to network connectivity, network request speed, network delay, and packet loss rate.

[0122] In a feasible implementation, the device performance of the device using EPG is obtained by using the built-in application programming interface or tool of the web front end, a third-party library or tool, and a custom script or program; the network status of the device using EPG is obtained by using the built-in network information application programming interface of the browser.

[0123] In an implementation of this embodiment, the device performance of the device using the EPG includes: the picture formats supported by the device, and by acquiring the picture formats supported by the device, compatible pictures can be provided for it.

[0124] In another implementation of this embodiment, the network condition can be determined by the network request speed of the device using the EPG. If the network request speed exceeds a preset speed threshold, it is considered that the network condition of the device is poor, and a picture with a suitable resolution is used to achieve a better display effect.

[0125] In a third implementation of this embodiment, the device performance and network status of the device using the EPG are obtained simultaneously, corresponding to the image format supported by the device and the network request speed of the device respectively.

[0126] Step S54: determining the quality parameters of the target image according to the device performance and / or network conditions.

[0127] In a feasible implementation, the evaluation level of the device using EPG is determined based on the comparison results of the compatible image formats and / or network conditions of the device performance of the device currently using EPG with the network threshold to determine the quality parameters of the target image, wherein the quality parameters include but are not limited to resolution and display format, and the display format includes but is not limited to: WebP and JPEG.

[0128] It should be noted that due to differences in device performance, the determination of compatible image formats and network thresholds should be determined based on the specific device.

[0129] In one implementation of this embodiment, the same picture exists in two formats, high resolution and low resolution, in the database, wherein the pixel value of the high resolution picture is 15 times that of the low resolution picture, and the network condition is judged by the network request speed. When the front-end interface requests the target picture from the back-end server for more than a preset time, it is determined that the current network condition is poor, and the quality parameter of the target picture is low resolution, wherein the preset time is set by the processor and memory performance of the device.

[0130] In a second implementation of this embodiment, by detecting the image format supported by the device in the device performance, it is obtained that the image format supported by the device is WebP, and the quality parameter of the target image is WebP.

[0131] In the third implementation of this embodiment, by detecting the network request speed of the device and the image format supported by the device, it is found that the network request speed of the device is less than the preset time, and the image format supported by the device is JPEG, then the quality parameters of the target image are high resolution and JPEG. The most suitable image is selected for display according to the user's network status to improve the user experience.

[0132] Step S55: Select a target image according to the quality parameter.

[0133] In this embodiment, the quality parameters are high resolution and JPEG, and the front-end interface first obtains a high-resolution target image, and then converts the high-resolution target image into a JPEG format for display by the device, thereby making full use of the device performance and improving the user experience.

[0134] This embodiment is implemented based on the first embodiment. In the seventh embodiment of the present application, refer to Figure 8 , step S53 of the picture loading method further includes steps S531 to S532:

[0135] Step S531, the front-end interface uses built-in tools to obtain device performance.

[0136] In this embodiment, the front-end interface uses the built-in tools of the web page to obtain the CPU, disk and other usage of the device, and obtains the image format compatible with the device, so as to select the target image of the appropriate format, improve the display effect of the target image, and improve the user experience.

[0137] Step S532: the front-end interface uses the network information application programming interface to obtain the network status.

[0138] In this embodiment, the network request speed of the current device is obtained by using the network information application programming interface built into the browser to select a target image with a suitable resolution, thereby increasing the loading speed of the target image and improving the user experience.

[0139] This embodiment is implemented based on the first embodiment. In the eighth embodiment of the present application, refer to Fig. 9 The image loading method further includes steps B01 to B04:

[0140] Step B01: the backend server obtains a list of pictures to be processed.

[0141] It should be noted that the to-be-processed picture list is a collection of all pictures on the EPG interface, and the pictures in this collection are usually sorted according to a certain order or rule.

[0142] In this embodiment, the backend server obtains all images of the EPG interface from the frontend interface through the content management system to perform subsequent image processing operations. The forward-looking image processing operations reduce the response time of the frontend interface displaying images.

[0143] Step B02, using an image processing algorithm to compress the pictures corresponding to the list of pictures to be processed to obtain compressed pictures to be processed.

[0144] It should be noted that the image processing algorithms include but are not limited to JPEG2000 and WebP.

[0145] In this embodiment, the WebP algorithm is used to compress the images corresponding to the list of images to be processed, so that the compressed images can not only maintain the original quality of the images, but also achieve a higher compression rate, which can greatly improve the transmission efficiency and effect of web page images.

[0146] Step B03, storing the compressed image to be processed in a specified path.

[0147] It should be noted that the specified path is a preset file storage area.

[0148] Step B04, generating a unique identifier and metadata for each compressed image to be processed, and saving the identifier and metadata in a database.

[0149] In this embodiment, the unique identifier is the UUID of the compressed image to be processed, and the metadata is the file path, size and format of the compressed image to be processed, so as to construct a database in which images and image identifiers correspond one to one, making image data search more convenient and quick.

[0150] Exemplarily, the picture loading system of the present application is applied to TV program selection. The system sets a listener on the EPG interface to monitor the user's scrolling operation in real time. When the user scrolls the window to browse the program pictures on the EPG interface, the picture loading system will load part of the target program pictures to be entered into the viewport in advance according to the scrolling direction of the window, and cache the target program pictures in the cache module. This allows the user to browse to the target program picture without waiting and directly see the target program picture. If the cache module fails to cache the target program picture, the front-end interface will receive a prompt message that the target program picture cache failed. The target program picture will be obtained from the back-end server for display this time. When the target program picture needs to be displayed next time, the target program picture will be obtained from the back-end server and stored in the cache module. If the window scrolls to a target program picture that has not been loaded in advance, and the cross viewer observes that the intersection area of ​​the target program picture and the viewport reaches a preset threshold, the front-end interface will immediately request the target program picture from the back-end server. During the request, the front-end interface will first display a placeholder at the location of the target program picture, and then use the cascading style sheet to smoothly transition the placeholder to the target program picture obtained from the back-end server. In addition, the front-end interface will also select the target program picture of appropriate specifications for display according to the device performance and network conditions of the display device to improve the display effect of the EPG interface picture.

[0151] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the image loading method of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.

[0152] The present application provides an image loading device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the image loading method in the above-mentioned embodiment one.

[0153] Reference below Fig.10 , which shows a schematic diagram of the structure of a picture loading device suitable for implementing the embodiment of the present application. The picture loading device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Fig.10 The picture loading device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0154] like Fig.10 As shown, the image loading device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the image loading device are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the image loading device to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows an image loading device with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have alternatively.

[0155] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0156] The picture loading device provided by the present application adopts the picture loading method in the above embodiment, which can solve the technical problem of slow speed of loading pictures in the EPG interface. Compared with the prior art, the beneficial effects of the picture loading device provided by the present application are the same as the beneficial effects of the picture loading method provided by the above embodiment, and other technical features in the picture loading device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0157] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0158] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the 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.

[0159] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the image loading method in the above-mentioned embodiment.

[0160] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0161] The computer-readable storage medium may be included in the image loading device; or may exist independently without being assembled into the image loading device.

[0162] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by the image loading device, the image loading device: determines the scrolling direction of the window of the current frame based on the scrolling event on the front-end interface; predicts at least one newly added target image corresponding to the next frame window according to the scrolling direction of the window; if the target image is not in the cache module, requests the target image from the back-end server and caches the target image to the cache module; if it is detected that the target image enters the viewport, obtains the target image from the cache module; and displays the target image in the viewport.

[0163] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0164] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0165] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0166] The readable storage medium provided by the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned picture loading method, and can solve the technical problem that the EPG interface is slow when loading pictures. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the picture loading method provided by the above-mentioned embodiment, and will not be repeated here.

[0167] The above are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect application in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A method for loading an image, characterized in that: Applied to a picture loading system, the picture loading system includes a front-end interface and a cache module, and the picture loading method includes: The front-end interface determines the window scrolling direction of the current frame based on the scrolling event; Predicting at least one newly added target picture corresponding to the next frame window according to the scrolling direction of the window; If the target image is not in the cache module, request the target image from the backend server, and cache the target image in the cache module; If it is detected that the target image enters the viewport, the target image is obtained in the cache module; The target image is displayed in the viewport.

2. The image loading method according to claim 1, characterized in that: The step of predicting at least one newly added target picture corresponding to the next frame window according to the window scrolling direction comprises: According to the design interface, determine the undisplayed pictures of the current frame in the scrolling direction of the window; The picture to be entered into the viewport among the undisplayed pictures is used as the target picture.

3. The image loading method according to claim 1, characterized in that: After the step of requesting the target image from the backend server and caching the target image in the cache module, the method further includes: If the target image cache fails, the cache module sends a cache failure prompt message to the front-end interface; If it is detected that the target image enters the viewport and the front-end interface receives the prompt information, the target image obtained from the backend server is displayed in the viewport.

4. The image loading method according to claim 1 or 3, characterized in that: Before the step of detecting that the target image enters the viewport, the method further includes: Using a cross viewer to determine whether the target image enters the viewport; If the intersection area between the target image and the viewport reaches a preset threshold, it is determined that the target image enters the viewport.

5. The image loading method according to claim 1, characterized in that: The step of displaying the target image in the viewport includes: Displaying a placeholder of the target image in the viewport; A cascading style sheet is used to smoothly transition the display from the placeholder to the target image.

6. The image loading method according to claim 1, characterized in that: Before the step of displaying the target image in the viewport, the method further includes: Obtain device performance and / or network status; Determining a quality parameter of the target image according to the device performance and / or network status; The target picture is selected according to the quality parameter.

7. The image loading method according to claim 6, characterized in that: The step of obtaining device performance and / or network status includes: The front-end interface uses built-in tools to obtain the device performance; and / or, The front-end interface uses a network information application programming interface to obtain the network status.

8. The image loading method according to claim 1, characterized in that: The picture loading system also includes a backend server, and the picture loading method includes: The backend server obtains a list of pictures to be processed; Compress the pictures corresponding to the to-be-processed picture list using an image processing algorithm to obtain compressed to-be-processed pictures; The compressed image to be processed is stored in a specified path; A unique identifier and metadata are generated for each of the compressed images to be processed, and the identifier and metadata are saved in a database.

9. A picture loading device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the picture loading method according to any one of claims 1 to 8.

10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the image loading method according to any one of claims 1 to 8 are implemented.

Images