CN108228816A - A kind of loading method and device of waterfall flow graph piece - Google Patents

Abstract

Embodiments of the present invention provide a method and device for loading pictures of a waterfall flow. The loading method includes: sending an image data loading request for a page to a server; Frame image data; according to the multi-frame image data and the page, determine the position marks of the multi-frame images corresponding to the multi-frame image data in the page; combine the multi-frame image data and the multi-frame image The position marks of the multiple frames of images are stored in the memory; according to the position marks of the multiple frames of images, the multiple frames of images are displayed on the page in the form of a waterfall. Solved the problem that the structure of the cache array and the array for rendering are not uniform. The same one-dimensional array can be used for caching and rendering. There is no need to convert the one-dimensional array in the cache to a two-dimensional array when rendering, which simplifies the data structure and zooms in on the page. There is no need to generate a new array afterwards, saving resources.

Description

A method and device for loading waterfall images

technical field

The invention relates to the technical field of communications, in particular to a method for loading waterfall pictures and a loading device for waterfall pictures.

Background technique

With the development of network technology, users can share information on the Internet through a web browser. The main function of the web browser is to load and render web page data from the Internet, and then display the web page on a display device.

The massive amount of information on the Internet contains a large number of picture resources. In major websites, web pages usually display various pictures and other information in the form of waterfall flow. In waterfall flow, pictures are rendered by row or by column, corresponding to horizontal waterfall. For flow, the pictures in each row keep the same height, and the total width of different rows keeps the same. For column-oriented waterfall flow, the pictures in each column keep the same width, and the total height of different columns keeps the same. In the existing rendering of the waterfall flow, the image is first calculated and converted into a two-dimensional array, the outer array is used to represent the row or column, the inner array is used to represent the image of each row or column, and the image in the cache The cache is based on a one-dimensional array, which causes the structure of the cache array and the rendering array to be inconsistent. When rendering, it must be converted into a two-dimensional array, and two arrays need to be maintained. When the waterfall page is zoomed, the original two-dimensional The array cannot be reused, and another two-dimensional array needs to be regenerated, resulting in waste of resources.

Contents of the invention

In view of the above problems, the present invention is proposed to provide a waterfall picture loading method and a corresponding waterfall picture loading device that overcome the above problems or at least partially solve the above problems.

According to one aspect of the present invention, a method for loading waterfall pictures is provided, including:

Send an image data loading request for the page to the server;

receiving multiple frames of image data returned by the server and directed to the image data loading request;

According to the multi-frame image data and the page, determine the position marks of the multi-frame images corresponding to the multi-frame image data in the page;

storing the multi-frame image data and position marks of the multi-frame images in a memory;

According to the position marks of the multiple frames of images, the multiple frames of images are displayed on the page in the form of a waterfall.

Optionally, the step of sending an image data loading request for a page to the server includes:

receiving a user's search request for an image of the page;

Generate an image data loading request based on the user's search request;

Send the image data loading request to the server.

Optionally, the multi-frame image data includes the size of the multi-frame image, and the page includes an image display area, and according to the multi-frame image data and the page, it is determined that the multi-frame image data corresponds to The steps of marking the positions of the multi-frame images in the page include:

Obtain the size of the image display area of the page;

Determine the position marks of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

Optionally, the position mark of the multi-frame image includes the row number or column number of the multi-frame image in the waterfall, and the size of the multi-frame image and the size of the image display area size, the step of determining the position of the multi-frame image in the image display area includes:

Determine the row numbers or column numbers of the multiple frames of images in the image display area according to the height and width of the multiple frames of images, and the height and width of the image display area.

Optionally, the step of storing the multi-frame image data and the position markers of the multi-frame images in a memory includes:

storing the multi-frame images in the memory in the form of an array;

According to the row numbers or column numbers of the multiple frames of images in the image display area, the corresponding row numbers or column numbers are identified for the images corresponding to each element in the array.

Optionally, the step of displaying the multi-frame images on the page in the form of a waterfall flow according to the position marks of the multi-frame images includes:

Traverse the array to obtain the row number or column number of the image corresponding to each array element;

Call the waterfall flow renderer to read the image corresponding to each row or column in the page according to the row number or column number;

The multi-frame images are displayed on the page in the form of a waterfall flow according to row numbers or column numbers.

Optionally, the step of displaying the multi-frame images on the page in the form of a waterfall according to row numbers or column numbers includes:

According to the width size of each image in each row of images, the width size of the display area and the preset layout, determine the position of each image in each row of images in the each row of images, or, according to each column of images The height size of each image, the height size and preset layout of the display area determine the position of each image in each column of images in said each column of images;

According to the row number, and the position of each image in each row of images corresponding to the row number in the each row of images, display the multi-frame images, or, according to the column number, and the The position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images;

Optionally, also include:

When the zooming of the page is detected, the size of the zoomed image display area of the page is obtained;

Position marks of the multi-frame images in the image display area are determined according to the size of the multi-frame images and the size of the zoomed display area of the page.

According to another aspect of the present invention, a loading device for waterfall pictures is provided, including:

A loading request sending module, configured to send an image data loading request for the page to the server;

a receiving module, configured to receive multiple frames of image data returned by the server and directed to the image data loading request;

A position marker determining module, configured to determine position markers in the page of the multiple frames of images corresponding to the multiple frames of image data according to the multiple frames of image data and the page;

a storage module, configured to store the multi-frame image data and the position marks of the multi-frame images in a memory;

The display module is configured to display the multiple frames of images on the page in the form of a waterfall according to the position marks of the multiple frames of images.

Optionally, the loading request sending module includes:

A search request receiving submodule, configured to receive a user's search request for images on the page;

A loading request generating submodule, configured to generate an image data loading request based on a user's search request;

The sending submodule is configured to send the image data loading request to the server.

Optionally, the multi-frame image data includes the size of the multi-frame image, the page includes an image display area, and the position marker determination module includes:

The page size acquisition submodule is used to acquire the size of the image display area of the page;

The position marker determination submodule is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

Optionally, the position marks of the multi-frame images include row numbers or column numbers of the multi-frame images in the waterfall, and the position mark determination submodule includes:

A row number or column number determining unit, configured to determine the row number or column number.

Optionally, the storage module includes:

a storage submodule, configured to store the multi-frame images in the memory in the form of an array;

The identification submodule is configured to identify the corresponding row number or column number of the image corresponding to each element in the array according to the row number or column number of the multiple frames of images in the image display area.

Optionally, the display module includes:

The row number or column number obtaining submodule is used to traverse the array and obtain the row number or column number of the image corresponding to each array element;

The image reading submodule is used to call the waterfall flow renderer, and read the image corresponding to each row or column in the page according to the row number or column number;

The display sub-module is used to display the multi-frame images on the page in the form of a waterfall according to row numbers or column numbers.

Optionally, the display submodule includes:

A position determining unit, configured to determine the position of each image in each row of images in each row of images according to the width size of each image in each row of images, the width size of the display area and the preset layout, or , according to the height dimension of each image in each column of images, the height dimension of the display area and the preset layout, determine the position of each image in each column of images in the each column of images;

A display unit, configured to display the multi-frame images according to the row number and the position of each image in each row of images corresponding to the row number in the each row of images, or according to the column number , and, the position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images.

Optionally, also include:

A page zoom detection module, configured to acquire the size of the image display area after the page zoom is detected when the page zoom is detected;

The position marker re-determining module is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the zoomed display area of the page.

An embodiment of the present invention provides a waterfall image loading device, including a memory, a processor, and a computer program stored in the memory and operable on the processor, and the processor implements the embodiment of the present invention when executing the program The steps of the method.

An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the steps of the method described in the embodiment of the present invention are implemented.

According to the loading method of waterfall pictures of the present invention, the position marks of the multi-frame images corresponding to the multi-frame image data in the page can be determined according to the multi-frame image data and the page; The image data and the position markers of the multi-frame images are stored in the memory, thereby solving the problem that the structures of the cache array and the rendering array are not uniform. The same one-dimensional array can be used for caching and rendering, and there is no need to store the data in the cache during rendering. The one-dimensional array is converted to a two-dimensional array, which simplifies the data structure and saves resources without generating a new array after the page is zoomed.

The above description is only an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention, it can be implemented according to the contents of the description, and in order to make the above and other purposes, features and advantages of the present invention more obvious and understandable , the specific embodiments of the present invention are enumerated below.

Description of drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiment. The drawings are only for the purpose of illustrating a preferred embodiment and are not to be considered as limiting the invention. Also throughout the drawings, the same reference numerals are used to designate the same components. In the attached picture:

FIG. 1 shows a flow chart of the steps of Embodiment 1 of a method for loading a waterfall image according to an embodiment of the present invention;

FIG. 2 shows a flow chart of steps in Embodiment 2 of a method for loading a waterfall image according to an embodiment of the present invention;

Fig. 3 shows a schematic diagram of a position mark of a horizontal waterfall picture according to an embodiment of the present invention;

Fig. 4 shows a structural block diagram of a device for loading a waterfall image according to an embodiment of the present invention.

Detailed ways

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided for more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

Referring to FIG. 1 , it shows a flow chart of the steps of Embodiment 1 of a method for loading a waterfall image according to an embodiment of the present invention, which may specifically include the following steps:

Step 101, sending a request for loading image data for a page to a server.

Embodiments of the present invention can be applied to various electronic devices, for example, personal computers, smart TVs, and the like. The operating system of the electronic device can include Android (Android), IOS, Windows, etc., and can be installed with applications that can be connected to search engines, such as browsers, applications with built-in micro-browsers, search engine clients, and the like.

In practical applications, the application on the electronic device, such as the browser, can send the request header information to the server where the search engine is located through the HTTP (Hypertext transfer protocol, hypertext transfer protocol) protocol. For example, the user You can initiate an image data loading request for a certain search object on the webpage of the search engine, or add a search function to the browser by interacting with the browser, search engine, etc. ) and other ways to initiate an image data loading request for a certain search object, etc.

Step 102, receiving multiple frames of image data returned by the server and directed to the image data loading request.

In practical applications, the search engine can load the keywords in the request according to the image data, search the image data on the distributed server, obtain the image data related to the search keyword, and return the image data to the browser, and the web page entry of the browser Received multiple frames of image data.

Step 103, according to the multiple frames of image data and the page, determine the position marks of the multiple frames of images corresponding to the multiple frames of image data in the page.

The image data may include image data such as the size and resolution of the picture and the picture, and the current page may include waterfall data on the page, such as the size of the display area of the waterfall. The position mark of the multi-frame image in the waterfall can be determined according to the size of the picture, the size of the waterfall display area, and the preset layout of the waterfall, such as the row number of the image in the horizontal waterfall, or the image in the column waterfall The column number in the stream.

Step 104, storing the multi-frame image data and position marks of the multi-frame images into a memory.

In page rendering, in order to speed up page rendering, multi-frame image data and position markers of multi-frame images can be stored in the memory, for example, can be stored in the cache, so that the data can be read directly from the cache during rendering For rendering, specifically, multiple frames of image data can be stored in the cache in the form of an array, and position marks can be added to each image in the array. For example, after the image is stored in the cache as a one-dimensional array, the image can be created to run in the waterfall The mapping relationship between number or column number and image.

Step 105: Display the multiple frames of images on the page in the form of a waterfall according to the position marks of the multiple frames of images.

When rendering the waterfall, the position marks of multiple frames of images can be read from the cache, and the multiple frames of images are rendered according to the position marks of the multiple frames of images, and the multiple frames of images are drawn in the waterfall according to the position marks and display styles , so as to be displayed on the display of the electronic device.

In the embodiment of the present invention, according to the multi-frame image data and the page, the position marks of the multi-frame images corresponding to the multi-frame image data in the page can be determined, and the multi-frame image data and the position marks of the multi-frame images are stored in the memory. This solves the problem that the structure of the cache array and the rendering array are not uniform. The cache and rendering can use the same one-dimensional array. When rendering, the image data is directly read from the one-dimensional array in the cache, without the need to store the one-dimensional array in the cache. Converting to a two-dimensional array simplifies the data structure, and there is no need to generate a new array after the page is zoomed, saving resources.

Referring to FIG. 2 , it shows a flow chart of the steps of Embodiment 2 of a method for loading a waterfall image according to an embodiment of the present invention, which may specifically include the following steps:

Step 201, sending a request for loading image data for a page to a server.

In the embodiment of the present invention, an image data loading request can be initiated to the server where the search engine is located through the application of the electronic device, for example, the browser can send the request header information to the server where the search engine is located through the HTTP (Hypertext transfer protocol), specifically, Step 201 may include the following sub-steps:

Sub-step S11, receiving a user's search request for images on the page.

Sub-step S12, generating an image data loading request based on the user's search request;

Sub-step S13, sending the image data loading request to the server.

In practical applications, the search object can be a search keyword. When the electronic device receives the search keyword, it generates an image data loading request based on the search keyword, sends the image data loading request to the server, and requests the server to search word-related image data.

In another search method, the search object is a picture type, and the user can click on a picture type, such as a car, a landscape, a star, etc., and when the electronic device detects that the picture type is triggered, an image loading request is generated based on the picture type, and the An image loading request is sent to the server, requesting the server to find image data belonging to the image type.

Step 202, receiving multiple frames of image data for the image data loading request returned by the server.

In practical applications, the search engine can load the keywords in the request according to the image data, search the image data on the distributed server, obtain the image data related to the search keyword, and return the image data to the browser, and the web page entry of the browser Received multiple frames of image data.

Step 203, acquiring the size of the image display area of the page.

In the embodiment of the present invention, the image display area of the page may refer to the image display area in the waterfall page, and the size of the image display area may be obtained by parsing CSS (Cascading Style Sheets, Cascading Style Sheets) information, which defines elements in the page The display mode of the image, such as the position, color, font, etc. of the element on the page, the display area of the image can be regarded as an element, and the position, color and other information are also defined through CSS. For example, when the HTML of the page is parsed to generate a DOM tree, CSS information is obtained or external CSS information is loaded through a hyperlink, and the size of the image display area can be obtained through the CSS information, such as the height and width of the image display area.

Step 204: Determine the position marks of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

In the embodiment of the present invention, it is necessary to lay out the multi-frame images in the waterfall, and determine the position marks of the multi-frame graphics in the waterfall. In the horizontal waterfall, the position marks can be line numbers, and step 204 can include the following Substeps:

Sub-step S21, according to the width of the multi-frame image and the width of the image display area, determine the row number of the multi-frame image in the image display area.

Specifically, in the horizontal waterfall flow, the heights of images in each row of images are equal, and the total width of each row of images is the same, so it can be determined according to the width of each frame of images, the spacing between images, and the total width of each row of images. The row number of each row of images in the horizontal waterfall.

If the waterfall flow is column-oriented waterfall flow, the position mark can be a column number, and then step 204 can include the following sub-steps:

Sub-step S22, according to the height of the multi-frame images and the height of the image display area, determine the column numbers of the multi-frame images in the image display area.

Specifically, in the column-to-waterfall flow, the widths of images in each column of images are equal, and the total height of each column of images is the same. Therefore, according to the height of each frame of images, the distance between images, and the total height of each column of images, Determines the column number for each column of images in the column waterfall.

Step 205, storing the multi-frame images in the memory in the form of an array.

In the embodiment of the present invention, multiple frames of images may be stored in a memory in the form of a one-dimensional array, for example, may be stored in a cache. A one-dimensional array is a single-structure array composed of numbers and arranged in a simple sorting structure. An element in the one-dimensional array has a subscript. The program can refer to any element in the one-dimensional array through the subscript. The element in the array The value of can point to the address in the cache, the address can be the address of storing the image, and the element in the array can also be a parameter through which the corresponding image is called.

Step 206: According to the row numbers or column numbers of the multiple frames of images in the image display area, identify the corresponding row numbers or column numbers for the images corresponding to each element in the array.

After storing the image, the row number or column number of the image needs to be stored, that is, the row number or column number corresponding to the image identification corresponding to each element in the array, specifically, each array element can be established to correspond to the element The mapping relationship between the row number or column number of the image, the row number and column number can be determined in step 204 and returned to the mapping value of the subscript of the element, for example, the relationship between the element subscript and the row number or column number can be established or the subscript of the element is used as a parameter, and when this parameter is called, the row number or column number of the image corresponding to the element is returned, and the row number and column number have been determined in step 204 and returned through the mapping relationship , and then get the row number or column number corresponding to the element subscript through rowIndex().

As shown in Figure 3, it is a schematic diagram of a position mark of a horizontal waterfall flow picture according to an embodiment of the present invention;

As shown in Figure 3, the row number of the image in the horizontal waterfall is represented by r, and r=1 in the first row, and so on for identification, if the four frames of images in the first row are respectively a[0 in the one-dimensional array ], a[1], a[2], a[3], then the subscript i={0, 1, 2, 3}, then r(0)=1, r(1)=1, r(2 )=1, r(3)=1, and row number 1 can be directly assigned after calculating and determining the row number, for example, after determining that the first frame image is in the first row, then 1 can be assigned to r(0), that is, r (0)=1.

The above is described by taking the horizontal waterfall flow as an example. For the column-wise waterfall flow, reference may be made to the horizontal waterfall flow, and no further description is given here.

Step 207, traverse the array, and obtain the row number or column number of the image corresponding to each array element.

When rendering, the array can be traversed to obtain the row number or column number of the image corresponding to each array element. Specifically, the row number or column number corresponding to each array element can be obtained through rowIndex(), for example, when r When (0)=1, it means that the image corresponding to a[0] is in the first line of the waterfall.

Step 208, call the waterfall flow renderer, and read the image corresponding to each row or column in the page according to the row number or column number.

In an electronic device, since different search requests represent different search intentions, different search results have different rendering modes. Therefore, different waterfall renderers may be set for different search requests.

When the search request is generated based on the search keyword and the search keyword is not a specified word (such as a word of emoticon), the horizontal waterfall flow renderer can be searched.

When the search request is generated based on the image type, it can look up column-oriented waterfall renderers.

Therefore, according to different waterfall flow renderers, the corresponding images can be read from the memory in different ways. For example, for the horizontal waterfall flow loader, read the image according to the row number, and for the column direction waterfall flow loader, read the image according to the The column number to read the image from.

In the embodiment of the present invention, the same array is used for data caching and rendering, and there is no need to maintain two sets of additional arrays, the data structure is simplified, and the operation difficulty of the one-dimensional array is much lower than that of the two-dimensional array, which improves the rendering efficiency.

Step 209 , displaying the multi-frame images on the page in the form of a waterfall flow according to row numbers or column numbers.

In the embodiment of the present invention, when the waterfall renderer is a horizontal waterfall renderer, that is, the page is a horizontal waterfall page, step 209 may include the following sub-steps:

Sub-step S31, according to the width size of each image in each row of images, the width size of the display area and the preset layout, determine the position of each image in each row of images in the each row of images.

Sub-step S32, displaying the multi-frame images according to the row number and the position of each image in each row of images corresponding to the row number in each row of images.

Specifically, for a horizontal waterfall:

The horizontal waterfall flow renderer is called according to the position of the multi-frame images of the waterfall in each row, and then the multi-frame images are rendered on the search result page of the electronic device according to the determined positions.

Among them, when determining the position, you can specify the frame spacing in each row of images, the middle border of the frame, the frame width, etc., and determine the position of each frame of images in each row of images in combination with the preset layout.

In the embodiment of the present invention, when the waterfall renderer is a column-oriented waterfall renderer, that is, the page is a column-oriented waterfall page, step 209 may include the following sub-steps:

Sub-step S33, according to the height dimension of each image in each column of images, the height dimension of the display area and the preset layout, determine the position of each image in each column of images in the each column of images;

Sub-step S34, displaying the multiple frames of images according to the column number and the position of each image in each column of images corresponding to the column number in each column of images.

The column-oriented waterfall flow renderer is called according to the position of the multi-frame images of the waterfall in each column, and then the multi-frame images are rendered on the search result page of the electronic device according to the determined positions.

Among them, when determining the position, you can specify the frame spacing in each column of images, the middle frame of the frame, the frame height, etc., and determine the position of each frame of images in each column of images in combination with the preset layout.

In the embodiment of the present invention, the calculation of the position of the image in the waterfall flow and the rendering of the image are separated and independent of each other. There is no need to render during calculation, and the calculation only operates data in storage. The rendering module can use DOMFragment to operate DOM at one time during rendering. , the performance has been greatly improved, and due to the simplification of the data structure and the separation of calculation and rendering, the business logic has been greatly simplified and the code has been greatly simplified.

In one embodiment of the present invention, when page scaling is detected, the size of the image display area after page scaling is acquired; according to the size of the multi-frame image and the size of the display area after page scaling, the multi-frame The position marker of the image in the image display area.

Specifically, after obtaining the size of the zoomed image display area, return to step 204 to re-determine the row number or column number of the multi-frame image, and update the row number or column number identification, for example, the updated row number or column number The number is reassigned to r(i), and then re-renders to refresh the page.

In the embodiment of the present invention, when the page is zoomed, the one-dimensional array in the memory can be reused, and there is no need to regenerate the array for rendering, which improves the rendering efficiency.

For the method embodiment, for the sake of simple description, it is expressed as a series of action combinations, but those skilled in the art should know that the embodiment of the present invention is not limited by the described action order, because according to the embodiment of the present invention , certain steps may be performed in other order or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification belong to preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

Referring to FIG. 4 , it shows a structural block diagram of an embodiment of a loading device for a waterfall image according to an embodiment of the present invention, which may specifically include the following modules:

A loading request sending module 301, configured to send an image data loading request for the page to the server;

A receiving module 302, configured to receive multiple frames of image data returned by the server and directed to the image data loading request;

A position mark determination module 303, configured to determine position marks in the page of the multi-frame images corresponding to the multi-frame image data according to the multi-frame image data and the page;

A storage module 304, configured to store the multi-frame image data and the position marks of the multi-frame images in a memory;

The display module 305 is configured to display the multiple frames of images on the page in the form of a waterfall according to the position marks of the multiple frames of images.

Preferably, the loading request sending module 301 includes:

A search request receiving submodule, configured to receive a user's search request for images on the page;

A loading request generating submodule, configured to generate an image data loading request based on a user's search request;

The sending submodule is configured to send the image data loading request to the server.

Preferably, the multi-frame image data includes the size of the multi-frame image, the page includes an image display area, and the position marker determination module 303 includes:

The page size acquisition submodule is used to acquire the size of the image display area of the page;

The position marker determination submodule is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

Preferably, the position marks of the multi-frame images include row numbers or column numbers of the multi-frame images in the waterfall, and the position mark determination submodule includes:

A row number or column number determining unit, configured to determine the row number or column number.

Preferably, the storage module 304 includes:

a storage submodule, configured to store the multi-frame images in the memory in the form of an array;

The identification submodule is configured to identify the corresponding row number or column number of the image corresponding to each element in the array according to the row number or column number of the multiple frames of images in the image display area.

Preferably, the display module 305 includes:

The row number or column number obtaining submodule is used to traverse the array and obtain the row number or column number of the image corresponding to each array element;

The image reading submodule is used to call the waterfall flow renderer, and read the image corresponding to each row or column in the page according to the row number or column number;

The display sub-module is used to display the multi-frame images on the page in the form of a waterfall according to row numbers or column numbers.

Preferably, the display submodule includes:

A position determining unit, configured to determine the position of each image in each row of images in each row of images according to the width size of each image in each row of images, the width size of the display area and the preset layout, or , according to the height dimension of each image in each column of images, the height dimension of the display area and the preset layout, determine the position of each image in each column of images in the each column of images;

A display unit, configured to display the multi-frame images according to the row number and the position of each image in each row of images corresponding to the row number in the each row of images, or according to the column number , and, the position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images.

Preferably, the device also includes:

A page zoom detection module, configured to acquire the size of the image display area after the page zoom is detected when the page zoom is detected;

The position marker re-determining module is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the zoomed display area of the page.

An embodiment of the present invention provides a rendering device for a waterfall picture, including a memory, a processor, and a computer program stored in the memory and operable on the processor. When the processor executes the program, Embodiment 1 and /or the steps of the method described in embodiment 2.

An embodiment of the present invention provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of the method described in Embodiment 1 and/or Embodiment 2 are implemented.

As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and for related parts, please refer to the part of the description of the method embodiment.

The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other device. Various generic systems can also be used with the teachings based on this. The structure required to construct such a system is apparent from the above description. Furthermore, the present invention is not specific to any particular programming language. It should be understood that various programming languages can be used to implement the content of the present invention described herein, and the above description of specific languages is for disclosing the best mode of the present invention.

In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure the understanding of this description.

Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, in order to streamline this disclosure and to facilitate an understanding of one or more of the various inventive aspects, various features of the invention are sometimes grouped together in a single embodiment, figure, or its description. This method of disclosure, however, is not to be interpreted as reflecting an intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the Detailed Description are hereby expressly incorporated into this Detailed Description, with each claim standing on its own as a separate embodiment of this invention.

Those skilled in the art can understand that the modules in the device in the embodiment can be adaptively changed and arranged in one or more devices different from the embodiment. Modules or units or components in the embodiments may be combined into one module or unit or component, and furthermore may be divided into a plurality of sub-modules or sub-units or sub-assemblies. All features disclosed in this specification (including accompanying claims, abstract and drawings) and any method or method so disclosed may be used in any combination, except that at least some of such features and/or processes or units are mutually exclusive. All processes or units of equipment are combined. Each feature disclosed in this specification (including accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

Furthermore, those skilled in the art will understand that although some embodiments described herein include some features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the invention. and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.

The various component embodiments of the present invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all functions of some or all components in the waterfall image loading device according to the embodiment of the present invention. The present invention can also be implemented as an apparatus or an apparatus program (for example, a computer program and a computer program product) for performing a part or all of the methods described herein. Such a program for realizing the present invention may be stored on a computer-readable medium, or may be in the form of one or more signals. Such a signal may be downloaded from an Internet site, or provided on a carrier signal, or provided in any other form.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means can be embodied by one and the same item of hardware. The use of the words first, second, and third, etc. does not indicate any order. These words can be interpreted as names.

The invention discloses A1, a loading method of waterfall pictures, including:

Send an image data loading request for the page to the server;

receiving multiple frames of image data returned by the server and directed to the image data loading request;

According to the multi-frame image data and the page, determine the position marks of the multi-frame images corresponding to the multi-frame image data in the page;

storing the multi-frame image data and position marks of the multi-frame images in a memory;

According to the position marks of the multiple frames of images, the multiple frames of images are displayed on the page in the form of a waterfall.

A2. The method according to claim A1, wherein the step of sending the image data loading request for the page to the server comprises:

receiving a user's search request for an image of the page;

Generate an image data loading request based on the user's search request;

Send the image data loading request to the server.

A3. The method according to any one of claims A1-A2, wherein the multi-frame image data includes the size of the multi-frame image, the page includes an image display area, and the multi-frame image data includes the image display area. frame image data and the page, and the step of determining the position marks of the multi-frame images corresponding to the multi-frame image data in the page includes:

Obtain the size of the image display area of the page;

Determine the position marks of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

A4. The method according to any one of claims A1-A3, wherein the position marks of the multi-frame images include row numbers or column numbers of the multi-frame images in the waterfall, and the basis The size of the multi-frame image and the size of the image display area, the step of determining the position of the multi-frame image in the image display area includes:

Determine the row numbers or column numbers of the multiple frames of images in the image display area according to the height and width of the multiple frames of images, and the height and width of the image display area.

A5. The method according to any one of claims A1-A4, wherein the step of storing the multi-frame image data and the position marks of the multi-frame images into a memory comprises:

storing the multi-frame images in the memory in the form of an array;

According to the row numbers or column numbers of the multiple frames of images in the image display area, the corresponding row numbers or column numbers are identified for the images corresponding to each element in the array.

A6. The method according to any one of claims A1-A5, characterized in that, according to the position marks of the multi-frame images, the multi-frame images are displayed on the page in the form of waterfall flow Steps include:

Traverse the array to obtain the row number or column number of the image corresponding to each array element;

Call the waterfall flow renderer to read the image corresponding to each row or column in the page according to the row number or column number;

The multi-frame images are displayed on the page in the form of a waterfall flow according to row numbers or column numbers.

A7. The method according to any one of claims A1-A6, wherein the step of displaying the multi-frame images on the page in the form of a waterfall flow according to row numbers or column numbers includes:

According to the width size of each image in each row of images, the width size of the display area and the preset layout, determine the position of each image in each row of images in the each row of images, or, according to each column of images The height size of each image, the height size and preset layout of the display area determine the position of each image in each column of images in said each column of images;

According to the row number, and the position of each image in each row of images corresponding to the row number in the each row of images, display the multi-frame images, or, according to the column number, and the The position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images;

A8. The method according to any one of claims A1-A7, further comprising:

When the zooming of the page is detected, the size of the zoomed image display area of the page is acquired;

Position marks of the multi-frame images in the image display area are determined according to the size of the multi-frame images and the size of the zoomed display area of the page.

B9, a loading device for waterfall pictures, comprising:

A loading request sending module, configured to send an image data loading request for the page to the server;

a receiving module, configured to receive multiple frames of image data returned by the server and directed to the image data loading request;

A position marker determining module, configured to determine position markers in the page of the multiple frames of images corresponding to the multiple frames of image data according to the multiple frames of image data and the page;

a storage module, configured to store the multi-frame image data and the position marks of the multi-frame images in a memory;

The display module is configured to display the multiple frames of images on the page in the form of a waterfall according to the position marks of the multiple frames of images.

B10, the device as claimed in claim B9, is characterized in that, described loading request sending module comprises:

A search request receiving submodule, configured to receive a user's search request for images on the page;

A loading request generating submodule, configured to generate an image data loading request based on a user's search request;

The sending submodule is configured to send the image data loading request to the server.

B11. The device according to any one of claims B9-B10, wherein the multi-frame image data includes the size of the multi-frame image, the page includes an image display area, and the position marker determination module include:

The page size acquisition submodule is used to acquire the size of the image display area of the page;

The position marker determination submodule is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area.

B12. The device according to any one of claims B9-B11, wherein the position mark of the multi-frame image comprises the row number or column number of the multi-frame image in the waterfall, and the position Marker determination submodules include:

A row number or column number determining unit, configured to determine the row number or column number.

B13. The device according to any one of claims B9-B12, wherein the storage module comprises:

a storage submodule, configured to store the multi-frame images in the memory in the form of an array;

The identification submodule is configured to identify the corresponding row number or column number of the image corresponding to each element in the array according to the row number or column number of the multiple frames of images in the image display area.

B14. The device according to any one of claims B9-B13, wherein the display module comprises:

The row number or column number obtaining submodule is used to traverse the array and obtain the row number or column number of the image corresponding to each array element;

The image reading submodule is used to call the waterfall flow renderer, and read the image corresponding to each row or column in the page according to the row number or column number;

The display sub-module is used to display the multi-frame images on the page in the form of a waterfall according to row numbers or column numbers.

B15. The device according to any one of claims B9-B14, wherein the display submodule comprises:

A position determining unit, configured to determine the position of each image in each row of images in each row of images according to the width size of each image in each row of images, the width size of the display area and the preset layout, or , according to the height dimension of each image in each column of images, the height dimension of the display area and the preset layout, determine the position of each image in each column of images in the each column of images;

A display unit, configured to display the multi-frame images according to the row number and the position of each image in each row of images corresponding to the row number in the each row of images, or according to the column number , and, the position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images.

B16. The device according to any one of claims B9-B15, further comprising:

A page zoom detection module, configured to acquire the size of the image display area after the page zoom is detected when the page zoom is detected;

The position marker re-determining module is configured to determine the position markers of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the zoomed display area of the page.

C17. A waterfall image loading device, comprising a memory, a processor, and a computer program stored in the memory and operable on the processor, and the processor implements any one of claims A1 to A8 when executing the program The steps of the method.

D18. A computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the steps of the method described in any one of claims A1 to A8 are realized.

Claims (10)

1. A method for loading waterfall pictures, comprising: Send an image data loading request for the page to the server; receiving multiple frames of image data returned by the server and directed to the image data loading request; According to the multi-frame image data and the page, determine the position marks of the multi-frame images corresponding to the multi-frame image data in the page; storing the multi-frame image data and position marks of the multi-frame images in a memory; According to the position marks of the multiple frames of images, the multiple frames of images are displayed on the page in the form of a waterfall. 2. The method according to claim 1, wherein the step of sending the image data loading request for the page to the server comprises: receiving a user's search request for an image of the page; Generate an image data loading request based on the user's search request; Send the image data loading request to the server. 3. The method according to any one of claims 1-2, wherein the multi-frame image data includes the size of the multi-frame image, the page includes an image display area, and the frame image data and the page, and the step of determining the position marks of the multi-frame images corresponding to the multi-frame image data in the page includes: Obtain the size of the image display area of the page; Determine the position marks of the multiple frames of images in the image display area according to the size of the multiple frames of images and the size of the display area. 4. The method according to any one of claims 1-3, wherein the position markers of the multi-frame images comprise row numbers or column numbers of the multi-frame images in the waterfall, and the basis The size of the multi-frame image and the size of the image display area, the step of determining the position of the multi-frame image in the image display area includes: Determine the row numbers or column numbers of the multiple frames of images in the image display area according to the height and width of the multiple frames of images, and the height and width of the image display area. 5. The method according to any one of claims 1-4, wherein the step of storing the multi-frame image data and the position markers of the multi-frame images into the memory comprises: storing the multi-frame images in the memory in the form of an array; According to the row numbers or column numbers of the multiple frames of images in the image display area, the corresponding row numbers or column numbers are identified for the images corresponding to each element in the array. 6. The method according to any one of claims 1-5, wherein, according to the position marks of the multi-frame images, the multi-frame images are displayed on the page in the form of waterfall flow Steps include: Traverse the array to obtain the row number or column number of the image corresponding to each array element; Call the waterfall flow renderer to read the image corresponding to each row or column in the page according to the row number or column number; The multi-frame images are displayed on the page in the form of a waterfall flow according to row numbers or column numbers. 7. The method according to any one of claims 1-6, wherein the step of displaying the multi-frame images on the page in the form of a waterfall flow according to row numbers or column numbers comprises: According to the width size of each image in each row of images, the width size of the display area and the preset layout, determine the position of each image in each row of images in the each row of images, or, according to each column of images The height size of each image, the height size and preset layout of the display area determine the position of each image in each column of images in the each column of images; According to the row number, and the position of each image in each row of images corresponding to the row number in the each row of images, display the multi-frame images, or, according to the column number, and the The position of each image in each column of images corresponding to the column number in each column of images displays the multiple frames of images. 8. The method according to any one of claims 1-7, further comprising: When the zooming of the page is detected, the size of the zoomed image display area of the page is obtained; Position marks of the multiple frames of images in the image display area are determined according to the size of the multiple frames of images and the size of the zoomed display area of the page. 9. A loading device for waterfall pictures, comprising: A loading request sending module, configured to send an image data loading request for the page to the server; a receiving module, configured to receive multiple frames of image data returned by the server and directed to the image data loading request; A position marker determination module, configured to determine position markers in the page of the multiple frames of images corresponding to the multiple frames of image data according to the multiple frames of image data and the page; a storage module, configured to store the multi-frame image data and the position marks of the multi-frame images in a memory; The display module is configured to display the multiple frames of images on the page in the form of a waterfall according to the position marks of the multiple frames of images. 10. The device according to claim 9, wherein the loading request sending module comprises: A search request receiving submodule, configured to receive a user's search request for images on the page; A loading request generating submodule, configured to generate an image data loading request based on a user's search request; The sending submodule is configured to send the image data loading request to the server.