CN106649299B - Method and device for lazy loading of webpage block - Google Patents
Method and device for lazy loading of webpage block Download PDFInfo
- Publication number
- CN106649299B CN106649299B CN201510451627.3A CN201510451627A CN106649299B CN 106649299 B CN106649299 B CN 106649299B CN 201510451627 A CN201510451627 A CN 201510451627A CN 106649299 B CN106649299 B CN 106649299B
- Authority
- CN
- China
- Prior art keywords
- block
- height
- webpage
- container
- client
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application provides a method and a device for lazy loading of webpage blocks, wherein the method comprises the following steps: receiving a webpage browsing request sent by a client, wherein the requested webpage comprises: a lazy loaded web page block; sending the initial height value of the container of the webpage block to the client so that the client sets the height of the container as the initial height value, wherein the initial height value is the block height of the webpage block; after receiving a block loading request sent by the client, sending the block information of the webpage block to the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height. The webpage shaking during lazy loading of the webpage block is avoided.
Description
Technical Field
The present application relates to computer technologies, and in particular, to a method and an apparatus for lazy loading of a web page block.
Background
With the development of the internet, the web pages are used as carriers for bearing contents, and the application range is wider and wider. In order to improve the initial speed of a user when the webpage is opened, the technology of lazy loading of HTML blocks is adopted for a plurality of current webpages, the HTML blocks are contents of one HTML element in the webpage, the HTML elements are equivalent to containers of the HTML blocks, the time blocks cannot be loaded when the webpage is just opened, the containers of the blocks are loaded first, the containers can be set to be a fixed height value (but not the real height of the blocks, the block height cannot be obtained because the block is not loaded at the moment), the HTML blocks are loaded only when the HTML elements enter the visual field of the user, the real height of the blocks is obtained, and the containers are also set to be height values corresponding to the blocks.
However, before and after the HTML block is loaded, the height of the container is different, for example, the initial fixed height value of the container is different from the real height value of the block, which will cause the height of the HTML element to change suddenly before and after loading, and from the perspective of the user, the length and position of the vertical scroll bar in the web page will change, which may be called page shaking, and the user experience will be affected; while also complicating the location and navigation of the blocks in the page.
Disclosure of Invention
In view of this, the present application provides a method and an apparatus for lazy loading of a webpage block, so as to avoid page jitter during lazy loading of the webpage block.
Specifically, the method is realized through the following technical scheme:
in a first aspect, a method for lazy loading of a webpage block is provided, which includes:
receiving a webpage browsing request sent by a client, wherein the requested webpage comprises: a lazy loaded web page block;
sending the initial height value of the container of the webpage block to the client so that the client sets the height of the container as the initial height value, wherein the initial height value is the block height of the webpage block;
after receiving a block loading request sent by the client, sending the block information of the webpage block to the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height.
In a second aspect, a method for lazy loading of a webpage block is provided, which includes:
sending a web browsing request to a server, the requested web page comprising: a lazy loaded web page block;
receiving an initial height value of a container of the webpage block sent by the server, wherein the initial height value is the block height of the webpage block, and the height of the container is set as the initial height value;
and after detecting that the webpage block enters the visual field area, sending a block loading request to the server, loading the webpage block to the container according to block information returned by the server, wherein the height of the loaded webpage block is the block height.
In a third aspect, an apparatus for lazy loading of a webpage block is provided, including:
a request receiving module, configured to receive a web browsing request sent by a client, where a requested web includes: a lazy loaded web page block;
a container sending module, configured to send an initial height value of a container of the webpage block to the client, so that the client sets the height of the container as the initial height value, where the initial height value is a block height of the webpage block;
the content sending module is used for sending the block information of the webpage block to the client after receiving a block loading request sent by the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height.
In a fourth aspect, an apparatus for lazy loading of a web page block is provided, which includes:
a request sending module, configured to send a web browsing request to a server, where a requested web page includes: a lazy loaded web page block;
the system comprises a container loading module, a server and a display module, wherein the container loading module is used for receiving an initial height value of a container of a webpage block sent by the server, the initial height value is the block height of the webpage block, and the height of the container is set as the initial height value;
and the content loading module is used for sending a block loading request to the server after detecting that the webpage block enters the visual field area, loading the webpage block to the container according to block information returned by the server, and setting the height of the loaded webpage block as the block height.
According to the webpage block lazy loading method and device, the height of the container is set to be the block height when the container information is sent to the lazy loading block, so that the container height before and after block loading can not be changed when the subsequent webpage block is loaded to the container, and therefore page shaking during webpage block lazy loading is avoided.
Drawings
FIG. 1 is a page of a shopping website shown in an exemplary embodiment of the present application;
FIG. 2 is a page of another shopping website shown in an exemplary embodiment of the present application;
FIG. 3 illustrates a web page tile loading system according to an exemplary embodiment of the present application;
FIG. 4 is a flowchart of a method for lazy loading of web page blocks according to an exemplary embodiment of the present application;
FIG. 5 is a flowchart of a method for lazy loading of web page blocks according to an exemplary embodiment of the present application;
FIG. 6 is a flow chart illustrating interaction between a client and a server according to an exemplary embodiment of the present application;
FIG. 7 is a block diagram illustrating an apparatus for lazy loading of web page blocks according to an exemplary embodiment of the present application;
FIG. 8 is a block diagram illustrating an apparatus for lazy loading of web page blocks according to an exemplary embodiment of the present application;
FIG. 9 is a block diagram illustrating an apparatus for lazy loading of web page blocks according to an exemplary embodiment of the present application;
fig. 10 is a block diagram illustrating an apparatus for lazy loading of a webpage block according to an exemplary embodiment of the present application.
Detailed Description
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, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.
A web page may include a plurality of HTML elements that correspond to containers of HTML blocks, i.e., the contents of the HTML elements. Referring to the example of FIG. 1, FIG. 1 illustrates a page of a shopping website and shows the portion of the website page that comes into view of the user, and if the user scrolls the scroll bar 11 to the right of the page, the next portion of the website page content that comes into view, such as a 5F man's clothing, will continue to be visible.
Taking fig. 1 as an example, a page content similar to that of 3F or 4F may be referred to as HTML blocks, such as block 12 and block 13, and it should be noted that these two blocks are only examples, and the size of the HTML block may be larger or smaller than that of the example in fig. 1, or have other shapes. Referring to fig. 2 in conjunction, it is possible that when the shopping website is initially opened, the page in fig. 1 does not first enter the user's field of view, that is, the page in fig. 1 is not first displayed in the screen of the user equipment, for example, the contents of 1F and 2F may be displayed first, and the contents of 3F or 4F may be displayed only when the scroll bar 11 is scrolled.
If the blocks 12 and 13 adopt the lazy loading technique, even if the 3F or 4F is entered into the browser display by scrolling the scroll bar 11, the display content therein is not loaded immediately, but the position occupied by the 3F or 4F is displayed first as shown in fig. 2. In this embodiment, the portion of the web page content illustrated in fig. 2 that is not yet loaded may be referred to as a "container" (or may also be referred to as an HTML element), and after the specific page content is loaded, the portion is displayed in the form illustrated in fig. 1.
It should be noted that 3F or 4F shown in fig. 2 may render the corresponding container before entering the browser view area. For example, the user may click "www.tmall.com," which sees the contents of 1F and 2F first from the browser, while 3F or 4F has not yet entered the field of view at this time, but has rendered the container corresponding to 3F or 4F, in the form illustrated in FIG. 2. When 3F or 4F is promoted to the field of view by the scroll bar 11, the browser reloads the webpage tile, i.e. loads the content contained in the container, thus seeing the form illustrated in fig. 1. This is a lazy loading technique for blocks of web pages.
The webpage blocks are realized by the system shown in fig. 3 when the webpage blocks are lazily loaded. As shown in fig. 3, the system may include a server 31 and a client 32, for example, the server 31 may store web page information, such as HTML blocks (e.g., block codes) in the shopping website shown in fig. 1, which are stored in the server 31, and the server 31 transmits the codes to the client 32 for display. And client 32 may parse the web page code through the browser to display the web page. For example, as shown in fig. 1 or fig. 2, the page information of the shopping website, including the container and the block, is sent from the server 31 to the client 32 for loading.
For example, upon a user request www.tmall.com, for lazy-loaded tiles (e.g., 3F and 4F), the server 31 may send only the information needed to render the container to the client 32, including a preset height value of the container, such as the container height S shown in fig. 2, and the client 32 renders the container and sets the height of the container to S. When the page portion where the container is located enters the view area (i.e. displayed on the browser, the user can see the page portion), the client 32 requests the server 31 to send the information of the tile in the container, loads the tile into the container, and finally sets the height S of the container as the height of the tile.
When the preset height value of the container is inconsistent with the final block height, the height S of the container changes before and after the block is loaded, so that page shaking is caused; in order to solve the problem, the web page block lazy loading in the embodiment of the present application adopts a method flow shown in fig. 4, where the method may be executed by a server, and includes:
401. receiving a webpage browsing request sent by a client, wherein a webpage comprises a lazy loaded webpage block;
402. sending the initial height value of the container of the webpage block to a client so that the client sets the height of the container as the initial height value, wherein the initial height value is the height of the webpage block.
403. After receiving a block loading request sent by the client, sending the block information of the webpage block to the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height.
Corresponding to the execution flow on the server side shown in fig. 4, fig. 5 illustrates a flow executed by the client:
501. sending a web browsing request to a server, the requested web page comprising: a lazy loaded web page block;
502. receiving an initial height value of a container of the webpage block sent by the server, wherein the initial height value is the height of the webpage block, and setting the height of the container as the initial height value;
503. and after detecting that the webpage block enters the visual field area, sending a block loading request to the server, loading the webpage block to the container according to block information returned by the server, wherein the height of the loaded webpage block is the block height.
Referring to fig. 4 and 5, in step 501, the client sends a web page browsing request to the server, for example, the user inputs "www.tmall.com" in the browser of the computer, which is equivalent to requesting the server to browse the web page. Wherein, the webpage of the request comprises: lazy loaded web page blocks.
For example, still taking the shopping website of fig. 1 as an example, when the website is opened, the first page of the website includes "a page that enters the view area of the browser first" and "a page that does not enter the view area, and the page is to be promoted into the view area through a scroll bar", and for a webpage block included in a page portion that does not enter the view area, a lazy loading block may be set, that is, this part of the block server may send container information to the client, the client renders the container, and the block is loaded after waiting until entering the view area. Of course, the lazy load block may be set by the developer according to other rules, and may be identified as a lazy load block by a particular CLASS attribute value.
After the server receives the web browsing request in step 401, the server may send the page information of the page to the client in step 402, and for the lazy loading tile, the server temporarily does not send the tile information of the web page tile to the client first, but sends container information for containing the tile to the client, where an initial height value of the container may be included, so that the client sets the container height to the initial height value in step 502. In this embodiment, the initial height value is the height of the web page block, that is, the actual height of the HTML block obtained after the web page block is loaded at the client.
Referring to the example of fig. 2, after the client renders the container according to the initial height value in step 502, the obtained height S of the container is the block height of the webpage block, so that even after the client loads the webpage block to the container according to the block information sent by the server in step 503, the height of the webpage block after loading is also the above-mentioned block height, and since the height of the container is already the block height, the loading of the block does not cause the change of the container height.
The webpage block lazy loading method of this embodiment sets the height of the container to the block height, so that before and after the block is lazy loaded, the height of the container does not change suddenly, so that page shaking does not occur, for example, the length and the position of a vertical scroll bar do not change suddenly, user experience is improved, and the block in the page can be better positioned and navigated.
Further, as can be seen from the above example, the height of the container sent by the server to the client is the height of the webpage tile, and the height of the webpage tile may be the height of the container previously retrieved and set by the server. For example, for a page of a shopping website, when a client accesses the page for the first time, lazy loading is not performed on an originally lazy loaded block, but normal loading is performed to obtain the block height, and after the server sets the container height as the block height, the lazy loading technology can be used for subsequent access to the page, for example, in the process shown in fig. 4 and 5, the container rendered by the client has the block height during lazy loading, so that the sudden height change of the container before and after block loading is avoided. An example of how the server obtains the block height and performs lazy loading according to the block height is described below with a flow illustrated in fig. 6, which includes:
601. the server receives a browsing request of a client to a webpage;
for example, in this step, the client may send a browsing request for the web page to the server, for example, the browsing request may be a first request, a second request, a third request, or the like for the web page. Taking the first request as an example, whether the received web page browsing request is the first request or not can be distinguished by the identifier, for example, "0" can be used to indicate that the web page has never been requested, when the first request is received, the identifier is changed from "0" to "1", and when the browsing request for the web page is received again next time, it can be known that the web page has been requested by the first request is not the first request by the identifier being already "1".
602. The server sends the webpage information to the client, and the method comprises the following steps: block information of the lazy loaded webpage block and a high reporting identifier;
for example, when the server determines that this is the first browsing request for a web page, the web page information may be sent to the client. Here, the web page includes lazy load blocks, as in the example of fig. 1 and 2, some blocks in the web page are not required to be loaded immediately, and these lazy load blocks can be identified by their specific CLASS attribute.
For the lazy loading block, the lazy loading may not be executed for the moment in this example, for example, when the server sends the web page information in this step, the block information of the lazy loading web page block may be sent to the client, that is, different from the conventional lazy loading technique, for the lazy loading block, the present embodiment still sends "container + block" to the client when accessing for the first time, so that the client normally loads the web page block to the container (in the conventional technique, the container is sent first, and the block is sent again when the subsequent container enters the visual field region), that is, in this step, the lazy loading is not executed for the lazy loading block. At this point, no height value may be set for the container, so that the container loading block obtains the true height of the block.
In addition, in this step, the server also carries a height reporting identifier when sending the container and the block to the client. The height reporting mark is used for indicating the client to report the block height obtained after the block is normally loaded to the server according to the mark. The embodiment does not limit the specific setting form of the height reporting identifier, for example, a first access identifier may be added to a web page, or an attribute value of "11" is set for the lazy loading block to indicate that the height of the block needs to be reported.
603. The client sets the height of a container according to the set height value, and loads the webpage block to the container according to the block information to obtain the block height of the webpage block;
for example, after receiving the webpage information sent by the server in 602, the client may render the container according to the preset height value of the container, load the webpage blocks into the container according to the block information, and may also obtain the block height after loading the blocks. The method for obtaining the block height is not limited in the present application, for example, after the webpage block is normally loaded in the browser, the height of the webpage block can be obtained through an interface provided by JAVASCRIPT language of the browser.
604. The client sends the block height of the webpage block to the server according to the height reporting identification;
for example, the client sends the obtained block height to the server according to the height reporting identifier. When the block height is reported, the block information may be carried together, for example, the block information may be identification information of the block or code information of the block, so that the server knows the block height and the corresponding block. For example, the client sends the tile height to the server in a form or an AJAX request.
605. The server sets an initial height value of a container of the webpage tile to the tile height.
For example, the server may set the initial height value of the tile container of the web page to the tile height value according to the tile height reported by the client in step 604, so that when a subsequent client accesses the web page again, the server may return the tile height value as the initial height value of the container to the client, see steps 606 and 607 below.
606. The client sends a re-browsing request to the server;
for example, the client subsequently requests access to the web page again.
607. The server sends webpage information to the client, wherein the height of a container comprising the lazy loading block is the height of the block;
608. the client loads webpage information which comprises a rendering container, and the height of the container is the block height.
609. After the page enters the visual field area, the client requests the server to load the block;
610. the server sends the block information;
611. the client loads the blocks into the container according to the block information.
Since the height of the container is the real height of the block before and after the block is loaded, the loading of the block does not cause great change of the container, thereby avoiding page jitter.
As can be seen from fig. 6, before the lazy loading of the lazy loading block, the server has obtained the real block height of the web page block through the above-mentioned flow, and set the initial height value of the container to the block height, when the lazy loading of the subsequent lazy loading block is performed, even if the container is rendered when the block is not loaded yet, the height of the container is also the real height of the block, so the lazy loading of the block does not cause great change in the height of the container, thereby avoiding the page shaking phenomenon.
In addition, the server sets the height of the container according to the tile height value, and there are various ways, for example:
in an example, the initial height value of the container may be a style height value of a webpage block, that is, the server may set the style height value of the container to a real height of the block, that is, a block height, according to the block height value reported by the client. The style, namely CSS, is used for setting the language of the display arrangement of the HTML elements in the webpage. In this way, the server may send the style height value of the container to the client, and the client renders the container according to the style height value, where the height of the container is the tile height.
In another example, the initial height value of the container may be a custom attribute value of the container of the webpage block set by the server, and the custom attribute value is used for indicating the height of the container. In this manner, the server may send the custom property value for the container to the client, such as in 607, and the container information including the custom property value to indicate the height of the container to the client. When the client renders the container in 608, the custom attribute value may be converted into a style height value of the webpage block, and then the height of the container may be set according to the style height value.
For example, through an interface provided by the JAVASCRIPT language of the browser end for modifying the STYLE of the HTML element, the STYLE HEIGHT value of the container is set by the tile HEIGHT of the custom attribute value, i.e., the tile HEIGHT is used to set the STYLE value in the STYLE attribute of the tile corresponding to the container.
In addition, it should be noted that the browsing request in 601 may not be the first request, such as the second request, and of course, the flow in fig. 6 is executed to obtain the tile height when the first request is made, and the initial height value of the container may be set to the tile height more quickly, so as to improve the efficiency of the lazy loading effect.
In the flow of fig. 6, the client and the server may be external users accessing the web server; or, the content management system may also be a flow executed in a middle stage of the content management system, where the content management system is an internal system used in a website system to generate, edit, modify, and store webpage code content, and all systems having such functions may be referred to as a content management system, and the website system generally also has a content management system. The system typically has both a server and a client. And the flow shown in fig. 6 may be performed in a content management system.
In addition, in the web page block lazy loading method, after the loading block obtains the block height (i.e. the actual height of the web page block), the client may also store the block height in the client without reporting to the server. Therefore, after the subsequent server sends the container information with the default height value (the default height value is not the real height of the block) to the client according to the webpage browsing request sent by the client, the client can change the default height value into the stored block height, so that the container loaded by the client has the block height, and the height of the container cannot be changed after the block is loaded subsequently.
Fig. 7 is a block diagram of an apparatus for lazy loading of a webpage block in an example, where the apparatus may be disposed in a server, and the structure of the apparatus is briefly described in this embodiment, and the operation principle of the apparatus may be described with reference to the method embodiment. As shown in fig. 7, the apparatus may include: a request receiving module 71, a container transmitting module 72, and a content transmitting module 73; wherein the content of the first and second substances,
a request receiving module 71, configured to receive a web browsing request sent by a client, where a requested web includes: a lazy loaded web page block;
a container sending module 72, configured to send an initial height value of a container of the webpage tile to the client, so that the client sets the height of the container as the initial height value, where the initial height value is a tile height of the webpage tile;
the content sending module 73 is configured to send the tile information of the webpage tile to the client when receiving a tile loading request sent by the client, so that the client loads the webpage tile to the container according to the tile information, and the height of the loaded webpage tile is the tile height.
As shown in fig. 8, the apparatus may further include: a reporting indication module 74 and a height setting module 75;
a reporting indication module 74, configured to send, when receiving a browsing request for a web page, web page information of the web page to the client, where the web page information includes: block information of the lazy loaded webpage block and a high reporting identifier; the height reporting identifier is used for indicating the block height obtained after the client reports the loaded webpage block;
the height setting module 75 is configured to receive a block height of a webpage block sent by the client, and set an initial height value of a container of the webpage block as the block height.
For example, the height setting module, when setting the initial height value of the container of the webpage tile as the tile height, includes: setting a style height value of a container of the webpage block according to the block height; or setting the block height as a custom attribute value of a container of the webpage block.
Fig. 9 is a structural diagram of an apparatus for lazy loading of a webpage block in an example, where the apparatus may be disposed at a client, and the structure of the apparatus is briefly described in this embodiment, and the working principle of the apparatus may be described with reference to the method embodiment. As shown in fig. 9, the apparatus may include: a request sending module 91, a container loading module 92 and a content loading module 93; wherein the content of the first and second substances,
a request sending module 91, configured to send a web browsing request to a server, where a requested web page includes: a lazy loaded web page block;
a container loading module 92, configured to receive an initial height value of a container of the web page tile sent by the server, where the initial height value is a tile height of the web page tile, and set the height of the container as the initial height value;
the content loading module 93 is configured to send a block loading request to the server when it is detected that the webpage block enters the view area, and load the webpage block to the container according to block information returned by the server, where a height of the loaded webpage block is the block height.
As shown in fig. 10, the apparatus may further include: an indication receiving module 94, a height obtaining module 95 and a height reporting module 96; wherein the content of the first and second substances,
an indication receiving module 94, configured to send a browsing request for a web page to the server, and receive web page information returned by the server, where the web page information includes: block information of the lazy loaded webpage block and a high reporting identifier;
a height obtaining module 95, configured to set a container height according to the preset height value, and load the webpage block to the container according to the block information to obtain the block height of the webpage block;
and the height reporting module 96 is configured to send the block height of the webpage block to the server according to the height reporting identifier, so that the server sets the initial height value of the container of the webpage block to the block height.
Further, the container loading module 92, when setting the height of the container to the initial height value, includes: the initial height value is a style height value of a container of the webpage block, the style height value is the real height of the block, and the height of the container is set according to the style height value; or the initial height value is a custom attribute value of a container of the webpage block, the custom attribute value is converted into a style height value of the webpage block, and the height of the container is set according to the style height value.
The above description is only exemplary of the present application and should not be taken as limiting the present application, as any modification, equivalent replacement, or improvement made within the spirit and principle of the present application should be included in the scope of protection of the present application.
Claims (14)
1. A method for lazy loading of web page blocks is characterized by comprising the following steps:
receiving a webpage browsing request sent by a client, wherein the requested webpage comprises: a lazy loaded web page block;
sending the initial height value of the container of the webpage block to the client so that the client sets the height of the container as the initial height value, wherein the initial height value is the block height of the webpage block;
after receiving a block loading request sent by the client, sending the block information of the webpage block to the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height.
2. The method of claim 1, wherein the web browsing request is a non-first browsing request before receiving the web browsing request sent by the client, the method further comprising:
after receiving a first browsing request for a webpage, sending webpage information of the webpage to the client, wherein the webpage information comprises: block information of the lazy loaded webpage block and a high reporting identifier; the height reporting identifier is used for indicating the block height obtained after the client reports the loaded webpage block;
and receiving the block height of the webpage block sent by the client, and setting the initial height value of the container of the webpage block as the block height.
3. The method of claim 2, wherein the initial height value of the container is: a style height value, the setting of an initial height value of a container of a webpage tile to the tile height, comprising:
and setting a style height value of a container of the webpage block according to the block height.
4. The method of claim 2, wherein the initial height value is: custom attribute values, setting an initial height value of a container of a webpage tile to the tile height, comprising:
and setting the block height as a custom attribute value of a container of the webpage block.
5. A method for lazy loading of web page blocks is characterized by comprising the following steps:
sending a web browsing request to a server, the requested web page comprising: a lazy loaded web page block;
receiving an initial height value of a container of the webpage block sent by the server, wherein the initial height value is the block height of the webpage block, and the height of the container is set as the initial height value;
and after detecting that the webpage block enters the visual field area, sending a block loading request to the server, loading the webpage block to the container according to block information returned by the server, wherein the height of the loaded webpage block is the block height.
6. The method of claim 5, wherein the web browsing request is a non-first-time browsing request before sending the web browsing request to a server, the method further comprising:
sending a first browsing request for a webpage to the server, and receiving webpage information returned by the server, wherein the webpage information comprises: block information of the lazy loaded webpage block and a high reporting identifier;
loading the webpage blocks to a container according to the block information to obtain the block height of the webpage blocks;
and sending the block height of the webpage block to the server according to the height reporting identifier so that the server sets the initial height value of the container of the webpage block as the block height.
7. The method of claim 5, wherein receiving an initial height value of a container of the webpage tile sent by the server and setting a height of the container to the initial height value comprises:
the initial height value is a style height value set according to the block height of the webpage block, and the height of the container is set according to the style height value.
8. The method of claim 5, wherein receiving an initial height value of a container of the webpage tile sent by the server and setting a height of the container to the initial height value comprises:
the initial height value is a custom attribute value set according to the block height of the webpage block, the custom attribute value is converted into a style height value of the webpage block, and the height of the container is set according to the style height value.
9. An apparatus for lazy loading of web page blocks, comprising:
a request receiving module, configured to receive a web browsing request sent by a client, where a requested web includes: a lazy loaded web page block;
a container sending module, configured to send an initial height value of a container of the webpage block to the client, so that the client sets the height of the container as the initial height value, where the initial height value is a block height of the webpage block;
the content sending module is used for sending the block information of the webpage block to the client after receiving a block loading request sent by the client, so that the client loads the webpage block to the container according to the block information, and the height of the loaded webpage block is the block height.
10. The apparatus of claim 9, further comprising:
the reporting indication module is configured to send, after receiving a first browsing request for a web page, web page information of the web page to the client, where the web page information includes: block information of the lazy loaded webpage block and a high reporting identifier; the height reporting identifier is used for indicating the block height obtained after the client reports the loaded webpage block; the webpage browsing request received by the request receiving module is a non-first browsing request;
and the height setting module is used for receiving the block height of the webpage block sent by the client and setting the initial height value of the container of the webpage block as the block height.
11. The apparatus of claim 10, wherein the initial height value of the container is: a style height value or custom attribute value;
the height setting module is used for setting the style height value of the container of the webpage block according to the block height when the initial height value of the container of the webpage block is set as the block height; or setting the block height as a custom attribute value of a container of the webpage block.
12. An apparatus for lazy loading of web page blocks, comprising:
a request sending module, configured to send a web browsing request to a server, where a requested web page includes: a lazy loaded web page block;
the system comprises a container loading module, a server and a display module, wherein the container loading module is used for receiving an initial height value of a container of a webpage block sent by the server, the initial height value is the block height of the webpage block, and the height of the container is set as the initial height value;
and the content loading module is used for sending a block loading request to the server after detecting that the webpage block enters the visual field area, loading the webpage block to the container according to block information returned by the server, and setting the height of the loaded webpage block as the block height.
13. The apparatus of claim 12, further comprising:
the indication receiving module is used for sending a first browsing request to the server and receiving webpage information returned by the server, wherein the webpage information comprises: block information of the lazy loaded webpage block and a high reporting identifier; the webpage browsing request sent by the request sending module is a non-first browsing request;
the height acquisition module is used for loading the webpage blocks to a container according to the block information and acquiring the block height of the webpage blocks;
and the height reporting module is used for sending the block height of the webpage block to the server according to the height reporting identification so that the server sets the initial height value of the container of the webpage block as the block height.
14. The apparatus of claim 12, wherein the initial height value is a height value set according to a block height of the webpage block, or wherein the initial height value is a custom attribute value set according to the block height of the webpage block;
the container loading module is used for setting the height of the container according to the pattern height value when the height of the container is set to be the initial height value; or converting the custom attribute value into a style height value of a webpage block, and setting the height of the container according to the style height value.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510451627.3A CN106649299B (en) | 2015-07-28 | 2015-07-28 | Method and device for lazy loading of webpage block |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510451627.3A CN106649299B (en) | 2015-07-28 | 2015-07-28 | Method and device for lazy loading of webpage block |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106649299A CN106649299A (en) | 2017-05-10 |
| CN106649299B true CN106649299B (en) | 2020-09-15 |
Family
ID=58815284
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510451627.3A Active CN106649299B (en) | 2015-07-28 | 2015-07-28 | Method and device for lazy loading of webpage block |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106649299B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108804171A (en) * | 2018-03-30 | 2018-11-13 | 广东睿江云计算股份有限公司 | A kind of webpage lazyness loading method of simplicity |
| CN109165372B (en) * | 2018-08-09 | 2020-10-13 | 深圳乐信软件技术有限公司 | Webpage loading method, device, equipment and storage medium |
| CN109298905A (en) * | 2018-08-15 | 2019-02-01 | 深圳点猫科技有限公司 | Utilize the method and electronic equipment of the optimization picture lazyness load of front end programming language |
| CN110837613A (en) * | 2019-10-25 | 2020-02-25 | 陈奕博 | Front-end programming optimization image lazy loading method |
| CN110851058B (en) * | 2019-11-11 | 2021-03-30 | 支付宝(杭州)信息技术有限公司 | Page virtual scrolling method, device and equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1744027A (en) * | 2004-08-31 | 2006-03-08 | 佳能株式会社 | Layout processing method, information processing apparatus |
| CN101499099A (en) * | 2009-03-23 | 2009-08-05 | 深圳市金蝶中间件有限公司 | Method and system for WEB page layout |
| CN103914213A (en) * | 2012-12-31 | 2014-07-09 | 北京新媒传信科技有限公司 | Method and device for eliminating page dithering |
| CN104750863A (en) * | 2015-04-16 | 2015-07-01 | 车智互联（北京）科技有限公司 | Method and system for automatically examining webpage graphics size |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225198B2 (en) * | 2008-03-31 | 2012-07-17 | Vistaprint Technologies Limited | Flexible web page template building system and method |
| CN104102643B (en) * | 2013-04-03 | 2017-09-22 | 阿里巴巴集团控股有限公司 | A kind of method and apparatus for carrying out page snapshot |
-
2015
- 2015-07-28 CN CN201510451627.3A patent/CN106649299B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1744027A (en) * | 2004-08-31 | 2006-03-08 | 佳能株式会社 | Layout processing method, information processing apparatus |
| CN101499099A (en) * | 2009-03-23 | 2009-08-05 | 深圳市金蝶中间件有限公司 | Method and system for WEB page layout |
| CN103914213A (en) * | 2012-12-31 | 2014-07-09 | 北京新媒传信科技有限公司 | Method and device for eliminating page dithering |
| CN104750863A (en) * | 2015-04-16 | 2015-07-01 | 车智互联（北京）科技有限公司 | Method and system for automatically examining webpage graphics size |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106649299A (en) | 2017-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11580175B2 (en) | Transcoding and serving resources | |
| US10318095B2 (en) | Reader mode presentation of web content | |
| CN106649299B (en) | Method and device for lazy loading of webpage block | |
| US8751953B2 (en) | Progress indicators for loading content | |
| CN104077387B (en) | A kind of web page contents display methods and browser device | |
| US9727656B2 (en) | Interactive sitemap with user footprints | |
| CN110209966B (en) | Webpage refreshing method, webpage system and electronic equipment | |
| US20160012018A1 (en) | Information processing device, information processing method, information processing program, display control device, and display control program | |
| KR20140012664A (en) | Method for rearranging web page | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN104423991B (en) | Webpage, the method and device that web data is provided are loaded in mobile terminal | |
| CN108595697A (en) | Webpage integrated approach, apparatus and system | |
| US10725645B2 (en) | Information processing device for controlling display of web pages using main display area and sub display area | |
| CN107391534B (en) | Page display method, page file return method, page display device, page file return device and computer storage medium | |
| CN113434138B (en) | Information display method and device and electronic equipment | |
| CN108664191B (en) | System access method and device | |
| CN111538453B (en) | Book detail page display method, terminal and computer storage medium | |
| CN113190321A (en) | Method and equipment for application program page pull-up refreshing | |
| US20170235456A1 (en) | Automatic page-editing method, non-transitory computer-readable recording medium, and automatic page-editing apparatus | |
| US11113297B2 (en) | Information processing device and information terminal | |
| US9794369B2 (en) | Active web page consolidator | |
| WO2016011699A1 (en) | Method and device for use in configuring navigation page of browser | |
| CN104978181B (en) | Page display method, terminal and device | |
| US20020091735A1 (en) | Method and apparatus for locating geographically classified establishment information | |
| WO2014055890A2 (en) | Transcoding and serving resources |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |