CN104063424B - Web page picture shows method and demonstration device - Google Patents

Abstract

The present disclosure relates to a display method and display device for webpage pictures, the display method includes: calling sub-pictures with the same characteristics; generating an integrated picture from the sub-pictures with the same characteristics, and recording the position information of each sub-picture ; When receiving a web page picture acquisition request sent by the terminal, sending the integrated picture and the location information to the terminal, so that the terminal presents each sub-picture at the corresponding position of the web page according to the location information . The technical solution disclosed in the present disclosure can reduce the number of picture acquisition requests initiated when the webpage is loaded for the first time, avoid excessive consumption of network resources, and help to improve the loading speed of the webpage.

Description

Method and device for displaying web page pictures

technical field

The present disclosure relates to the technical field of browsers, and in particular, to a display method and display device for webpage pictures.

Background technique

After the browser requests the corresponding webpage file from the server, it implements rendering and loading of the webpage by loading the webpage file. In order to improve the loading speed of the webpage, especially when the amount of pictures included in the webpage is large, a method of separately requesting and downloading the pictures of the webpage is proposed in the related art to realize the step-by-step loading of the webpage.

However, as the functions of a single webpage become more and more complex, more and more image elements are displayed on the same webpage, even if the above-mentioned step-by-step loading method is adopted, the webpage still needs to initiate an interaction with the image elements when it is first loaded. An equal number of image acquisition requests will consume a lot of network resources and limit the loading speed of web pages.

Contents of the invention

This disclosure provides a display method and display device for webpage pictures to solve the problem that in the related art, when a webpage is loaded for the first time, it needs to initiate a number of picture acquisition requests equal to the number of picture elements, which will lead to a large consumption of network resources and limit the loading of webpages A matter of speed.

According to the first aspect of the embodiments of the present disclosure, a method for displaying webpage pictures is provided, including:

call a subpicture with the same characteristics;

Generating an integrated picture from the sub-pictures with the same characteristics, and recording the position information of each sub-picture;

When receiving a web page picture acquisition request sent by the terminal, the integrated picture and the position information are sent to the terminal, so that the terminal presents each sub-picture at a corresponding position of the web page according to the position information.

Optionally, generate an integrated picture from the sub-pictures with the same characteristics, including:

determining an integration method for integrating the sub-pictures;

Selecting an integration method that occupies the smallest area after integrating the sub-pictures from the integration methods;

and generating the integrated picture from the sub-pictures having the same feature according to the integration manner with the smallest occupied area.

Optionally, determining an integration method for integrating the sub-pictures includes:

judging whether the number of sub-pictures is less than a preset number;

When the number of sub-pictures is less than a preset number, determine the multiple integration methods in an exhaustive manner; and

When the number of the sub-pictures is greater than or equal to the preset number, the multiple integration methods are determined through a greedy strategy.

Optionally, generate an integrated picture from the sub-pictures with the same characteristics, and record the position information of each sub-picture, including:

Upload the plurality of pictures to the integration server;

receiving the integrated picture and the location information of each sub-picture returned by the integrated server.

Optionally, also include:

judging whether the sub-picture with the same feature matches the sub-picture included in the integrated picture;

If not, update the integrated picture and the location information.

According to the second aspect of the embodiments of the present disclosure, there is provided a method for displaying webpage pictures, including:

Send a web page picture acquisition request to the server;

receiving an integrated picture generated by sub-pictures having the same characteristics and location information of the sub-pictures returned by the server;

Each sub-picture is presented at a corresponding position of the webpage according to the position information.

Optionally, presenting each sub-picture at a corresponding position of the webpage according to the position information includes:

Acquiring each sub-picture from the integrated picture according to the position information;

Each obtained sub-picture is displayed on a corresponding position of the web page.

According to a third aspect of the embodiments of the present disclosure, there is provided an apparatus for displaying webpage pictures, including:

A calling unit, used to call subpictures with the same characteristics;

A processing unit, configured to generate an integrated picture from the sub-pictures with the same characteristics, and record the position information of each sub-picture;

A transmission unit, configured to send the integrated picture and the location information to the terminal when receiving a request for obtaining a webpage picture sent by the terminal, so that the terminal presents each sub-picture in the location according to the location information corresponding location of the page.

Optionally, the processing unit includes:

Determining a subunit, configured to determine an integration method for integrating the sub-pictures;

Selecting a sub-unit is used to select an integration method that occupies the smallest area after integrating the sub-pictures from the integration methods;

The generating sub unit is configured to generate the sub-pictures having the same feature as the integrated picture according to the integration manner with the smallest occupied area.

Optionally, the determining subunit includes:

A quantity judging module, configured to judge whether the quantity of the sub-pictures is less than a preset quantity;

A policy determination module, configured to determine the multiple integration methods in an exhaustive manner when the number of sub-pictures is less than a preset number; and, when the number of sub-pictures is greater than or equal to the preset number In the case of , the multiple integration methods are determined through a greedy strategy.

Optionally, the processing unit includes:

an upload subunit, configured to upload the plurality of pictures to the integration server;

The receiving subunit is configured to receive the integrated picture and the location information of each sub-picture returned by the integration server.

Optionally, also include:

a judging unit, configured to judge whether the sub-picture with the same feature matches the sub-picture included in the integrated picture;

An updating unit, configured to update the integrated picture and the location information if they do not match.

According to a fourth aspect of the embodiments of the present disclosure, there is provided an apparatus for displaying webpage pictures, including:

a sending unit, configured to send a request for obtaining a webpage image to a server;

a receiving unit, configured to receive an integrated picture generated by sub-pictures having the same characteristics returned by the server, and location information of the sub-pictures;

A presenting unit, configured to present each sub-picture at a corresponding position of the webpage according to the position information.

Optionally, the presentation unit includes:

An acquisition subunit, configured to acquire each sub-picture from the integrated picture according to the location information;

The display sub-unit is used to display each obtained sub-picture on a corresponding position of the web page.

According to a fifth aspect of the embodiments of the present disclosure, there is provided an apparatus for displaying webpage pictures, including:

processor;

memory for storing processor-executable instructions;

Wherein, the processor is configured as:

call a subpicture with the same characteristics;

Generating an integrated picture from the sub-pictures with the same characteristics, and recording the position information of each sub-picture;

When receiving a web page picture acquisition request sent by the terminal, the integrated picture and the position information are sent to the terminal, so that the terminal presents each sub-picture at a corresponding position of the web page according to the position information.

According to a sixth aspect of the embodiments of the present disclosure, there is provided an apparatus for displaying webpage pictures, including:

processor;

memory for storing processor-executable instructions;

Wherein, the processor is configured as:

Send a web page picture acquisition request to the server;

receiving an integrated picture generated by sub-pictures having the same characteristics and location information of the sub-pictures returned by the server;

Each sub-picture is presented at a corresponding position of the webpage according to the position information.

The technical solutions provided by the embodiments of the present disclosure may include the following beneficial effects:

This disclosure generates an integrated image from the images contained in the same web page, so that only one request needs to be initiated when the web page is displayed, that is, to request the integrated image, which reduces the number of web page requests, thereby helping to avoid the waste of network resources and improving the quality of the web page. loading speed.

The present disclosure also reduces the integration area of the pictures by selecting the way of picture integration, so as to reduce the data volume of the integrated pictures, thereby increasing the transmission speed of the integrated pictures, and further accelerating the loading speed of the webpage.

According to the number of sub-pictures to be integrated, the present disclosure selects a corresponding strategy to determine the integration method of the sub-pictures, which helps to control the overall calculation amount and improve the integration efficiency of the sub-pictures.

The disclosure also helps to reduce the computation load of the local device when performing image integration and location information recording by configuring an integration server dedicated to image integration.

The disclosure also updates the integrated picture and location information in time by checking the matching relationship between the sub-picture and the sub-picture included in the integrated picture, so as to ensure the best web page rendering effect on the terminal.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure.

Description of drawings

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

Fig. 1 is a flow chart of a method for displaying web page pictures according to an exemplary embodiment.

Fig. 2 is a flow chart showing another method for displaying web page pictures according to an exemplary embodiment.

Fig. 3 is a schematic diagram of an application scenario of a method for displaying a web page picture according to an exemplary embodiment.

Fig. 4 is a flow chart showing another method for displaying web page pictures according to an exemplary embodiment.

5A-5B are schematic diagrams of determining an integration method according to a binary tree structure according to an exemplary embodiment.

Fig. 6 is a block diagram of an apparatus for displaying webpage pictures according to an exemplary embodiment.

Fig. 7 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 8 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 9 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 10 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 11 is a schematic structural diagram of an apparatus for displaying webpage pictures according to an exemplary embodiment.

Fig. 12 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 13 is a block diagram of another apparatus for displaying web page pictures according to an exemplary embodiment.

Fig. 14 is another schematic structural diagram of an apparatus for displaying web page pictures according to an exemplary embodiment.

Detailed ways

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numerals in different drawings refer to the same or similar elements unless otherwise indicated. The implementations described in the following exemplary examples do not represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatuses and methods consistent with aspects of the present disclosure as recited in the appended claims.

The terminology used in the present disclosure is for the purpose of describing particular embodiments only, and is not intended to limit the present disclosure. As used in this disclosure and the appended claims, the singular forms "a", "the", and "the" are intended to include the plural forms as well, unless the context clearly dictates otherwise. It should also be understood that the term "and/or" as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, the information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, without departing from the scope of the present disclosure, first information may also be called second information, and similarly, second information may also be called first information. Depending on the context, the word "if" as used herein may be interpreted as "at" or "when" or "in response to a determination."

Fig. 1 is a flow chart of a method for displaying a web page picture according to an exemplary embodiment. As shown in Fig. 1, the method for displaying can be used in a server and includes the following steps:

In step 101, subpictures with the same characteristics are called;

In this embodiment, for example, the "same feature" may be "name", that is, the name of the sub-picture is preconfigured, such as making the name of the sub-picture used for web page presentation contain specified characters (such as "MI": sample1.MI.png, sample2.MI.png, sample3.MI.png...), so that these sub-pictures used for web page presentation can be distinguished from other pictures stored in the server, and used to generate corresponding integrated pictures. Of course, the present disclosure does not limit the specific type of "same feature", and any attribute of a sub-picture can be used as the "same feature" to identify the corresponding sub-picture, and the "same feature" between sub-pictures can be A feature or a combination of features. For example, as another embodiment, the "same feature" can also be a "storage path", so that pictures in the same storage path can be used as sub-pictures for web page presentation; or, "name" and " storage path", so that the pictures under the same path and containing the same characters in the name are used as sub-pictures for web page display.

In this embodiment, "name" is used as an example for description. Corresponding to different webpages, different characters may be included in the name of the subpictures used for each webpage, for example, the subpictures corresponding to webpage 1 all contain "MI1" in their names (such as sample1.MI1.png, sample2 .MI1.png, sample3.MI1.png...); corresponding to the subpictures of webpage 2, all of which contain "MI2" in their names (for example, sample1.MI2.png, sample2.MI2.png, sample3.MI2.png... . . . ), etc., so that sub-pictures corresponding to different webpages can also be distinguished from each other, and used to generate corresponding integrated pictures respectively.

From the development level of the web page, the following takes the project development process of "Web Page 1" as an example to illustrate, and the processing process is as follows:

First, regularly name the sub-pictures required by web page 1, for example, make the names of all sub-pictures used in web page 1 be "*.MI1.png", where "*" is the unique name of each sub-picture, "MI1" is the identification parameter corresponding to webpage 1, then the directory structure of the development project of webpage 1 can be as follows:

Among them, "sample1.MI1.png", "sample2.MI1.png", and "sample3.MI1.png" are multiple sub-pictures referenced by webpage 1. Among them, test.css contains calling statements for each sub-picture, such as:

.button{

background-image:url("images/sample1.MI1.png");

}

The above sentence expresses: calling the sub-picture "sample1.MI1.png" whose storage path is "images/sample1.MI1.png".

In step 102, an integrated picture is generated from the sub-pictures with the same characteristics, and the position information of each sub-picture is recorded;

In this embodiment, by recording the position information of each sub-picture used for webpage presentation in the integrated picture, the corresponding single sub-picture can be accurately obtained in the integrated picture according to the position information when performing webpage presentation, And used to display the corresponding position on the web page.

Still take the development of the above "web page 1" as an example: call all sub-pictures required for displaying web page 1 according to the name, such as all pictures containing "MI1", to generate the corresponding integrated picture "auto.MI1.png". At the same time, the location information of "sample1.MI1.png", "sample2.MI1.png", "sample3.MI1.png" and so on in the integrated picture "auto.MI1.png" are acquired respectively.

Based on the obtained integrated picture and location information, it is necessary to modify the call to each sub-picture in the development statement to a call to the integrated picture, and add the position information of each sub-picture in the integrated picture to ensure the process of displaying on the webpage , select each corresponding sub-picture in the integrated picture based on the position information. At this point, the directory structure of the current project can be updated as:

In addition to the project directory, the content of test.css also needs to be modified accordingly, as follows:

On the one hand, the sub-picture call is changed from "images/sample1.MI1.png" to "images/auto.MI1.png", that is, the call to "sample1.MI1.png" is replaced with "auto.MI1.png "; on the other hand, the newly added statement above shows that the position information of "sample1.MI1.png" in the integrated image is: with (0,0) as the endpoint (usually the upper left corner of the integrated image), width A rectangular area (such as horizontal direction) of 256px and length (such as vertical direction) of 256px.

Through the above process, the development process of the webpage is divided into two parts: 1) a development process not related to the integrated picture; 2) a sentence adjustment process based on the integrated picture. Therefore, in the development process 1), it is convenient to realize the modification, increase or decrease of sub-pictures, etc., and to debug the development statement; while in the development process 2), it is possible to directly realize picture integration and Statement adjustments help to speed up the development of web projects.

In step 103, when receiving the web page picture acquisition request sent by the terminal, the integrated picture and location information are sent to the terminal, so that the terminal presents each sub-picture at the corresponding position of the webpage according to the location information.

In this embodiment, for the web page image acquisition request sent by the terminal, all the images required by the web page can be returned to the terminal at one time by returning the integrated image and corresponding location information. Wherein, when the terminal needs to load a webpage, it will first initiate a webpage acquisition request to obtain the webpage document corresponding to the webpage; when the tag corresponding to the "picture" in the webpage document is parsed out, the terminal will initiate the above-mentioned " web page image fetch request" to obtain integrated image and location information.

It can be seen from the above-mentioned embodiments that by generating all the pictures (i.e. sub-pictures) in each web page as integrated pictures, when the terminal requests a web page picture, it can realize the one-time acquisition of all pictures by obtaining the integrated picture, so that the The number of requests for webpage images is no longer related to the number of images contained in the webpage, which effectively reduces the number of image requests, helps reduce the occupation of network resources, and speeds up the loading speed of webpages.

In the aforementioned embodiments of the method for displaying webpage pictures, a server-based technical solution is proposed; correspondingly, the present disclosure also proposes a client-based embodiment.

As shown in FIG. 2, FIG. 2 is a flow chart of another method for displaying webpage pictures according to an exemplary embodiment. The method for displaying can be applied to a terminal or a mobile terminal on the user side, and may include the following steps:

In step 201, send a web page image acquisition request to the server;

In step 202, the integrated picture generated by the sub-pictures with the same characteristics and the location information of the sub-pictures returned by the server are received;

In step 203, each sub-picture is presented at a corresponding position of the webpage according to the position information.

Wherein, presenting each of the plurality of pictures at a corresponding position of the webpage according to the location information may include: obtaining each sub-picture from the integrated picture according to the location information; and displaying each obtained sub-picture at a corresponding position of the webpage.

In the above-mentioned embodiment, it is only necessary to initiate a web page image acquisition request to the server once to obtain integrated images corresponding to all images in the web page, so as to separate each image according to the integrated image and corresponding location information. It is displayed on the webpage, thereby reducing the number of requests sent, helping to reduce the occupation of network resources and speed up the display of webpages.

As an exemplary embodiment, FIG. 3 shows a schematic diagram of an application scenario of a method for displaying a web page picture.

As shown in FIG. 3 , it is assumed that a web page contains 7 independent sub-pictures shown on the left. First of all, the server side needs to unify the naming of these 7 sub-pictures, such as adopting the format of "*.MI1.png", so as to indicate that these sub-pictures need to be displayed on the same webpage.

The server can invoke all the sub-pictures corresponding to the current web page according to the identification parameters included in the name (such as the above-mentioned "MI1"), and complete the generation of the integrated picture locally. Theoretically speaking, as long as there is no crossing and overlapping between multiple sub-pictures, that is, the independence of each sub-picture in the integrated picture is ensured, the integrated picture can be applied to the presentation of the corresponding webpage.

Optionally, since the terminal obtains each sub-picture from the integrated picture according to the location information when displaying the webpage, in order to facilitate the acquisition of each sub-picture and reduce the complexity of the recorded location information, it is necessary to more intervention in the process. This intervention process can include:

As shown in FIG. 3 , the occupied area corresponding to each sub-picture is expanded into a rectangular area shown by a dotted line, and the rectangular areas between multiple sub-pictures do not overlap each other. Therefore, it is only necessary to record the coordinate information of one end point of each rectangular area and the length and width of the rectangular area, so that the corresponding sub-picture can be uniquely determined on the integrated picture.

As an exemplary embodiment, in FIG. 3 , the coordinate system XOY is established with the upper left corner of the integrated picture as the origin O(0,0), and the position information of each sub-picture can be recorded separately. For example, the position information of the leftmost "clock" sub-picture can be: {(0,0), 256px, 260px}, indicating that in the integrated picture, the end point is (0,0) and the length along the X axis is 256px (pixels), take the width along the Y axis as 260px, and you can get the "clock" sub-picture. For another example, the position information of the "smiley face" sub-picture adjacent to the "clock" sub-picture can be: {(262,137), 128, 123}, indicating that in the integrated picture, the end point is (262,137) and the length is taken along the X-axis direction 128px and a width of 123px along the Y axis to get the "smiley face" sub-picture.

In the related technology, when displaying the webpage, the terminal needs to send seven acquisition requests of webpage images to the server, so as to obtain the seven independent images respectively. However, in the technical solution of the present disclosure, by integrating these 7 sub-pictures into one integrated picture, the terminal only needs to send a webpage picture acquisition request once to obtain the integrated picture, and accordingly realize all the pictures in the webpage The display of pictures. Of course, FIG. 3 only shows an exemplary picture integration manner, but for the integration of multiple sub-pictures, there may actually be many different situations. Therefore, the integration method adopted can be determined according to actual needs.

In addition, the "corresponding position" in the present disclosure refers to the configured display position of each sub-picture on the webpage, which is determined by the browser according to the configuration of the webpage document (such as HTML (HyperText Mark-up Language, hypertext markup language) document). Parse to determine the display position of each sub-picture on the web page. For example, in Figure 3, the "clock" sub-picture is displayed in the upper right corner of the webpage, the "smiley face" sub-picture is displayed in the upper left corner of the webpage, and so on.

As shown in FIG. 4, FIG. 4 shows a flow chart of a method for displaying a web page picture according to an exemplary embodiment, and the implementation steps of the method may include:

In step 401, subpictures with the same characteristics are called;

In step 402, an integration method for integrating the sub-pictures is determined;

In this embodiment, as an exemplary embodiment, since each integration method of multiple sub-pictures can actually be represented by a corresponding binary tree structure, it can be determined according to the binary tree structure corresponding to multiple sub-pictures corresponding integration method.

For example, in FIG. 5A , taking the integration of "Figure 1", "Figure 2" and "Figure 3" as an example, it illustrates the relationship between the binary tree structure and the way of integration. First, determine the quantity of "Figure 1", "Figure 2" and "Figure 3", that is, a total of 3 sub-pictures; then, according to the quantity, generate the binary tree structure shown on the left side of Figure 5A, in this structure along the Y axis direction ( That is, the line A in the vertical direction) separates "Figure 1" from other sub-pictures, and the line B along the X-axis direction (ie, the horizontal direction) separates "Figure 2" and "Figure 3"; finally , based on the above binary tree structure, the integration result shown on the right side of FIG. 5A can be generated.

Similarly, as shown in Figure 5B, another way of integrating "Figure 1", "Figure 2" and "Figure 3" is shown: in the binary tree structure shown on the left side of Figure 5B, through the The line A in the axis direction separates "Figure 1" from other sub-pictures, and the line B along the Y-axis direction separates "Figure 2" and "Figure 3", so that based on the binary tree structure, you can generate The integration results are shown on the right side of Figure 5B.

In step 403, the integration method that occupies the smallest area after integrating the sub-pictures is selected from the integration methods;

In this embodiment, combined with the embodiment shown in FIG. 5A and FIG. 5B: according to each binary tree structure, it is possible to determine the integrated pictures corresponding to "Fig. 1", "Fig. 2" and "Fig. 3" (as shown in Fig. 5A and shown on the right side of Figure 5B), and the corresponding integrated occupied area is calculated accordingly. For example, in Fig. 5A, the area occupied after integration is the sum of the areas of "Fig. 1", "Fig. 2" and "Fig. 3"; while in Fig. 5B, the area occupied after integration is the area of the rectangle shown by the dotted line, i.e. three The sum of the areas of "Figure 1". Therefore, the integration method corresponding to FIG. 5A can be considered to be superior to the integration method corresponding to FIG. 5B .

In step 404, the sub-pictures with the same characteristics are generated into an integrated picture according to the integration method with the smallest occupied area, and the position information of each sub-picture in the integrated picture is recorded.

In this embodiment, by comparing the size of the integrated occupied area corresponding to each integrated method, the integrated integrated method with the smallest occupied area can be selected, and the data volume of the corresponding integrated image is minimized, which helps to shorten the integrated image. The transmission time is shortened, and the display speed of the corresponding web page is accelerated.

Wherein, when the number of sub-pictures to be integrated is constant, the corresponding binary tree structure can also be determined. However, when the number of sub-pictures is large, the number of corresponding binary tree structures will be very large, even far greater than n! (n is the number of sub-pictures, n! represents the factorial of n). Therefore, in order to control the amount of calculation in the integration process and improve the integration efficiency, the following methods can be further adopted:

Determine whether the number of sub-pictures is less than a preset number. Among them, when the number of sub-pictures is less than the preset number, a variety of integration methods are determined through an exhaustive method, that is, the integration methods in all cases corresponding to the sub-pictures are listed, and the corresponding integrated occupied areas are determined one by one to select The integration method that takes up the smallest area. At the same time, when the number of sub-pictures is greater than or equal to the preset number, multiple integration methods may be determined through a greedy strategy or the like. When adopting methods such as the greedy strategy, the current optimal solution is always considered each time, so that a limited number of relatively good integration methods can be obtained through multiple trials, so that it can be selected among all the currently determined binary tree structures. The integration method that occupies the smallest area after integration.

It should be noted:

After determining the final integration method to be adopted, the local device performs integration processing on the sub-pictures. In the process of integration processing, based on the length, width and other parameters of each sub-picture, as well as the positional relationship between multiple sub-pictures, the corresponding position information of each sub-picture can be obtained and recorded for use in the final web page show.

In addition, in addition to performing integration processing locally on the server, another integration server can also be configured to be dedicated to the integration processing of the sub-pictures, and the corresponding processing steps may include: uploading the sub-pictures to the integration server; Integrate the image and the location information of each sub-image.

Wherein, by configuring an integration server dedicated to sub-picture integration, it is helpful to save computing resources of the local server. Moreover, when the configuration of the integration server is higher, it is helpful to improve the integration efficiency of the sub-pictures. Among them, the integration server can also use the technical solution shown in Figure 4 to ensure that the integration method with the smallest occupied area after integration is selected to reduce the data volume of the integrated image, improve the transmission efficiency of the integrated image, and accelerate the display speed of the web page.

In step 405, when receiving the web page picture acquisition request sent by the terminal, the integrated picture and location information are sent to the terminal, so that the terminal presents each sub-picture at the corresponding position of the webpage according to the location information.

In any embodiment of the method for displaying webpage pictures above, it can also be judged whether the sub-pictures with the same characteristics match the sub-pictures contained in the integrated picture; The integrated pictures and location information are always the latest data, so as to present the best webpage display effect.

Corresponding to the foregoing embodiment of the method for displaying web page pictures based on the server side, the present disclosure also provides embodiments of an apparatus for displaying web page pictures on the server side.

Fig. 6 is a block diagram of an apparatus for displaying web page pictures according to an exemplary embodiment. As shown in FIG. 6 , the presentation device includes: a calling unit 61 , a processing unit 62 and a transmission unit 63 .

Wherein, the calling unit 61 is configured to call sub-pictures with the same characteristics;

The processing unit 62 is configured to generate an integrated picture from the sub-pictures with the same characteristics, and record the position information of each sub-picture;

The transmission unit 63 is configured to send the integrated picture and location information to the terminal when receiving the webpage picture acquisition request sent by the terminal, so that the terminal presents each sub-picture at a corresponding position on the webpage according to the location information.

In the above-mentioned embodiment, by generating all the pictures (ie, sub-pictures) in each web page as integrated pictures, when the terminal requests a web page picture, it can realize the one-time acquisition of all pictures by obtaining the integrated picture, so that the The number of requests for webpage images is no longer related to the number of images contained in the webpage, which effectively reduces the number of image requests, helps reduce the occupation of network resources, and speeds up the loading speed of webpages.

As shown in FIG. 7 , FIG. 7 is a block diagram of another display device for web page pictures according to an exemplary embodiment. On the basis of the embodiment shown in FIG. 6 , the processing unit 62 may include: determining A subunit 621 , a selection subunit 622 and a generation subunit 623 .

Wherein, the determining subunit 621 is configured to determine an integration method for integrating the sub-pictures;

The selection subunit 622 is configured to select an integration method that occupies the smallest area after integrating the sub-pictures from the integration methods;

The generation subunit 623 is configured to generate sub-pictures with the same feature into an integrated picture in an integration manner that occupies the smallest area.

In the above-mentioned embodiment, by comparing the size of the integrated occupied area corresponding to each integrated method, the integrated integrated method with the smallest occupied area can be selected, and the data volume of the corresponding integrated image is minimized, which helps to shorten the integrated image. The transmission time is shortened, and the display speed of the corresponding web page is accelerated.

Of course, those skilled in the art can understand that: after the sub-pictures are integrated in any manner, the generated integrated picture can be applicable to the technical solution of the present disclosure.

As shown in FIG. 8 , FIG. 8 is a block diagram of another webpage picture display device according to an exemplary embodiment. In this embodiment, on the basis of the embodiment shown in FIG. 7 , the determining subunit 621 may include: Quantity judging module 621A and strategy determining module 621B.

Wherein, the number judging module 621A is configured to judge whether the number of sub-pictures is less than a preset number;

The policy determination module 621B is configured to determine multiple integration methods in an exhaustive manner when the number of sub-pictures is less than a preset number; and, when the number of sub-pictures is greater than or equal to a preset number, greedily Strategies determine the various integration methods.

In the above-mentioned embodiments, by adopting different strategies for different situations, it is helpful to minimize the occupied area after integration by exhaustive means when the number of sub-pictures is small (for example, less than the preset number); When the number is large (for example, greater than or equal to the preset number), the calculation amount is reduced through a greedy strategy, and the integration method with the smallest occupied area after integration is selected among the obtained multiple integration methods.

As shown in FIG. 9, FIG. 9 is a block diagram of another display device for webpage pictures according to an exemplary embodiment. On the basis of the embodiment shown in FIG. 6, the processing unit 62 may include: upload subunit 624 and receiving subunit 625 .

Wherein, the upload subunit 624 is configured to upload the sub-picture to the integration server;

The receiving subunit 625 is configured to receive the integrated picture and the location information of each sub-picture returned by the integration server.

It should be noted that the structure of the acquiring unit 62 in the device embodiment shown in FIG. 9 may also be included in any device embodiment in FIGS. 6 to 8 , and this disclosure is not limited thereto.

In the foregoing embodiments, by configuring an integration server dedicated to image integration, it is helpful to save computing resources of the local server. Moreover, when the configuration of the integration server is higher, it is helpful to improve the integration efficiency of the sub-pictures.

As shown in FIG. 10 , FIG. 10 is a block diagram of another display device for webpage pictures according to an exemplary embodiment. On the basis of the embodiment shown in FIG. 6 , this embodiment may further include: a judging unit 64 and updating unit 65 .

Wherein, the judging unit 64 is configured to judge whether the sub-picture with the same feature matches the sub-picture included in the integrated picture;

The updating unit 65 is configured to update the integrated picture and the location information in the case of mismatch.

In the above embodiment, by checking the matching relationship between the sub-picture and the sub-picture included in the integrated picture, the integrated picture and the location information are updated in time, so as to ensure the best web page rendering effect on the terminal.

For the implementation process of the functions and effects of each unit in the above device, please refer to the implementation process of the corresponding steps in the above method for details, and will not be repeated here.

As for the device embodiment, since it basically corresponds to the method embodiment, for related parts, please refer to the part description of the method embodiment. The device embodiments described above are only illustrative, and the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place , or can also be distributed to multiple network elements. Part or all of the modules can be selected according to actual needs to achieve the purpose of the disclosed solution. It can be understood and implemented by those skilled in the art without creative effort.

Correspondingly, the present disclosure also provides an apparatus for displaying webpage pictures, including: a processor; a memory for storing processor-executable instructions; wherein, the processor is configured to: call a sub-picture with the same feature; Sub-pictures with the same characteristics generate an integrated picture, and record the location information of each sub-picture; when receiving a web page picture acquisition request sent by the terminal, send the integrated picture and location information to the terminal, so that the terminal can Render each sub-picture in its corresponding position on the web page.

Correspondingly, the present disclosure also provides a server, the server includes a memory, and one or more programs, wherein one or more programs are stored in the memory, and are configured to be executed by one or more processors. The above program includes instructions for performing the following operations: call the sub-pictures with the same characteristics; generate an integrated picture from the sub-pictures with the same characteristics, and record the position information of each sub-picture; when receiving the sub-picture sent by the terminal When obtaining a request for a webpage image, the integrated image and location information are sent to the terminal, so that the terminal presents each sub-image at a corresponding location on the webpage according to the location information.

As shown in FIG. 11 , FIG. 11 is a schematic structural diagram of an apparatus for displaying web page pictures according to an exemplary embodiment. For example, the apparatus 1100 may be provided as a server. Referring to FIG. 11 , apparatus 1100 includes processing component 1122 , which further includes one or more processors, and a memory resource represented by memory 1132 for storing instructions executable by processing component 1122 , such as application programs. The application program stored in memory 1132 may include one or more modules each corresponding to a set of instructions. In addition, the processing component 1122 is configured to execute instructions to execute the above-mentioned method for displaying webpage pictures.

Device 1100 may also include a power component 1126 configured to perform power management of device 1100 , a wired or wireless network interface 1150 configured to connect device 1100 to a network, and an input-output (I/O) interface 1158 . The apparatus 1100 can operate based on an operating system stored in the memory 1132, such as Windows Server™, MacOS X™, Unix™, Linux™, FreeBSD™ or the like.

Corresponding to the foregoing embodiment of the method for displaying a web page image based on the terminal side, the present disclosure also provides an embodiment of an apparatus for displaying a web page image based on the terminal side.

As shown in FIG. 12 , FIG. 12 is a block diagram of an apparatus for displaying webpage pictures according to an exemplary embodiment, and the apparatus for display may include: a sending unit 1201 , a receiving unit 1202 and a presentation unit 1203 .

Wherein, the sending unit 1201 is configured to send a web page picture acquisition request to the server;

The receiving unit 1202 is configured to receive an integrated picture generated by sub-pictures with the same characteristics and location information of the sub-pictures returned by the server;

The presenting unit 1203 is configured to present each sub-picture at a corresponding position of the webpage according to the position information.

In the above-mentioned embodiment, it is only necessary to initiate a webpage image acquisition request to the server once to obtain the integrated images corresponding to all the images in the webpage, so that each sub-image can be They are displayed on the webpage respectively, thereby reducing the number of requests to send, helping to reduce the occupation of network resources and speed up the display of webpages.

As shown in FIG. 13, FIG. 13 is a block diagram of another webpage picture display device according to an exemplary embodiment. In this embodiment, on the basis of the embodiment shown in FIG. 12, the presentation unit 1203 may include: Subunit 1203A and display subunit 1203B.

The obtaining subunit 1203A is configured to obtain each sub-picture from the integrated picture according to the position information;

The display subunit 1203B is configured to display each acquired sub-picture on a corresponding position of the webpage.

For the implementation process of the functions and effects of each unit in the above device, please refer to the implementation process of the corresponding steps in the above method for details, and will not be repeated here.

As for the device embodiment, since it basically corresponds to the method embodiment, for related parts, please refer to the part description of the method embodiment. The device embodiments described above are only illustrative, and the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place , or can also be distributed to multiple network elements. Part or all of the modules can be selected according to actual needs to achieve the purpose of the disclosed solution. It can be understood and implemented by those skilled in the art without creative effort.

Correspondingly, the present disclosure also provides an apparatus for displaying webpage pictures, including: a processor; a memory for storing processor-executable instructions; wherein, the processor is configured to: send a webpage picture acquisition request to a server; receive a request returned by the server An integrated picture generated from sub-pictures with the same characteristics, and the location information of each sub-picture; present each sub-picture at a corresponding position on the webpage according to the location information.

Correspondingly, the present disclosure also provides a terminal. The terminal includes a memory and one or more programs, wherein one or more programs are stored in the memory and are configured to be executed by one or more processors. The above program includes instructions for the following operations: sending a web page picture acquisition request to the server; receiving the integrated picture generated by the sub-pictures with the same characteristics returned by the server, and the location information of the sub-pictures; according to the location information, each sub-picture displayed at the appropriate location on the web page.

As shown in FIG. 14 , FIG. 14 is a schematic structural diagram of an apparatus for displaying web page pictures according to an exemplary embodiment. For example, the apparatus 1400 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, and the like.

14, device 1400 may include one or more of the following components: processing component 1402, memory 1404, power supply component 1406, multimedia component 1408, audio component 1410, interface 812 of input/output (I/O), sensor component 1414, and a communication component 1416 .

The processing component 1402 generally controls the overall operations of the device 1400, such as those associated with display, telephone calls, data communications, camera operations, and recording operations. The processing element 1402 may include one or more processors 1420 to execute instructions to complete all or part of the steps of the above method. Additionally, processing component 1402 may include one or more modules that facilitate interaction between processing component 1402 and other components. For example, processing component 1402 may include a multimedia module to facilitate interaction between multimedia component 1408 and processing component 1402 .

The memory 1404 is configured to store various types of data to support operations at the device 1400 . Examples of such data include instructions for any application or method operating on device 1400, contact data, phonebook data, messages, pictures, videos, and the like. The memory 1404 can be implemented by any type of volatile or non-volatile storage device or their combination, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable Programmable Read Only Memory (EPROM), Programmable Read Only Memory (PROM), Read Only Memory (ROM), Magnetic Memory, Flash Memory, Magnetic or Optical Disk.

The power supply component 1406 provides power to various components of the device 1400 . Power components 1406 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for device 1400 .

The multimedia component 1408 includes a screen that provides an output interface between the device 1400 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensor may not only sense a boundary of a touch or a swipe action, but also detect duration and pressure associated with the touch or swipe operation. In some embodiments, the multimedia component 1408 includes a front camera and/or a rear camera. When the device 1400 is in an operation mode, such as a shooting mode or a video mode, the front camera and/or the rear camera can receive external multimedia data. Each front camera and rear camera can be a fixed optical lens system or have focal length and optical zoom capability.

The audio component 1410 is configured to output and/or input audio signals. For example, the audio component 1410 includes a microphone (MIC) configured to receive external audio signals when the device 1400 is in operation modes, such as call mode, recording mode and voice recognition mode. Received audio signals may be further stored in memory 1404 or sent via communication component 1416 . In some embodiments, the audio component 1410 also includes a speaker for outputting audio signals.

The I/O interface 1412 provides an interface between the processing component 1402 and a peripheral interface module, which may be a keyboard, a click wheel, a button, and the like. These buttons may include, but are not limited to: a home button, volume buttons, start button, and lock button.

Sensor assembly 1414 includes one or more sensors for providing various aspects of status assessment for device 1400 . For example, the sensor component 1414 can detect the open/closed state of the device 1400, the relative positioning of components, such as the display and keypad of the device 1400, the sensor component 1414 can also detect a change in the position of the device 1400 or a component of the device 1400, the user Presence or absence of contact with device 1400 , device 1400 orientation or acceleration/deceleration and temperature change of device 1400 . Sensor assembly 1414 may include a proximity sensor configured to detect the presence of nearby objects in the absence of any physical contact. Sensor assembly 1414 may also include optical sensors, such as CMOS or CCD image sensors, for use in imaging applications. In some embodiments, the sensor component 1414 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor or a temperature sensor.

The communication component 1416 is configured to facilitate wired or wireless communication between the apparatus 1400 and other devices. The device 1400 can access wireless networks based on communication standards, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 1416 receives a broadcast signal or broadcast related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 1416 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, Infrared Data Association (IrDA) technology, Ultra Wide Band (UWB) technology, Bluetooth (BT) technology and other technologies.

In an exemplary embodiment, apparatus 1400 may be programmed by one or more application specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable A gate array (FPGA), controller, microcontroller, microprocessor or other electronic component implementation for performing the methods described above.

In an exemplary embodiment, there is also provided a non-transitory computer-readable storage medium including instructions, such as the memory 1404 including instructions, which can be executed by the processor 1420 of the device 1400 to complete the above-mentioned method for displaying webpage pictures. For example, the non-transitory computer readable storage medium may be ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, optical data storage device, and the like.

Additionally, the present disclosure provides:

A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of the server, the server can execute a method for displaying webpage pictures, the method comprising:

call a subpicture with the same characteristics;

Generating an integrated picture from the sub-pictures with the same characteristics, and recording the position information of each sub-picture;

When receiving the webpage image acquisition request sent by the terminal, the integrated image and location information are sent to the terminal, so that the terminal presents each sub-image at a corresponding location on the webpage according to the location information.

Optionally, generate an integrated picture from the sub-pictures with the same characteristics, including:

determining an integration method for integrating the sub-pictures;

Selecting an integration method that occupies the smallest area after integrating the sub-pictures from the integration methods;

and generating the integrated picture from the sub-pictures having the same feature according to the integration manner with the smallest occupied area.

Optionally, determining an integration method for integrating the sub-pictures includes:

judging whether the number of sub-pictures is less than a preset number;

When the number of sub-pictures is less than a preset number, determine the multiple integration methods in an exhaustive manner; and

When the number of the sub-pictures is greater than or equal to the preset number, the multiple integration methods are determined through a greedy strategy.

Optionally, generate an integrated picture from the sub-pictures with the same characteristics, and record the position information of each sub-picture, including:

Upload the plurality of pictures to the integration server;

receiving the integrated picture and the location information of each sub-picture returned by the integrated server.

Optionally, also include:

judging whether the sub-picture with the same feature matches the sub-picture included in the integrated picture;

If not, update the integrated picture and the location information.

A non-transitory computer-readable storage medium, when the instructions in the storage medium are executed by the processor of the terminal, the terminal can execute a method for displaying webpage pictures, the method comprising:

Send a web page picture acquisition request to the server;

Receiving the integrated picture generated by sub-pictures with the same characteristics returned by the server, and the location information of each sub-picture;

Each sub-picture is presented at a corresponding position on the webpage according to the position information.

Optionally, presenting each sub-picture at a corresponding position of the webpage according to the position information includes:

Acquiring each sub-picture from the integrated picture according to the position information;

Each obtained sub-picture is displayed on a corresponding position of the web page.

Other embodiments of the present disclosure will be readily apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any modification, use or adaptation of the present disclosure, and these modifications, uses or adaptations follow the general principles of the present disclosure and include common knowledge or conventional technical means in the technical field not disclosed in the present disclosure . The specification and examples are to be considered exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It should be understood that the present disclosure is not limited to the precise constructions which have been described above and shown in the drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the invention is limited only by the appended claims.

Claims (9)

1. a kind of Web page picture shows method, it is characterised in that including：

Call the sub-pictures with same characteristic features；

The sub-pictures with same characteristic features are generated into an integration picture, and record the positional information of every sub-pictures；

When the Web page picture for receiving terminal transmission obtains request, the integration picture and the positional information are sent to institute Terminal is stated, so that every sub-pictures are presented on the relevant position of webpage according to the positional information by the terminal；

Also include：

Judge whether the sub-pictures with same characteristic features match with the sub-pictures included in the integration picture；

If mismatching, the integration picture and the positional information are updated.

2. according to claim 1 show method, it is characterised in that by the sub-pictures generation one with same characteristic features Open and integrate picture, including：

It is determined that for the Integration Mode integrated to the sub-pictures；

The minimum Integration Mode of area occupied after selection is integrated to the sub-pictures from the Integration Mode；

The sub-pictures with same characteristic features are generated into the integration picture according to the minimum Integration Mode of the area occupied.

3. according to claim 2 show method, it is characterised in that it is determined that whole for being integrated to the sub-pictures Conjunction mode includes：

Judge whether the quantity of the sub-pictures is less than predetermined number；

When the quantity of the sub-pictures is less than predetermined number, a variety of Integration Modes are determined by exhaustive mode, when the subgraph When the quantity of piece is more than or equal to the predetermined number, a variety of Integration Modes are determined by Greedy strategy.

4. according to claim 1 show method, it is characterised in that by the sub-pictures generation one with same characteristic features Open and integrate picture, and record the positional information of every sub-pictures, including：

The sub-pictures are uploaded to integrated service device；

Receive the positional information of the integration picture and every sub-pictures that the integrated service device returns.

A kind of 5. demonstration device of Web page picture, it is characterised in that including：

Call unit, for calling the sub-pictures with same characteristic features；

Processing unit, for the sub-pictures with same characteristic features to be generated into an integration picture, and record every sub-pictures Positional information；

Transmission unit, for when the Web page picture for receiving terminal transmission obtains request, picture and institute's rheme to be integrated by described Confidence breath is sent to the terminal, so that every sub-pictures are presented on the corresponding of webpage by the terminal according to the positional information Position；

Also include：

Judging unit, for judging whether the sub-pictures with same characteristic features integrate the sub-pictures included in picture with described Matching；

Updating block, in absence of such a match, updating the integration picture and the positional information.

6. demonstration device according to claim 5, it is characterised in that the processing unit includes：

Determination subelement, for determining to be used for the Integration Mode for integrating the sub-pictures；

Select subelement, for from the Integration Mode selection sub-pictures are integrated after minimum whole of area occupied Conjunction mode；

Subelement is generated, for the sub-pictures with same characteristic features being given birth to according to the minimum Integration Mode of the area occupied As the integration picture.

7. demonstration device according to claim 6, it is characterised in that the determination subelement includes：

Quantity judge module, for judging whether the quantity of the sub-pictures is less than predetermined number；

Tactful determining module, in the case of being less than predetermined number in the quantity of the sub-pictures, determined by exhaustive mode A variety of Integration Modes, it is true by Greedy strategy in the case where the quantity of the sub-pictures is more than or equal to the predetermined number Fixed a variety of Integration Modes.

8. demonstration device according to claim 7, it is characterised in that the processing unit includes：

Subelement is uploaded, for the sub-pictures to be uploaded into integrated service device；

Receiving subelement, for receiving the integration picture of the integrated service device return and the position letter of every sub-pictures Breath.

A kind of 9. demonstration device of Web page picture, it is characterised in that including：

Processor；

For storing the memory of processor-executable instruction；

Wherein, the processor is configured as：

Call the sub-pictures with same characteristic features；

The sub-pictures with same characteristic features are generated into an integration picture, and record the positional information of every sub-pictures；

When the Web page picture for receiving terminal transmission obtains request, the integration picture and the positional information are sent to institute Terminal is stated, so that every sub-pictures are presented on the relevant position of webpage according to the positional information by the terminal；

Also include：

Judge whether the sub-pictures with same characteristic features match with the sub-pictures included in the integration picture；

If mismatching, the integration picture and the positional information are updated.