CN113779449A - Page loading method and device, electronic equipment and storage medium - Google Patents
Page loading method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113779449A CN113779449A CN202010833859.6A CN202010833859A CN113779449A CN 113779449 A CN113779449 A CN 113779449A CN 202010833859 A CN202010833859 A CN 202010833859A CN 113779449 A CN113779449 A CN 113779449A
- Authority
- CN
- China
- Prior art keywords
- display
- page
- loading
- display object
- size
- 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.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 117
- 238000000034 method Methods 0.000 claims abstract description 29
- 230000006870 function Effects 0.000 claims description 20
- 238000004806 packaging method and process Methods 0.000 claims description 20
- 238000012544 monitoring process Methods 0.000 claims description 13
- 238000009877 rendering Methods 0.000 claims description 11
- 230000008859 change Effects 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 6
- 238000010586 diagram Methods 0.000 description 15
- 230000003287 optical effect Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention discloses a page loading method, a device, equipment and a storage medium, wherein the method comprises the following steps: when a page opening instruction is received, determining the size of a display area of a current display screen; determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object; and loading display object data based on the first total quantity so as to display a first page. By the technical scheme of the embodiment of the invention, the aim of displaying as many display objects as possible is fulfilled, and the page loading speed is increased.
Description
Technical Field
The embodiment of the invention relates to the technical field of computers, in particular to a page loading method and device, electronic equipment and a storage medium.
Background
With the continuous development of information technology, more and more internet developers show data in web pages through charts (such as line charts, column charts, pie charts and the like) in order to show characteristics of data distribution, change trend and the like more clearly and intuitively. Compared with text display, chart display occupies more information resources and system resources, so that when a large number of charts exist in a single page, the problems of slow data loading, untimely rendering and the like can occur.
There are two common page loading methods: one of the methods is that when a user opens a page, all data interfaces are requested at one time to obtain all chart data of the page, and then the chart data are rendered one by one to realize chart display; and the other method is that the chart to be displayed is paged, only the interface corresponding to the current page is requested to obtain the chart data to be displayed in the current page each time, and then the chart data is rendered to realize chart display.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
according to the first page loading method, since the page is requested at one time to display all data interfaces of the graph and render the graph, the problems that data return is not timely and requests of part of the interfaces fail exist. According to the second page loading method, all charts needing to be displayed on the page are detached and displayed in batches in a paging mode, so that data displayed in the current paging page are reduced, when a user needs to check different charts, the user needs to continuously turn pages to search, and the use difficulty of the user is improved.
Disclosure of Invention
The embodiment of the invention provides a page loading method and device, electronic equipment and a storage medium, which achieve the purpose of displaying as many display objects as possible and improve the page loading speed.
In a first aspect, an embodiment of the present invention provides a page loading method, including:
when a page opening instruction is received, determining the size of a display area of a current display screen;
determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object;
and loading display object data based on the first total quantity so as to display a first page.
In a second aspect, an embodiment of the present invention further provides a page loading apparatus, including:
the display area determining module is used for determining the size of the display area of the current display screen when a page opening instruction is received;
the display quantity determining module is used for determining a first total quantity of display objects displayed on the current display screen according to the size of the display area and the size of a preset single display object;
and the first loading module is used for loading the display object data based on the first total quantity so as to display the first page.
In a third aspect, an embodiment of the present invention further provides an apparatus, where the apparatus includes:
one or more processors;
a memory for storing one or more programs;
when executed by the one or more processors, cause the one or more processors to implement the page loading method steps as provided by any of the embodiments of the invention.
In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the page loading method provided in any embodiment of the present invention.
The embodiment of the invention has the following advantages or beneficial effects:
when a page opening instruction is received, determining the size of a display area of a current display screen; determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object; and loading the data of the display objects based on the first total number to display the first page, so that the aim of displaying as many display objects as possible is fulfilled, but not all the display objects are loaded, thereby improving the page loading speed, and achieving the aims of ensuring that the displayed display objects are as many as possible and improving the page loading speed.
Drawings
Fig. 1 is a flowchart of a page loading method according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a page displayed in a display area of a display screen according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a page displayed in a display area of another display screen according to an embodiment of the present invention;
fig. 4 is a flowchart of a page loading method according to a second embodiment of the present invention;
FIG. 5 is a schematic diagram of a first page display according to the second embodiment of the present invention;
FIG. 6 is a schematic diagram illustrating a page display according to a second embodiment of the present invention;
FIG. 7 is a schematic diagram illustrating another page display according to the second embodiment of the present invention;
fig. 8 is a flowchart of a page loading method according to a third embodiment of the present invention;
fig. 9 is a flowchart of another page loading method provided in the third embodiment of the present invention;
fig. 10 is a schematic structural diagram of a page loading apparatus according to a fourth embodiment of the present invention;
fig. 11 is a schematic structural diagram of an apparatus according to a fifth embodiment of the present invention.
Detailed Description
The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.
Example one
Fig. 1 is a flowchart of a page loading method according to an embodiment of the present invention, which is applicable to an application scenario in which a page including a large number of complex display objects is loaded and displayed, where the complex display objects mainly refer to display objects, such as pictures and diagrams, which consume more system resources and cause a slower page loading speed in a loading process. The method may be performed by a page loading apparatus, which may be implemented by software and/or hardware.
As shown in fig. 1, the method specifically includes the following steps:
and step 110, when a page opening instruction is received, determining the size of a display area of the current display screen.
The page may be a web page, for example, a page obtained by a user searching a browser by inputting a search keyword. The current display screen specifically refers to a display screen of the terminal device, for example, if a user opens a certain webpage through a mobile phone, the current display screen is the display screen of the mobile phone, and if the user opens a certain webpage through a computer, the current display screen is the display screen of the computer.
Referring to a page display diagram of a display area of a display screen shown in fig. 2, it can be understood that the size of the display screen does not represent the size of the display area, because some terminals have a partial area of the display screen occupied by virtual keys, and the partial area cannot display page contents. The user can only see the page content presented on the display area of the display screen, but cannot see other page content that does not fall on the display area of the display screen, as shown in fig. 2, the content of the page 200 cannot be presented in its entirety in the display area 210 of the display screen 220 at one time, only a portion of the content of the page can be presented at a time, when the user finishes viewing the content of the page (e.g. content a) currently presented in the display area 210 of the display screen 220, the user can move the page up by triggering the scroll bar on the right side bar or directly sliding the page with a finger, that is, the content (for example, content a) in the display area of the current display screen is moved upwards to leave the display area, and the content (for example, content B) of the following page follows the upward movement and appears in the display area of the display screen to realize the presentation of other content of the page, which can be referred to the page display diagram of another display screen display area shown in fig. 3 correspondingly. In the technical solution of this embodiment, when a page open instruction is received, all contents (for example, content a and content B) of a target page are not loaded, but target contents capable of being displayed are determined according to the size of the display area of the current display screen, only the target contents capable of being displayed (for example, content a) are loaded, and page contents not capable of being displayed at the current time (for example, content B) are not loaded.
And step 120, determining a first total number of the display objects displayed on the current display screen according to the size of the display area and the size of a preset single display object.
Wherein the display object comprises at least one of: pictures and charts.
Illustratively, the determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object includes:
determining a first number of transversely displayed display objects on a current display screen according to the width length of the display area and the width length of a preset single display object;
determining a second number of display objects longitudinally displayed on the current display screen according to the high side length of the display area and the high side length of a preset single display object;
determining the first total number of display objects displayed on the current display screen based on the first number and the second number.
Assuming that the size of the display area is 56 × 32, and the size of the preset single display object is 7 × 8, the first number of the display objects displayed in the horizontal direction of the current display screen is 32/8 × 4, the second number of the display objects displayed in the vertical direction of the current display screen is 56/7 × 8, and correspondingly, the first total number of the display objects displayed in the current display screen is 4 × 8 × 32. If the result of the division is not an integer, then rounding down, e.g., if the result of the division is 4.2, then the value is 4.
And step 130, loading display object data based on the first total quantity to display a first page.
Specifically, only the first total amount of display object data is loaded, and other display objects are not additionally loaded. For example, assuming that the first total number is 32, the display objects are charts, the target page totally includes 50 charts, only the data of 32 charts is currently loaded, and the data of the remaining 18 charts is not loaded, because the current display area of the display screen can only show 32 charts at most, and cannot show all of the 50 charts, and the loading of the data of the 18 charts which cannot be currently shown can cause the overall loading speed to be slow, which affects the displaying speed of the 32 charts, in the technical solution of the embodiment, only the data of the 32 charts is loaded, which achieves the purpose of increasing the loading speed, and does not affect the viewing effect of the user, and even if the data of the 50 charts are all loaded, the user can only view the 32 charts, which is limited by the size of the display area of the current display screen, not all charts can be shown at once. The first page is a page displayed in a display area of a current display screen.
Illustratively, the loading of the display object data based on the first total number includes:
determining target display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page;
respectively acquiring associated data corresponding to each target display object through a data interface which requests to be matched with each target display object;
and loading target display object data based on the associated data.
The display objects included in each page and the position relation of the display objects in the page are predetermined, and the target display objects corresponding to the first total number are sequentially determined from top to bottom and from left to right. For example, the target page corresponding to the page open instruction includes 4 display objects, namely, display objects A, B, C and D, and the positional relationships between the display objects A, B, C and D are sequentially a-B-C-D from top to bottom and from left to right, that is, the display object a may be located at the left or top of the display object B; the display object B may be located to the left or above the display object C; the display object C may be positioned to the left or above the display object D. And setting the first total number to be 2, preferentially loading the data of the display objects A and B, namely the display objects A and B are the target display objects.
Further, the loading of the target display object data based on the associated data includes:
based on the display position coordinates of each target display object, the display position of each target display object on the current display screen is laid out;
rendering each target display object based on the display position, the display style data and the target display object data of each target display object on the current display screen to display the first page;
wherein the associated data includes the presentation position coordinates, the presentation style data, and the target display object data.
According to the technical scheme of the embodiment, when a page opening instruction is received, the size of a display area of a current display screen is determined; determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object; and loading the data of the display objects based on the first total number to display the first page, so that the aim of displaying as many display objects as possible is fulfilled, but not all the display objects are loaded, thereby improving the page loading speed, and achieving the aims of ensuring that the displayed display objects are as many as possible and improving the page loading speed.
Example two
Fig. 4 is a flowchart of a page loading method according to a second embodiment of the present invention, in this embodiment, on the basis of the above embodiment, after the first page is displayed, an operation of monitoring a state of the first page is added, so as to achieve a purpose of displaying remaining non-displayed display objects, which is convenient for a user to operate and improves user experience. Wherein explanations of the same or corresponding terms as those of the above-described embodiments are omitted.
Referring to fig. 4, the page loading method provided in this embodiment specifically includes the following steps:
And step 420, determining a first total number of display objects displayed on the current display screen according to the size of the display area and the size of a preset single display object.
And 430, loading display object data based on the first total quantity to display a first page.
Wherein the first page state comprises at least one of:
the display duration of the first page reaches a duration threshold;
the distance between the scroll bar of the first page and the bottom of the display area of the first page reaches a distance threshold.
Illustratively, the loading the data of the non-displayed display object according to the position relationship of each display object corresponding to the page opening instruction in the page to display the second page includes:
loading the data of the non-displayed display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for loading display object data to obtain a first packaging function, and calling the first packaging function to realize each time when a display object data loading task is executed. And monitoring whether the distance between the scroll bar of the first page and the bottom of the display area of the first page reaches a distance threshold value or not, wherein the monitoring can be realized by monitoring a scroll event of the window.
Specifically, referring to the schematic illustration of the first page shown in fig. 5, a display object a is displayed in the first page 510, and when the display duration of the first page 510 reaches a duration threshold, or a distance a between a scroll bar 520 of the first page 510 and the bottom of the display area of the first page 510 reaches a distance threshold, data of an undisplayed display object in a target page corresponding to the page opening instruction is loaded. As shown in fig. 2, for a target page corresponding to the page open instruction including display objects a and B, where the page showing the display object a is a first page, when a showing duration of the first page reaches a duration threshold or a distance between a scroll bar of the first page and a bottom of a display area of the first page reaches a distance threshold, loading data of the display object B to show a second page including the display object B, as shown in fig. 3. It can be understood that, if the number of the non-displayed display objects is multiple, the loading order is determined according to the predetermined position relationship of each display object in the page, and each display object is sequentially loaded and displayed in stages.
The process of displaying the second page is similar to the process of displaying the first page, and the difference between the two processes is that the loading objects are different, when the first page is displayed, the loading objects are display objects arranged in front of the target page, the number of the display objects is determined according to the size of a single display object and the size of a display area of a current display screen, and when the second page is displayed, the loading objects are display objects arranged behind the display objects in the first page, for example, the relationship between the display objects a and B shown in fig. 2 and 3. In fig. 2 and fig. 3, it is illustrated that the display area of the current display screen can only display one display object at a time, and if the display area of the current display screen can display a plurality of display objects at a time, the implementation principle is similar, for example, referring to the page display schematic diagrams shown in fig. 6 and fig. 7, taking the display area of the current display screen can display 4 display objects at a time as an example, where the pages displaying the display objects A, B, C and D are the first page, the pages displaying the display objects E, F, G and H are the second page, and the pages including the display objects A, B, C, D, E, F, G and H are the target pages corresponding to the page open instruction. According to the technical scheme, the display objects to be displayed in the target page are loaded and rendered in batches, so that the problem that interface return data is not timely due to the problem of resource utilization caused by excessive interfaces of one-time requests is solved, and the problem that the page is jammed or even crashed due to the fact that a great deal of data is rendered at one time and a rendering engine is greatly stressed is solved.
The identifiers of all display objects in the target page corresponding to the page opening instruction can be stored as an array, the display objects are sequentially stored in the array based on a display sequence, for example, the array is defined as shardList, if a display area of a current display screen can display 6 display objects each time, each 6 display objects based on the identifiers of the display objects are a loop group, a variable last is defined for recording a last index of the loop group, each time 6 display objects are displayed, 6 div containers of a first page are preferentially created for the existence of the display objects, the array is traversed, a data request is sent to a back-end server, and the server renders the corresponding div containers after returning data, so as to realize the display of the first page; when it is monitored that the display duration of the first page reaches a duration threshold or the distance between a scroll bar of the first page and the bottom of a display area of the first page reaches a distance threshold, displaying the second page, loading and rendering the next 6 display objects based on the index of the display object identifier recorded by the variable last to realize the display of the second page, comparing the index recorded by the variable last with the length of the array shardList when data is requested each time, and when the index recorded by the variable last is the same as the length of the array shardList, no data request is sent any more, which indicates that all the display objects in the target page are displayed.
Because the implementation logic for displaying the first page is the same as the implementation logic for displaying the second page, the associated data corresponding to the target display objects is obtained through a data interface matched with the target display objects, and the display position of each target display object on the current display screen is laid out based on the display position coordinates of each target display object; and rendering each target display object based on the display position, the display style data and the target display object data of each target display object on the current display screen, wherein the different parameters are different, namely the corresponding target display objects are different, so that the implementation logic can be packaged into a common function, the same packaging function can be called through different parameters every time, the repeated listing of the same logic code is avoided, and the problem of logic code redundancy is solved.
According to the technical scheme, after the first page is displayed, the state of the first page is monitored, when the state of the first page is monitored, the display duration of the first page reaches a duration threshold value, or the scroll bar of the first page and the distance between the bottom of the display area of the first page reach a distance threshold value, the second page is displayed according to the display logic of the first page, the purpose of displaying the rest display objects which are not displayed is achieved, the operation of a user is facilitated, and the user experience is improved. Compared with the mode of displaying the display objects in a paging mode, each paging page only displays a limited number of display objects, and the scheme solves the problems that the number of the display objects displayed in a single paging mode is small, and the display objects need to be searched by page turning for many times.
EXAMPLE III
Fig. 8 is a flowchart of a page loading method according to a third embodiment of the present invention, in which on the basis of the above embodiment, after a first page is displayed, an operation of monitoring a state of the first page is added to achieve a purpose of displaying remaining non-displayed display objects, and meanwhile, the operation is adapted to a page window, which is convenient for a user to operate and improves user experience. Wherein explanations of the same or corresponding terms as those of the above-described embodiments are omitted.
Referring to fig. 8, the page loading method provided in this embodiment specifically includes the following steps:
And step 820, determining a first total number of the display objects displayed on the current display screen according to the size of the display area and the size of a preset single display object.
And 830, loading display object data based on the first total quantity to display a first page.
And 840, monitoring the state of the first page, and loading data of the non-displayed display objects according to the monitored window size change of the first page and the position relation of each display object corresponding to the page opening instruction in the page so as to display a second page.
The loading, according to the monitored change in the size of the window of the first page, data of the non-displayed display object according to the position relationship of each display object corresponding to the page opening instruction in the page to display a second page includes:
determining a second total number of display objects displayed on a second page based on the changed size of the display area of the first page and a preset size of a single display object;
loading the data of the non-displayed display objects corresponding to the second total amount according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for determining the total number of display objects to be displayed according to the size of a display area and the size of a preset single display object to obtain a second packaging function, and calling the second packaging function to realize the task of determining the total number of the display objects to be displayed according to the size of the display area and the size of the preset single display object each time.
Specifically, the change of the first page window can be monitored by monitoring a resize event of the window, and when the size of the first page window changes, the number of the display objects that can be displayed by the first page window needs to be recalculated, and the display objects are re-rendered, so that a self-adaptive effect is achieved. It can be understood that, if the size of the first page window changes, the total number of the display objects that can be displayed is determined based on the size of the display area of the changed first page and the size of a preset single display object, and then the display objects of the corresponding number are re-rendered, so as to achieve the purpose of self-adapting to the page window. It can be understood that, since the data of the display object displayed in the first page is already loaded, when the window size of the first page is changed, the corresponding display object only needs to be re-rendered based on the changed window, and the data does not need to be repeatedly loaded. And if the change of the first page window is used as a display instruction for triggering a second page, loading and rendering the target object which is not displayed.
The logic programs for determining the total number of the display objects according to the size of the display area and the size of the preset single display object are repeatedly used when the page window is changed every time, so that the logic programs for determining the total number of the display objects according to the size of the display area and the size of the preset single display object can be packaged into a common function, the common function can be called through different parameters every time when needed, repeated listing of the same logic code is avoided, and the problem of logic code redundancy is solved.
According to the technical scheme, after the first page is displayed, when the window size of the first page is monitored to be changed, the total number of the displayed display objects can be determined based on the changed size of the page display area, and then the displayed display objects can be repeatedly rendered, so that the purpose of self-adaption page windows is achieved, if the second page is displayed in the page state, the newly determined non-displayed display objects in the total number are loaded and rendered, so that the non-displayed display objects are displayed, the page loading speed is increased, the user operation is facilitated, and the user experience is improved.
On the basis of the technical solutions of the above embodiments, taking the display object as a graph as an example, referring to a flow diagram of another page loading method shown in fig. 9, the method specifically includes: receiving a page opening instruction, loading a Document Object Model (DOM), calculating the total number of charts capable of being displayed according to the size of a display area of a display screen and the size of a preset single chart, calling a data interface to obtain chart data capable of being displayed, rendering the charts to realize page display, monitoring a scroll event of window, and calling the data interface to request the remaining chart data which are not displayed and correspond to the total number when a distance between a scroll bar and the bottom of a page is 10 percent; and monitoring a resize event of the window, and recalculating the total number of the charts which can be displayed when the page window is changed so as to adjust the height and the width of the chart container div, and re-rendering the charts to achieve the self-adaptive effect. By using the scroll event of the window, the page is monitored to roll, and when the distance from the bottom of the page is still 10%, the back-end interface is requested to render the chart, so that the request resource is saved, and the time for a user to wait for the interface response and render the dom is reduced. The front end highly packages the dom loading, initialization, line drawing parameter and other renderings of the graph, and a public packaging function is called when the graph is rendered each time, so that the aim of reducing repeated codes is fulfilled.
The following is an embodiment of the page loading apparatus provided in the embodiments of the present invention, and the apparatus and the page loading method in the embodiments belong to the same inventive concept, and details that are not described in detail in the embodiments of the page loading apparatus may refer to the embodiments of the page loading method.
Example four
Fig. 10 is a schematic structural diagram of a page loading apparatus according to a fourth embodiment of the present invention, where the apparatus specifically includes: a display area determination module 1010, a presentation number determination module 1020, and a first loading module 1030.
The display area determining module 1010 is configured to determine the size of a display area of a current display screen when a page opening instruction is received; a display number determining module 1020, configured to determine, according to the size of the display area and the size of a preset single display object, a first total number of display objects displayed on a current display screen; and a loading module 1030, configured to load display object data based on the first total number to display a first page.
Further, the display quantity determining module 1020 includes:
the first quantity determining unit is used for determining a first quantity of display objects transversely displayed on a current display screen according to the width length of the display area and the width length of a preset single display object;
the second quantity determining unit is used for determining a second quantity of the display objects longitudinally displayed on the current display screen according to the high side length of the display area and the high side length of a preset single display object;
a total number determining unit, configured to determine the first total number of display objects displayed on the current display screen based on the first number and the second number.
Further, the loading module 1030 includes:
the determining unit is used for determining target display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page;
the acquisition unit is used for respectively acquiring the associated data corresponding to each target display object through a data interface which requests to be matched with each target display object;
and the loading unit is used for loading the target display object data based on the associated data.
Further, the loading unit includes:
the local subunit is used for laying out the display position of each target display object on the current display screen based on the display position coordinate of each target display object;
the rendering subunit is configured to render each target display object based on a display position of the target display object on a current display screen, display style data, and target display object data, so as to display the first page;
wherein the associated data includes the presentation position coordinates, the presentation style data, and the target display object data.
Further, the apparatus further comprises: the monitoring module is used for monitoring the state of the first page after the first page is displayed; and the second loading module is used for loading the data of the non-displayed display objects according to the monitored first page state and the position relation of each display object corresponding to the page opening instruction in the page so as to display a second page.
Further, the first page state includes at least one of:
the display duration of the first page reaches a duration threshold;
the distance between the scroll bar of the first page and the bottom of the display area of the first page reaches a distance threshold.
Further, the second loading module is specifically configured to:
loading the data of the non-displayed display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for loading display object data to obtain a first packaging function, and calling the first packaging function to realize each time when a display object data loading task is executed.
Further, the first page state includes that the window size of the first page is changed.
Further, the second loading module comprises:
the determining unit is used for determining a second total number of display objects displayed on a second page based on the changed size of the display area of the first page and the size of a preset single display object;
the loading unit is used for loading the data of the non-displayed display objects corresponding to the second total amount according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for determining the total number of display objects to be displayed according to the size of a display area and the size of a preset single display object to obtain a second packaging function, and calling the second packaging function to realize the task of determining the total number of the display objects to be displayed according to the size of the display area and the size of the preset single display object each time.
Further, the display object includes at least one of: pictures and charts.
According to the technical scheme of the embodiment, when a page opening instruction is received, the size of a display area of a current display screen is determined; determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object; and loading the data of the display objects based on the first total number to display the first page, so that the aim of displaying as many display objects as possible is fulfilled, but not all the display objects are loaded, thereby improving the page loading speed, and achieving the aims of ensuring that the displayed display objects are as many as possible and improving the page loading speed.
The page loading device provided by the embodiment of the invention can execute the page loading method provided by any embodiment of the invention, and has the corresponding functional module and beneficial effect of executing the page loading method.
EXAMPLE five
Fig. 11 is a schematic structural diagram of an apparatus according to a fifth embodiment of the present invention. FIG. 11 illustrates a block diagram of an exemplary device 12 suitable for use in implementing embodiments of the present invention. The device 12 shown in fig. 11 is only an example and should not bring any limitation to the function and the scope of use of the embodiment of the present invention.
As shown in FIG. 11, device 12 is in the form of a general purpose computing device. The components of device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 and the processing unit 16.
The system memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)30 and/or cache memory 32. Device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 11, and commonly referred to as a "hard drive"). Although not shown in FIG. 11, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. System memory 28 may include at least one program product having a set of program modules (e.g., at least one display area determining module 910, presentation number determining module 920, and first loading module 930) configured to perform the functions of embodiments of the present invention.
A program/utility 40 having a set (at least one display area determining module 910, presentation number determining module 920, and first loading module 930) of program modules 42 may be stored, for example, in system memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may include an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.
The processing unit 16 executes various functional applications and page loads by executing programs stored in the system memory 28, for example, implementing a page loading method provided by the embodiment of the present invention, the method includes:
when a page opening instruction is received, determining the size of a display area of a current display screen;
determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object;
and loading display object data based on the first total quantity so as to display a first page.
Of course, those skilled in the art can understand that the processor may also implement the technical solution of the page loading method provided by any embodiment of the present invention.
EXAMPLE six
A sixth embodiment provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the page loading method provided in any embodiment of the present invention, and the method includes:
when a page opening instruction is received, determining the size of a display area of a current display screen;
determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object;
and loading display object data based on the first total quantity so as to display a first page.
Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer-readable storage medium may be, for example but not limited to: an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
It will be understood by those skilled in the art that the modules or steps of the invention described above may be implemented by a general purpose computing device, they may be centralized on a single computing device or distributed across a network of computing devices, and optionally they may be implemented by program code executable by a computing device, such that it may be stored in a memory device and executed by a computing device, or it may be separately fabricated into various integrated circuit modules, or it may be fabricated by fabricating a plurality of modules or steps thereof into a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.
It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.
Claims (13)
1. A page loading method is characterized by comprising the following steps:
when a page opening instruction is received, determining the size of a display area of a current display screen;
determining a first total number of display objects displayed on a current display screen according to the size of the display area and the size of a preset single display object;
and loading display object data based on the first total quantity so as to display a first page.
2. The method of claim 1, wherein the determining a first total number of display objects displayed on a current display screen according to the size of the display area and a preset size of a single display object comprises:
determining a first number of transversely displayed display objects on a current display screen according to the width length of the display area and the width length of a preset single display object;
determining a second number of display objects longitudinally displayed on the current display screen according to the high side length of the display area and the high side length of a preset single display object;
determining the first total number of display objects displayed on the current display screen based on the first number and the second number.
3. The method of claim 1, wherein the loading of display object data based on the first total number comprises:
determining target display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page;
respectively acquiring associated data corresponding to each target display object through a data interface which requests to be matched with each target display object;
and loading target display object data based on the associated data.
4. The method of claim 3, wherein the target display object data loading based on the association data comprises:
based on the display position coordinates of each target display object, the display position of each target display object on the current display screen is laid out;
rendering each target display object based on the display position, the display style data and the target display object data of each target display object on the current display screen to display the first page;
wherein the associated data includes the presentation position coordinates, the presentation style data, and the target display object data.
5. The method of any of claims 1-4, wherein after said presenting the first page, further comprising:
monitoring the state of the first page;
and loading data of the non-displayed display objects according to the monitored first page state and the position relation of each display object corresponding to the page opening instruction in the page so as to display a second page.
6. The method of claim 5, wherein the first page state comprises at least one of:
the display duration of the first page reaches a duration threshold;
the distance between the scroll bar of the first page and the bottom of the display area of the first page reaches a distance threshold.
7. The method according to claim 6, wherein the loading data of the non-displayed display objects according to the position relationship of each display object corresponding to the page opening instruction in the page to display the second page comprises:
loading the data of the non-displayed display objects corresponding to the first total number according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for loading display object data to obtain a first packaging function, and calling the first packaging function to realize each time when a display object data loading task is executed.
8. The method of claim 5, wherein the first page state comprises a change in window size of the first page.
9. The method according to claim 8, wherein the loading, according to the monitored first page state and according to the position relationship of each display object corresponding to the page opening instruction in the page, the data of the non-displayed display object to display a second page comprises:
determining a second total number of display objects displayed on a second page based on the changed size of the display area of the first page and a preset size of a single display object;
loading the data of the non-displayed display objects corresponding to the second total amount according to the position relation of each display object corresponding to the page opening instruction in the page so as to display the second page;
the method comprises the steps of packaging a program for determining the total number of display objects to be displayed according to the size of a display area and the size of a preset single display object to obtain a second packaging function, and calling the second packaging function to realize the task of determining the total number of the display objects to be displayed according to the size of the display area and the size of the preset single display object each time.
10. The method of any of claims 1-4, wherein the display object comprises at least one of: pictures and charts.
11. A page loading apparatus, comprising:
the display area determining module is used for determining the size of the display area of the current display screen when a page opening instruction is received;
the display quantity determining module is used for determining a first total quantity of display objects displayed on the current display screen according to the size of the display area and the size of a preset single display object;
and the first loading module is used for loading the display object data based on the first total quantity so as to display the first page.
12. An apparatus, characterized in that the apparatus comprises:
one or more processors;
a memory for storing one or more programs;
when executed by the one or more processors, cause the one or more processors to implement the page loading method steps of any of claims 1-10.
13. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the page loading method steps of any one of claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010833859.6A CN113779449A (en) | 2020-08-18 | 2020-08-18 | Page loading method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010833859.6A CN113779449A (en) | 2020-08-18 | 2020-08-18 | Page loading method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113779449A true CN113779449A (en) | 2021-12-10 |
Family
ID=78835192
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010833859.6A Pending CN113779449A (en) | 2020-08-18 | 2020-08-18 | Page loading method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113779449A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114398121A (en) * | 2021-12-21 | 2022-04-26 | 北京五八信息技术有限公司 | View display method and device, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8887085B1 (en) * | 2008-03-20 | 2014-11-11 | Amazon Technologies, Inc. | Dynamic content navigation |
| US8935620B1 (en) * | 2008-03-20 | 2015-01-13 | Amazon Technologies, Inc. | Dynamic content management |
| WO2018196617A1 (en) * | 2017-04-25 | 2018-11-01 | 腾讯科技（深圳）有限公司 | Page loading method, system, server and terminal |
| CN109684574A (en) * | 2018-08-20 | 2019-04-26 | 平安普惠企业管理有限公司 | Page loading method, device, equipment and storage medium |
-
2020
- 2020-08-18 CN CN202010833859.6A patent/CN113779449A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8887085B1 (en) * | 2008-03-20 | 2014-11-11 | Amazon Technologies, Inc. | Dynamic content navigation |
| US8935620B1 (en) * | 2008-03-20 | 2015-01-13 | Amazon Technologies, Inc. | Dynamic content management |
| WO2018196617A1 (en) * | 2017-04-25 | 2018-11-01 | 腾讯科技（深圳）有限公司 | Page loading method, system, server and terminal |
| CN109684574A (en) * | 2018-08-20 | 2019-04-26 | 平安普惠企业管理有限公司 | Page loading method, device, equipment and storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114398121A (en) * | 2021-12-21 | 2022-04-26 | 北京五八信息技术有限公司 | View display method and device, electronic equipment and storage medium |
| CN114398121B (en) * | 2021-12-21 | 2024-02-27 | 北京五八信息技术有限公司 | View display method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8314809B1 (en) | Selective rendering of off-screen content | |
| AU2014308633B2 (en) | Swipe toolbar to switch tabs | |
| CN110865888A (en) | Resource loading method and device, server and storage medium | |
| CN112667330B (en) | Page display method and computer equipment | |
| CN113032083A (en) | Data display method, device, electronic equipment and medium | |
| CN107301220B (en) | Method, device and equipment for data driving view and storage medium | |
| US20150205514A1 (en) | Using a scroll bar in a multiple panel user interface | |
| US9612734B1 (en) | Random access browser scrolling for large pages | |
| CN113779449A (en) | Page loading method and device, electronic equipment and storage medium | |
| CN113421144A (en) | Page display method and device, equipment and storage medium | |
| US11023098B2 (en) | Rendering on a mobile device | |
| CN109145241B (en) | Browser and content display management method of browser | |
| US20210185109A1 (en) | Page presentation method and system, computer system, and computer readable medium | |
| CN115795133A (en) | Data loading method and device, electronic equipment and storage medium | |
| CN113127783B (en) | Page display method and device, equipment and medium | |
| CN111538705B (en) | Video thumbnail preview method, control server and medium | |
| CN111782121B (en) | Page rolling control method and device, readable storage medium and electronic equipment | |
| CN114461214A (en) | Page display method and device, electronic equipment and storage medium | |
| CN114647411A (en) | Programming interface loading method and device, electronic equipment and storage medium | |
| CN114036431A (en) | Page cache skipping method and device, electronic equipment and storage medium | |
| CN114528509A (en) | Page display processing method and device, electronic equipment and storage medium | |
| CN113885998A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN112667939A (en) | Webpage refreshing method and device, electronic equipment and storage medium | |
| CN112613287A (en) | Data list display method, device, equipment and storage medium | |
| CN111367889A (en) | Cross-cluster data migration method and device based on webpage interface |
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 |