A method, device and electronic device for loading shuttle frame data

Abstract

The embodiment of the present invention discloses a method, device and electronic device for loading shuttle box data, including: monitoring whether a scroll bar of a shuttle box displayed in a web page scrolls; when monitoring that the scroll bar scrolls, obtaining the offset of the scroll bar scrolling as the offset to be compared, the offset to be compared is the offset of the scroll bar scrolling from the position of the scroll bar when the shuttle box data was requested from the back-end server last time; when the offset to be compared of the scroll bar reaches a preset threshold, requesting shuttle box data of a preset offset from the back-end server, the preset threshold is less than the preset offset. The scheme disclosed by the present invention improves the speed of loading shuttle box data in a web page.

Description

Technical Field

[0001] The present invention relates to the technical field of web page shuttle frames in computer technology, and in particular to a shuttle frame data loading method, device and electronic equipment. Background Art

[0002] With the development of the Internet, web pages are used more and more widely as carriers of content. When displaying web page content to users and allowing them to make selections, shuttle box technology can be used, for example, Figure 1-1 and Figure 1-2 The shown web page has a shuttle box. The shuttle box on the left side of the web page is the alternative shuttle box, which displays multiple alternative items. The shuttle box on the right side of the web page is the selected shuttle box, which displays the selected items. The user can add the alternative items in the alternative shuttle box to the selected shuttle box by clicking the arrow between the two shuttle boxes, and can also delete the selected items in the selected shuttle box from the selected shuttle box and add them back to the alternative shuttle box.

[0003] Using a shuttle box to display web page content is intuitive and convenient for users to operate. However, in actual applications, when the amount of data in the shuttle box is large, for example, hundreds or even thousands of alternative items, it takes a long time for the web page to load the shuttle box data, which in turn affects the interface interaction performance and user experience. Summary of the invention

[0004] In view of this, an embodiment of the present invention provides a shuttle box data loading method, device and electronic device to solve the problem in the prior art that it takes a long time to load shuttle box data in a web page.

[0005] In a first aspect, an embodiment of the present invention provides a method for loading shuttle frame data, comprising:

[0006] Monitor whether the scroll bar of the shuttle box displayed on the web page scrolls;

[0007] When the scroll bar is monitored to be scrolled, the offset of the scroll bar being scrolled is obtained as the offset to be compared, and the offset to be compared is the offset of the scroll bar starting from the position where the scroll bar was located when the shuttle frame data was requested from the backend server last time;

[0008] When the offset to be compared of the scroll bar reaches a preset threshold, the shuttle frame data of the preset offset is requested from the backend server, and the preset threshold is less than the preset offset.

[0009] According to a specific implementation of the embodiment of the present invention, after requesting the shuttle frame data of the preset offset from the backend server, the method further includes:

[0010] The value of the offset to be compared is restored to a default value of 0.

[0011] According to a specific implementation of the embodiment of the present invention, obtaining the offset of the scroll bar scrolling includes:

[0012] Get the offset height of the scroll bar when scrolling; or

[0013] Get the offset number of the scroll bar scrolling, the offset number is the number of options displayed in the shuttle box.

[0014] A specific implementation method according to an embodiment of the present invention further includes:

[0015] When a web page with a shuttle box needs to be displayed for the first time, request the shuttle box data of the visible content height of the shuttle box plus the preset offset from the backend server, and the visible content height of the shuttle box is the maximum content height that the shuttle box can display at the same time;

[0016] The shuttle box data of the visible content height is displayed in the shuttle box of the web page.

[0017] According to a specific implementation manner of the embodiment of the present invention, the preset offset is a preset multiple of the visible content height of the shuttle box, and the preset multiple is greater than 1.

[0018] In a second aspect, an embodiment of the present invention further provides a shuttle frame data loading device, comprising:

[0019] A scroll bar monitoring module is used to monitor whether the scroll bar of the shuttle box displayed in the web page is scrolled;

[0020] An offset acquisition module is used to acquire the offset of the scroll bar when the scroll bar is monitored to be scrolled, as the offset to be compared, wherein the offset to be compared is the offset of the scroll bar starting from the position of the scroll bar when the shuttle frame data is requested from the backend server last time;

[0021] The data request module is used to request shuttle frame data of a preset offset from a backend server when the offset to be compared of the scroll bar reaches a preset threshold, and the preset threshold is less than the preset offset.

[0022] A specific implementation method according to an embodiment of the present invention further includes:

[0023] The offset adjustment module is used to restore the value of the offset to be compared to a default value of 0 after the data request module requests the shuttle frame data of the preset offset from the backend server.

[0024] According to a specific implementation of the embodiment of the present invention, the offset acquisition module is specifically used to acquire the offset height of the scroll bar when it scrolls; or

[0025] Get the offset number of the scroll bar scrolling, the offset number is the number of options displayed in the shuttle box.

[0026] According to a specific implementation of the embodiment of the present invention, the data request module is further used to request the shuttle frame data of the visible content height of the shuttle frame plus the preset offset from the backend server when a web page with a shuttle frame needs to be displayed for the first time, and the visible content height of the shuttle frame is the maximum content height that the shuttle frame can display at the same time;

[0027] The device further comprises:

[0028] The data display module is used to display the shuttle frame data of the visible content height in the shuttle frame of the web page.

[0029] According to a specific implementation manner of the embodiment of the present invention, the preset offset is a preset multiple of the visible content height of the shuttle box, and the preset multiple is greater than 1.

[0030] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: a housing, a processor, a memory, a circuit board and a power supply circuit, wherein the circuit board is placed inside the space enclosed by the housing, and the processor and the memory are arranged on the circuit board; the power supply circuit is used to supply power to various circuits or devices of the above-mentioned electronic device; the memory is used to store executable program code; the processor runs a program corresponding to the executable program code by reading the executable program code stored in the memory, so as to execute the method described in any of the aforementioned implementation methods.

[0031] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the method described in any of the aforementioned implementation methods.

[0032] In a fifth aspect, an embodiment of the present invention further provides an application program, which is executed to implement the method described in any embodiment of the present invention.

[0033] The embodiment of the present invention provides a method, device and electronic device for loading shuttle box data. For a web page displaying a shuttle box, the method monitors whether the scroll bar of the shuttle box displayed in the web page scrolls. When the scroll bar is monitored to scroll, the offset of the scroll bar scrolling is obtained as the offset to be compared. The offset to be compared is the offset of the scroll bar scrolling from the position of the scroll bar when the shuttle box data was requested from the back-end server last time. When the offset to be compared of the scroll bar reaches a preset threshold, the back-end server is requested for shuttle box data of the preset offset, and the preset threshold is less than the preset offset. It can be seen that when the scroll bar scrolls and meets certain conditions, the back-end server will be requested in advance for shuttle box data that does not need to be displayed, so that when the shuttle box data needs to be displayed, the data that has been requested from the back-end server can be directly loaded in the web page, which reduces the time of waiting for the shuttle box data to be loaded from the back-end server, thereby improving the speed of loading the shuttle box data in the web page. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0035] Figure 1-1 is a schematic diagram of the shuttle frame;

[0036] Figure 1-2 is a schematic diagram of the shuttle frame;

[0037] Figure 2 A flow chart of a method for loading shuttle frame data provided by an embodiment of the present invention;

[0038] Figure 3 A flowchart of a method for loading shuttle frame data provided by another embodiment of the present invention;

[0039] Figure 4-1 A schematic diagram of a shuttle frame in an embodiment of the present invention;

[0040] Figure 4-2 A schematic diagram of a shuttle frame in an embodiment of the present invention;

[0041] Figure 5-1 A schematic diagram of the structure of a shuttle frame data loading device provided by an embodiment of the present invention;

[0042] Figure 5-2 A schematic structural diagram of a shuttle frame data loading device provided by another embodiment of the present invention;

[0043] Figure 5-3 A schematic structural diagram of a shuttle frame data loading device provided by another embodiment of the present invention;

[0044] Figure 6 The figure is a schematic structural diagram of an embodiment of an electronic device of the present invention. DETAILED DESCRIPTION

[0045] The embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. It should be clear that the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0046] The embodiment of the present invention provides a method for loading shuttle frame data. Figure 2 As shown, including:

[0047] Step 21: monitor whether the scroll bar of the shuttle box displayed on the web page scrolls.

[0048] Step 22: when the scroll bar is monitored to be scrolling, the offset of the scroll bar is obtained as the offset to be compared, and the offset to be compared is the offset of the scroll bar starting from the position where the scroll bar was located when the shuttle frame data was requested from the backend server last time.

[0049] Step 23: When the offset to be compared of the scroll bar reaches a preset threshold, request the shuttle frame data of the preset offset from the backend server, and the preset threshold is less than the preset offset.

[0050] By adopting the above-mentioned shuttle box data loading method provided by the embodiment of the present invention, when the scroll bar scrolls and meets certain conditions, the shuttle box data that does not need to be displayed will be requested from the back-end server in advance, so that when new shuttle box data needs to be displayed, the data that has been requested from the back-end server can be directly loaded in the web page, reducing the waiting time for requesting the shuttle box data that needs to be loaded from the back-end server, thereby improving the speed of loading the shuttle box data in the web page.

[0051] The following describes in detail the method, device and electronic device provided by the embodiments of the present invention based on the accompanying drawings.

[0052] Another embodiment of the present invention also provides a method for loading shuttle frame data, such as Figure 3 As shown, including:

[0053] Step 31: for a web page with a shuttle box that needs to be displayed for the first time, request the shuttle box data of the visible content height of the shuttle box plus a preset offset from the backend server, wherein the visible content height of the shuttle box is the maximum content height that the shuttle box can display simultaneously.

[0054] like Figure 4-1 As shown, the height of the visible content of the shuttle box is the height of the display area that the user can see at the same time. This height is a fixed value. The visible content height can be expressed by the height of the display area of ​​the shuttle box, or by the maximum number of options that the shuttle box can display simultaneously.

[0055] In this step, for the web page with a shuttle box that needs to be displayed, when requesting the shuttle box data from the backend server, in addition to requesting the shuttle box data of the visible content height, the shuttle box data of the preset offset downward of the scroll bar is also requested at the same time, so that when the user scrolls the scroll bar downward, the corresponding shuttle box data can be loaded and displayed as soon as possible.

[0056] After the shuttle box data is requested, the corresponding shuttle box data will be displayed in the shuttle box of the web page.

[0057] Step 32: monitor whether the scroll bar of the shuttle box displayed in the web page scrolls.

[0058] In this step, you can specifically bind a listening event to the scrollable list box of the shuttle box defined in Element UI (desktop component library) in advance, and based on the bound listening event, monitor whether the scroll bar of the shuttle box scrolls, where the scrollable list box can be understood as the display area of ​​the shuttle box.

[0059] When it is monitored that the scroll bar is scrolling, step 33 is executed, otherwise, the process returns to step 32 to continue monitoring.

[0060] Step 33: Obtain the offset of the scroll bar as the offset to be compared.

[0061] In this step, the offset to be compared is the offset from the position of the scroll bar when the shuttle frame data was requested from the back-end server last time, starting from the scrolling position.

[0062] In the embodiment of the present invention, the offset can be represented by the offset height of the scroll bar, that is, the height of the display area of ​​the shuttle box is the same unit;

[0063] The offset may also be represented by the offset number of the scroll bar scrolling, where the offset number is the number of options displayed in the shuttle box.

[0064] For example, when the number of displayed options is used to indicate the scroll bar position, such as Figure 4-1 As shown, this page is the position of the scroll bar when the shuttle box data was requested from the backend server last time. At this time, for this shuttle box, among all the options that have been requested, the number of the last option currently displayed in the shuttle box can be used as the position of the scroll bar at this time. Figure 4-1As can be seen from the figure, the position of the scroll bar is 8 at this time. Figure 4-2 As shown in the figure, when the user pulls the scroll bar downwards and the scroll bar scrolls, the number of the last option currently displayed in the shuttle box can be used as the position of the scroll bar after scrolling. Figure 4-2 As can be seen, the position of the scroll bar is 12 at this time. We can calculate that the offset of the scroll bar this time is 12 minus 8, which is 4.

[0065] Step 34, determine whether the offset to be compared reaches a preset threshold, if it reaches the preset threshold, execute step 35, if it does not reach the preset threshold, return to step 32.

[0066] In the embodiment of the present invention, in actual application, the preset threshold value can be flexibly set based on the data volume of each option in the shuttle box, and is not limited here.

[0067] Step 35: Request the shuttle frame data of the preset offset from the backend server, and the preset threshold is less than the preset offset.

[0068] In this step, when the offset to be compared reaches the preset threshold, it means that the offset of the scroll bar scrolling is relatively large. Continuing scrolling may require displaying shuttle frame data that has not been requested. Therefore, it is necessary to request the shuttle frame data from the backend server in advance.

[0069] In this step, based on the shuttle frame data that has been requested, the shuttle frame data with a preset offset is continuously requested from the backend server.

[0070] In the embodiment of the present invention, each time the shuttle box data is requested with a preset offset, the preset offset can be flexibly set based on the needs in the actual application, and can generally be set to a preset multiple of the visible content height of the shuttle box, where the preset multiple is greater than 1, for example, it can be 1.5 times.

[0071] Step 36: After requesting the shuttle frame data of the preset offset from the backend server, the value of the offset to be compared is restored to a default value of 0, and the process returns to the above step 32.

[0072] Step 37: After requesting the shuttle frame data of the preset offset from the backend server, the request times may be updated, that is, the request times are increased by 1.

[0073] The number of requests multiplied by the preset offset plus the visible content height is the amount of shuttle box data that has been requested, which can also be understood as the length of the current visible list of the shuttle box, that is, the options of this length in the shuttle box have been requested and loaded, and can be browsed and viewed by users at any time.

[0074] Based on the same inventive concept, according to the above shuttle frame data loading method provided by the embodiment of the present invention, the embodiment of the present invention also provides a shuttle frame data loading device, such as Figure 5-1 As shown, including:

[0075] The scroll bar monitoring module 51 is used to monitor whether the scroll bar of the shuttle box displayed in the web page is scrolled;

[0076] The offset acquisition module 52 is used to acquire the offset of the scroll bar when the scroll bar is monitored to be scrolled, as the offset to be compared, and the offset to be compared is the offset of the scroll bar from the position where the scroll bar was located when the shuttle frame data was requested from the backend server last time;

[0077] The data request module 53 is used to request the shuttle frame data of the preset offset from the backend server when the offset to be compared of the scroll bar reaches a preset threshold, and the preset threshold is less than the preset offset.

[0078] According to a specific implementation of the embodiment of the present invention, Figure 5-2 As shown, the device also includes:

[0079] The offset adjustment module 54 is used to restore the value of the offset to be compared to a default value of 0 after the data request module requests the shuttle frame data of the preset offset from the backend server.

[0080] According to a specific implementation of the embodiment of the present invention, the offset acquisition module 52 is specifically used to acquire the offset height of the scroll bar when it scrolls; or

[0081] Gets the offset number of the scroll bar scrolling, the offset number is the number of options displayed in the shuttle box.

[0082] According to a specific implementation of the embodiment of the present invention, the data request module 53 is further used to request the shuttle frame data of the visible content height of the shuttle frame plus a preset offset from the backend server when a web page with a shuttle frame needs to be displayed for the first time, and the visible content height of the shuttle frame is the maximum content height that the shuttle frame can display at the same time;

[0083] like Figure 5-3 As shown, the device also includes:

[0084] The data display module 55 is used to display the shuttle box data of the height of the visible content in the shuttle box of the web page.

[0085] According to a specific implementation of the embodiment of the present invention, the preset offset is a preset multiple of the visible content height of the shuttle box, and the preset multiple is greater than 1.

[0086] The device of this embodiment can be used to perform Figure 2-Figure 3The technical solution of the method embodiment shown has similar implementation principles and technical effects, which will not be repeated here.

[0087] An embodiment of the present invention further provides an electronic device, wherein the electronic device comprises the device described in any of the above embodiments.

[0088] Figure 6 This is a schematic diagram of the structure of an embodiment of the electronic device of the present invention, which can implement the present invention Figure 2-3 The process of the embodiment shown is as follows: Figure 6 As shown, the electronic device may include: a housing 61, a processor 62, a memory 63, a circuit board 64 and a power supply circuit 65, wherein the circuit board 64 is arranged inside the space enclosed by the housing 61, and the processor 62 and the memory 63 are arranged on the circuit board 64; the power supply circuit 65 is used to supply power to various circuits or devices of the electronic device; the memory 63 is used to store executable program codes; the processor 62 runs the program corresponding to the executable program code by reading the executable program code stored in the memory 63, so as to execute the shuttle frame data loading method described in any of the aforementioned embodiments.

[0089] For details on the specific execution process of the above steps by the processor 62 and the steps further executed by the processor 62 by running the executable program code, please refer to the present invention. Figure 2-3 The description of the illustrated embodiment will not be repeated here.

[0090] This electronic device exists in many forms, including but not limited to:

[0091] (1) Mobile communication devices: These devices are characterized by their mobile communication functions and their main purpose is to provide voice and data communications. These terminals include: smart phones (such as iPhone), multimedia phones, functional phones, and low-end phones.

[0092] (2) Ultra-mobile personal computer devices: These devices fall into the category of personal computers, have computing and processing capabilities, and generally also have mobile Internet access features. These terminals include: PDA, MID and UMPC devices, such as iPad.

[0093] (3) Portable entertainment devices: These devices can display and play multimedia content. They include audio and video players (such as iPods), handheld game consoles, e-books, smart toys, and portable car navigation devices.

[0094] (4) Server: A device that provides computing services. The server consists of a processor, hard disk, memory, system bus, etc. The server is similar to a general computer architecture, but because it needs to provide highly reliable services, it has higher requirements in terms of processing power, stability, reliability, security, scalability, and manageability.

[0095] (5) Other electronic devices with data interaction functions.

[0096] An embodiment of the present invention further provides a computer-readable storage medium, which stores one or more programs. The one or more programs can be executed by one or more processors to implement the method provided in any of the aforementioned embodiments.

[0097] An embodiment of the present invention further provides an application program, which is executed to implement the method provided by any embodiment of the present invention.

[0098] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0099] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referenced to each other, and each embodiment focuses on the differences from other embodiments.

[0100] In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0101] For the convenience of description, the above device is described by dividing the functions into various units / modules. Of course, when implementing the present invention, the functions of each unit / module can be implemented in the same or multiple software and / or hardware.

[0102] A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc.

[0103] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for loading shuttle frame data, characterized in that: include: Monitor whether the scroll bar of the shuttle box displayed on the web page scrolls; When the scroll bar is monitored to be scrolled, the offset of the scroll bar being scrolled is obtained as the offset to be compared, and the offset to be compared is the offset of the scroll bar starting from the position where the scroll bar was located when the shuttle frame data was requested from the backend server last time; When the offset to be compared of the scroll bar reaches a preset threshold, requesting shuttle frame data of a preset offset from a backend server, and the preset threshold is less than the preset offset; Also includes: When a web page with a shuttle box needs to be displayed for the first time, request the shuttle box data of the visible content height of the shuttle box plus the preset offset from the backend server, and the visible content height of the shuttle box is the maximum content height that the shuttle box can display at the same time; The shuttle box data of the visible content height is displayed in the shuttle box of the web page.

2. The shuttle frame data loading method according to claim 1, characterized in that: After requesting the shuttle frame data of the preset offset from the backend server, the method further includes: The value of the offset to be compared is restored to a default value of 0.

3. The shuttle frame data loading method according to claim 1, characterized in that: The step of obtaining the scroll offset of the scroll bar includes: Get the offset height of the scroll bar when scrolling; or Get the offset number of the scroll bar scrolling, the offset number is the number of options displayed in the shuttle box.

4. The method for loading shuttle frame data according to any one of claims 1 to 3, characterized in that: The preset offset is a preset multiple of the visible content height of the shuttle frame, and the preset multiple is greater than 1.

5. A shuttle frame data loading device, characterized in that: include: A scroll bar monitoring module is used to monitor whether the scroll bar of the shuttle box displayed in the web page is scrolled; An offset acquisition module is used to acquire the offset of the scroll bar when the scroll bar is monitored to be scrolled, as the offset to be compared, wherein the offset to be compared is the offset of the scroll bar starting from the position of the scroll bar when the shuttle frame data is requested from the backend server last time; A data request module, configured to request shuttle frame data of a preset offset from a backend server when the offset to be compared of the scroll bar reaches a preset threshold, and the preset threshold is less than the preset offset; The data request module is further used to request the shuttle frame data of the visible content height of the shuttle frame plus the preset offset from the backend server when a webpage with the shuttle frame needs to be displayed for the first time, wherein the visible content height of the shuttle frame is the maximum content height that can be displayed simultaneously by the shuttle frame; The device further comprises: The data display module is used to display the shuttle frame data of the visible content height in the shuttle frame of the web page.

6. The shuttle frame data loading device according to claim 5, characterized in that: Also includes: The offset adjustment module is used to restore the value of the offset to be compared to a default value of 0 after the data request module requests the shuttle frame data of the preset offset from the backend server.

7. The shuttle frame data loading device according to claim 5, characterized in that: The offset acquisition module is specifically used to acquire the offset height of the scroll bar when it scrolls; or Get the offset number of the scroll bar scrolling, the offset number is the number of options displayed in the shuttle box.

8. The shuttle frame data loading device according to any one of claims 5 to 7, characterized in that: The preset offset is a preset multiple of the visible content height of the shuttle frame, and the preset multiple is greater than 1.

9. An electronic device, characterized in that: The electronic device comprises: a shell, a processor, a memory, a circuit board and a power supply circuit, wherein the circuit board is placed inside the space enclosed by the shell, and the processor and the memory are arranged on the circuit board; the power supply circuit is used to supply power to various circuits or devices of the above-mentioned electronic device; the memory is used to store executable program code; the processor runs the program corresponding to the executable program code by reading the executable program code stored in the memory, so as to execute the shuttle box data loading method described in any one of claims 1 to 4.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the shuttle box data loading method described in any one of claims 1 to 4.

Images