Region display method and device, computer device, storage medium and program product

Abstract

Embodiments of the present application provide a region display method and device, computer equipment, storage medium and program product, which can be applied to cloud technology, artificial intelligence, intelligent transportation, Internet of Vehicles and various scenes; the embodiments of the present application can obtain region information of a to-be-displayed region in a display interface; according to the region information, a to-be-displayed region node matched with the to-be-displayed region is filtered out from object nodes contained in the display interface; image style attribute information of a background image to be displayed in the to-be-displayed region is obtained; according to the image style attribute information, preloading information of the background image is extracted in the to-be-displayed region node; the background image is preloaded according to the preloading information, so as to display the to-be-displayed region in the display interface based on the preloaded background image; the embodiments of the present application can realize the effect of quickly obtaining preloading information in the front-end display interface, and quickly display the to-be-displayed region, avoiding the flickering effect.

Description

Technical Field

[0001] This application relates to the field of display technology, specifically to a regional display method, apparatus, computer equipment, storage medium, and program product, wherein the storage medium is a computer-readable storage medium, and the program product is a computer program product. Background Technology

[0002] With the development of network technology, display technology has been widely used in information carriers such as web pages and software. In the display interface, if the area to be displayed, such as a pop-up window, uses a background image, it takes a certain amount of time for the background image to be fully displayed. This can cause the area to flicker during the display process, making it difficult to display the entire area.

[0003] In summary, there is currently a problem with the low display efficiency of the area to be displayed. Summary of the Invention

[0004] This application provides a method, apparatus, computer device, storage medium, and program product for displaying a region.

[0005] A method for displaying a region, comprising:

[0006] Obtain the area information of the region to be displayed within the display interface;

[0007] Based on the region information, filter out the display region nodes that match the region to be displayed from the object nodes contained in the display interface;

[0008] Obtain the image style attribute information of the background image to be displayed within the display area;

[0009] Based on the image style attribute information, extract the preload information of the background image from the nodes of the area to be displayed;

[0010] The background image is preloaded based on the preloaded information, so that the area to be displayed is displayed within the display interface based on the preloaded background image.

[0011] Accordingly, embodiments of this application provide a region display device, including:

[0012] The first acquisition unit is used to acquire the area information of the area to be displayed within the display interface;

[0013] The filtering unit is used to filter out the display area nodes that match the display area from the object nodes contained in the display interface based on the area information.

[0014] The second acquisition unit is used to acquire the image style attribute information of the background image to be displayed within the display area;

[0015] The extraction unit is used to extract the preloaded information of the background image from the nodes of the area to be displayed based on the image style attribute information.

[0016] The preloading unit is used to preload the background image according to the preloading information, so as to display the area to be displayed in the display interface based on the preloaded background image.

[0017] In some embodiments, the filtering unit may be specifically used to obtain an information acquisition interface for region information; and through the information acquisition interface, filter out the display region nodes that match the display region from the object nodes contained in the display interface according to the region information.

[0018] In some embodiments, the filtering unit may be used to obtain a script for obtaining regional information; and based on the script, to construct an information acquisition interface for obtaining regional information.

[0019] In some embodiments, the filtering unit can be specifically used to obtain script information for region information; determine whether a script is stored in the local storage space based on the script information; if no script is stored in the local storage space, obtain the script feature information corresponding to the script, and obtain the script for region information from the server based on the script feature information; if a script exists, obtain the script for region information from the local storage space.

[0020] In some embodiments, the extraction unit may be specifically used to perform preloading information lookup processing in the node of the area to be displayed based on image style attribute information to obtain the initial preloading information corresponding to the background image; and to extract the initial preloading information to obtain the preloading information corresponding to the background image.

[0021] In some embodiments, the extraction unit may be used to obtain preset reference information; determine key information in the initial preload information that matches the preset reference information based on the preset reference information; and extract the initial preload information based on the key information to obtain the preload information corresponding to the background image.

[0022] In some embodiments, the extraction unit may be specifically used to perform deduplication processing on the initial preload information to obtain duplicate target initial preload information in the initial preload information; and to delete the target initial preload information in the initial preload information to obtain the preload information corresponding to the background image.

[0023] In some embodiments, the object node includes a display area node and a display area node; the preloading unit can be used to determine whether the node information of the display area node in the display interface has been loaded; if the node information has been loaded, the background image is preloaded according to the preloading information.

[0024] Furthermore, embodiments of this application also provide a computer device, including a memory and a processor; the memory stores a computer program, and the processor is used to run the computer program in the memory to execute any of the area display methods provided in embodiments of this application.

[0025] Furthermore, embodiments of this application also provide a computer-readable storage medium storing a computer program adapted for loading by a processor to execute any of the area display methods provided in embodiments of this application.

[0026] Furthermore, this application also provides a computer program product, including a computer program, which, when executed by a processor, implements any of the area display methods provided in this application.

[0027] Furthermore, this application also provides a computer program product, including a computer program, which, when executed by a processor, implements any of the area display methods provided in this application.

[0028] This application embodiment can obtain the region information of the area to be displayed within the display interface; based on the region information, filter out the display area nodes that match the display area from the object nodes contained in the display interface; obtain the image style attribute information of the background image to be displayed within the display area; extract the preloading information of the background image from the display area nodes based on the image style attribute information; preload the background image based on the preloading information, so as to display the area to be displayed within the display interface based on the preloaded background image; since this application embodiment allows all display interfaces that currently use the display area, such as pop-ups, such as pages, to automatically capture the display area nodes and obtain the preloading information of the background image in the display area nodes, the effect of quickly obtaining the preloading information in the front-end display interface can be achieved. Especially when there are multiple display areas in the front-end display interface, the efficiency of obtaining the preloading information can be further demonstrated, thereby enabling the background image to be preloaded quickly. In this way, the display area can be quickly displayed based on the preloaded background image, avoiding the flickering effect. In this embodiment, when retrieving preloaded information for background images, based on current pop-up writing rules, a two-layer search can be performed on both the parent node and the first-level child nodes of the display area node to obtain the preloaded information. This ensures that all display area nodes on the page are covered with a high probability. This embodiment eliminates the need for developers to manually collect and preload background images, optimizing the user experience and freeing up some of their workload. Attached Figure Description

[0029] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0030] Figure 1 This is a schematic diagram of a scenario illustrating the region display method provided in an embodiment of this application;

[0031] Figure 2 This is a flowchart illustrating the region display method provided in an embodiment of this application;

[0032] Figure 3 This is a schematic diagram illustrating the blinking effect of the pop-up window provided in the embodiments of this application;

[0033] Figure 4 This is a schematic diagram illustrating that the pop-up window provided in this application embodiment does not exhibit a flickering effect;

[0034] Figure 5 This is a flowchart illustrating the page display pop-up window provided in an embodiment of this application;

[0035] Figure 6 These are two flowcharts illustrating the page display pop-up window provided in this application embodiment;

[0036] Figure 7 This is a schematic diagram illustrating the time required for reflow and redraw provided in the embodiments of this application;

[0037] Figure 8 These are two schematic flowcharts illustrating the region display method provided in this application embodiment;

[0038] Figure 9 These are three schematic flowcharts illustrating the region display method provided in this application embodiment;

[0039] Figure 10 This is a schematic diagram of the structure of the area display device provided in the embodiments of this application;

[0040] Figure 11 This is a schematic diagram of the structure of the computer device provided in the embodiments of this application. Detailed Implementation

[0041] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0042] This application provides a method, apparatus, computer device, and computer-readable storage medium for displaying a specific area. The area display apparatus can be integrated into a computer device, which may be a server or a terminal, etc.

[0043] The server can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery network (CDN) acceleration services, and big data and artificial intelligence platforms. The terminal can be a smartphone, tablet, laptop, desktop computer, smart speaker, smartwatch, smart voice interaction device, smart home appliance, vehicle terminal, aircraft, etc., but is not limited to these. The terminal and server can be directly or indirectly connected via wired or wireless communication, which is not limited herein. The embodiments of this invention can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, and assisted driving.

[0044] For example, see Figure 1 Taking the integration of a regional display device into a computer device as an example, the computer device can obtain the regional information of the area to be displayed within the display interface; based on the regional information, it can filter out the regional nodes that match the area to be displayed from the object nodes contained in the display interface; obtain the image style attribute information of the background image to be displayed within the region to be displayed; extract the preloading information of the background image from the regional nodes to be displayed based on the image style attribute information; and preload the background image based on the preloading information so as to display the area to be displayed within the display interface based on the preloaded background image.

[0045] The area to be displayed can refer to the region within the display interface that is to be shown. Specifically, it can refer to the region that cannot be directly displayed on the display interface after it has been opened. The area to be displayed can be represented by a pop-up window or a non-pop-up window. A non-pop-up window refers to a region within the display interface that has preset functions and exists in a non-pop-up window format.

[0046] Among them, area information can refer to information related to the area to be displayed.

[0047] Here, an object node can refer to a node that enables the display interface to have various functions and forms of expression. The visual representation of an object node on the display interface can be an area within the display interface that exists with preset functions and preset forms of expression.

[0048] The "area to be displayed" node refers to a node used to display the area to be shown in the display interface. The "area to be displayed" node is an object node.

[0049] Object nodes possess various style attributes, which allow the corresponding area to appear in a preset manner on the display interface. For example, style attributes include width, height, and image attributes. Width attribute information refers to the width of the area corresponding to the object node. Height attribute information refers to the height of the area corresponding to the object node. Image attribute information refers to the background image of the area corresponding to the object node.

[0050] The preloaded information can refer to the information used to preload the background image.

[0051] The following sections provide detailed descriptions of each example. It should be noted that the order in which the embodiments are described is not intended to limit the preferred order of the embodiments.

[0052] This embodiment will be described from the perspective of a regional display device, which can be integrated into a computer device, such as a server or a terminal. The terminal can include tablet computers, laptop computers, personal computers (PCs), wearable devices, virtual reality devices, or other smart devices that can acquire data.

[0053] like Figure 2 As shown, the specific process of the method for displaying this area is as follows: steps S201 to S205:

[0054] S201. Obtain the area information of the area to be displayed within the display interface.

[0055] Among them, the representation of regional information can be a class name, or it can be a keyword; and so on.

[0056] In some embodiments, the region information can be associated with the region identifier of the region to be displayed and stored in a database. Based on this, this application can extract the region information of the region to be displayed based on the association information between the region identifier and the region information.

[0057] In some embodiments, the region information may be information generated by the computer device in response to an input instruction for a region to be displayed. Specifically, the developer may input the region information corresponding to the region to be displayed into the computer device.

[0058] S202. Based on the area information, filter out the display area nodes that match the display area from the object nodes contained in the display interface.

[0059] In order to extract the pre-loaded information of the background image of the area to be displayed from the front-end display interface, the pre-loaded information of the background image exists in the display area node of the area to be displayed. Based on this, the embodiments of this application need to find the display area node of the area to be displayed.

[0060] In one embodiment, the method for filtering out the display area nodes that match the display area from the object nodes contained in the display interface based on the region information can be as follows: obtaining a mapping relationship set, which includes the mapping relationship between object nodes and preset object information, wherein the preset object information includes preset region information corresponding to the display area node, and the display area node belongs to the object node; searching for the preset region information corresponding to the region information in the preset object information based on the region information; determining the display area node corresponding to the preset region information based on the mapping relationship between the object node and the preset object information; and using the display area node corresponding to the preset region information as the display area node that matches the display area.

[0061] In one embodiment of the application, the method for filtering out the display area nodes that match the display area from the object nodes contained in the display interface based on the region information can be as follows: obtain an information acquisition interface for the region information; and filter out the display area nodes that match the display area from the object nodes contained in the display interface based on the region information through the information acquisition interface.

[0062] Among them, the information acquisition interface can refer to the interface used to acquire regional information.

[0063] The display interface can have multiple areas to be displayed, and each area to be displayed can have a corresponding area to be displayed node.

[0064] In one example, the method to obtain the information retrieval interface for region information can be: obtain the script for region information; and construct the information retrieval interface for region information based on the script.

[0065] The script can be a script used to build an information retrieval interface.

[0066] In one example, the script for obtaining region information can be obtained as follows: obtain script information for the region; determine whether the script is stored in the local storage space based on the script information; if the script is not stored in the local storage space, obtain the script feature information corresponding to the script, and obtain the script for the region information from the server based on the script feature information; if the script exists, obtain the script for the region information from the local storage space.

[0067] Specifically, script information is used to determine whether a script exists locally. Specifically, script information can be represented as keywords, identifiers, and so on. In particular, script information can be pre-defined script information.

[0068] In one example, the method to determine whether a script is stored in the local storage space based on the script information is as follows: obtain the cached script information of the local storage space; match the script information with the cached script information; if the script information matches the cached script information, it is determined that the local storage space stores the script; if the script information does not match the cached script information, it is determined that the local storage space does not store the script.

[0069] The cached script information can refer to script information cached in the local storage space. The cached script information is information that matches the script.

[0070] Specifically, when the script information is the same as the cached script information, this situation can be called a match between the script information and the cached script information; when the key fields in the script information and the cached script information are the same, this situation can also be called a match between the script information and the cached script information.

[0071] Specifically, when the script information and the cached script information differ, this situation can be described as a mismatch between the script information and the cached script information; when the key fields in the script information and the cached script information differ, this situation can also be described as a mismatch between the script information and the cached script information.

[0072] In one example, the script builds an information retrieval interface, through which developers can customize region information and return the region nodes that match the region to be displayed.

[0073] The computer device can generate custom area information in response to input instructions for the area to be displayed.

[0074] S203. Obtain the image style attribute information of the background image to be displayed within the display area.

[0075] In some embodiments of the application, the image style attribute information can be information stored in a database. Thus, the image style attribute information of the background image can be extracted from the database in this embodiment of the application.

[0076] In some embodiments of the application, the image style attribute information may be information generated by a computer device in response to an input instruction for a background image.

[0077] S204. Based on the image style attribute information, extract the preload information of the background image from the nodes of the area to be displayed.

[0078] In this case, because the background image loads slowly during the display of the area to be displayed, the area to be displayed may flicker. Therefore, this embodiment of the application needs to preload the background image. To do so, this embodiment of the application needs to find the preloading information of the background image in order to preload the background image.

[0079] In some application embodiments, the method for extracting the preload information of the background image from the node of the area to be displayed based on the image style attribute information can be as follows: perform preload information search processing in the node of the area to be displayed based on the image style attribute information to obtain the initial preload information corresponding to the background image; and perform extraction processing on the initial preload information to obtain the preload information corresponding to the background image.

[0080] In one example, the method to obtain the initial preload information corresponding to the background image by searching for preload information in the node of the area to be displayed based on the image style attribute information can be as follows: based on the image style attribute, search for the target image style attribute corresponding to the image style attribute in the node of the area to be displayed; based on the target image style attribute, extract the initial preload information corresponding to the background image.

[0081] The preloaded information is stored at the location of the target image style attribute information of the background image in the node to be displayed. In one example, the target image style attribute information can be stored in the child node of the node to be displayed, and the preloaded information can be stored in the child node of the node to be displayed.

[0082] In some embodiments, the method for extracting and processing the initial preloaded information to obtain the preloaded information corresponding to the background image can be as follows: obtaining preset reference information; determining key information in the initial preloaded information that matches the preset reference information based on the preset reference information; and extracting and processing the initial preloaded information based on the key information to obtain the preloaded information corresponding to the background image.

[0083] It is understood here that, due to the possible presence of noise in the initial preload information, the computer device may not be able to directly preload the background image based on the initial preload information. Based on this, the embodiments of this application can obtain key information through preset reference information. The key information is the noise in the initial preload information. Then, the embodiments of this application can perform noise reduction processing on the initial preload information based on the key information to obtain the preload information.

[0084] The preset reference information can be the same as the key information. The preset reference information is information that has been set in advance.

[0085] In some application embodiments, the method for extracting and processing the initial preload information to obtain the preload information corresponding to the background image can be as follows: performing deduplication processing on the initial preload information to obtain duplicate target initial preload information in the initial preload information; deleting the target initial preload information in the initial preload information to obtain the preload information corresponding to the background image.

[0086] It is understood here that since the display interface may have multiple areas to be displayed, at least two of these areas may have the same background image. The initial preload information for the same background image is identical. If this initial preload information is not deduplicated, it will lead to repeated preloading of the background image, thus wasting computing resources and occupying storage space on the computer device. Therefore, this embodiment of the application requires deduplication of the initial preload information.

[0087] S205. Preload the background image according to the preload information, so as to display the area to be displayed in the display interface based on the preloaded background image.

[0088] In some embodiments, the background image can be preloaded directly based on preloaded information to obtain a preloaded background image. Therefore, when a selection operation is performed on a control corresponding to the area to be displayed, such as a pop-up control, the computer device can directly obtain the preloaded background image from its local storage and display the area to be displayed within the display interface based on the preloaded background image.

[0089] In some embodiments, a network request can be made based on preloaded information to preload the background image. Therefore, when a selection operation is performed on a control corresponding to the area to be displayed, such as a pop-up control, the computer device can directly obtain the preloaded background image from the network and display the area to be displayed on the display interface based on the preloaded background image, without needing to make a network request based on the preloaded information.

[0090] In some embodiments, the object node includes a display area node and a display area node. The method for preloading the background image based on preloading information can be as follows: determine whether the node information of the display area nodes in the display interface has been fully loaded; if the node information has been fully loaded, then preload the background image based on the preloading information.

[0091] Here, a display area node refers to the node corresponding to the display area. The display area refers to the area that can be directly displayed in the display interface when it is opened. For example, when the area to be displayed is a pop-up, the display area is a non-pop-up. The node information of the display area node refers to the information that enables the display area to exhibit preset functions and preset display formats.

[0092] Among them, when the node information of the display area node in the display interface has been loaded, the display area corresponding to the display area node can display preset functions and preset display forms.

[0093] Among them, object nodes can be loaded in a preset loading order, and the loading order can be used to determine whether the node information of the display area nodes has been loaded.

[0094] It is understood here that, in order to avoid the background image blocking the loading of the display area in the display interface, the embodiments of this application will preload the background image after the node information of the display area node has been loaded.

[0095] This application embodiment can obtain the region information of the area to be displayed within the display interface; based on the region information, filter out the display area nodes that match the display area from the object nodes contained in the display interface; obtain the image style attribute information of the background image to be displayed within the display area; extract the preloading information of the background image from the display area nodes based on the image style attribute information; preload the background image based on the preloading information, so as to display the area to be displayed within the display interface based on the preloaded background image; since this application embodiment allows all display interfaces that currently use the display area, such as pop-ups, such as pages, to automatically capture the display area nodes and obtain the preloading information of the background image in the display area nodes, the effect of quickly obtaining the preloading information in the front-end display interface can be achieved. Especially when there are multiple display areas in the front-end display interface, the efficiency of obtaining the preloading information can be further demonstrated, thereby enabling the background image to be preloaded quickly. In this way, the display area can be quickly displayed based on the preloaded background image, avoiding the flickering effect. In this embodiment, when retrieving preloaded information for background images, based on current pop-up writing rules, a two-layer search can be performed on both the parent node and the first-level child nodes of the display area node to obtain the preloaded information. This ensures that all display area nodes on the page are covered with a high probability. This embodiment eliminates the need for developers to manually collect and preload background images, optimizing the user experience and freeing up some of their workload.

[0096] Based on the method described in the above embodiments, the following examples will provide further detailed explanations.

[0097] In this embodiment, the display device in this area is specifically integrated into a computer device, which serves as the terminal.

[0098] First, it should be noted that this embodiment of the application is illustrated using a pop-up window as the area to be displayed and a webpage as the display interface.

[0099] Current pop-ups use background images, but existing technologies for pop-ups are inefficient at displaying them, and the background image may not display in time, causing the pop-up to flicker. When a pop-up flickers, the flickering content within it may appear as follows: Figure 3 As shown. The pop-up window does not exhibit a flickering effect, as shown below. Figure 4 As shown.

[0100] When a user clicks on the corresponding pop-up control on the page, the entire pop-up process is displayed as follows: Figure 5 As shown in the diagram, when a user clicks on a pop-up control on the page, the corresponding pop-up is displayed in the designated area display node. Then, the style attribute information of the area display node, such as width and height, is retrieved. Based on this style attribute information and the corresponding DOM (Document Object Model) of the pop-up, a render tree is generated. Simultaneously, the page requests and loads the background image corresponding to the image style attribute information from the style attribute information. At the same time, the page undergoes reflow (layout) and repainting (painting), and the pop-up is then displayed by the computer's GPU.

[0101] Specifically, such as Figure 6 As shown, when a user clicks a pop-up control on the page, it triggers the corresponding pop-up to appear in the designated area display node. The pop-up display process is as follows: An HTML file is retrieved, which can be the code file specific to the pop-up; the HTML file is parsed using an HTML parser to obtain a parsed HTML file; the parsed HTML file is then merged with the initial DOM to obtain a DOM tree, where the initial DOM can be the initialized DOM. A style file is retrieved, containing style attribute information; the style file is parsed using a CSS parser to obtain style object models (style rules); a rendering tree is constructed based on the style object models and the DOM tree. Simultaneously, the page requests and loads the background image corresponding to the image style attribute information, and the page undergoes reflow (layout) and repainting (painting), before the pop-up is displayed by the computer's GPU.

[0102] The time taken for page reflow and repaint processes is as follows: Figure 7 As shown, the pop-up reflow takes about 1ms, and the pop-up redraw takes 78us. The pop-up redraw mainly involves loading the background image of the pop-up.

[0103] Based on the above, this application provides a region display method that enables pages using pop-ups to obtain pre-loaded information of the background images of all pop-ups on the page with only one line of script, and automatically preload the background images based on the pre-loaded information. In this way, when the user clicks on the pop-up, the problem of flickering or slow loading of the pop-up background image can be greatly alleviated, thereby improving and optimizing the user interaction experience.

[0104] like Figure 8 As shown, the display method for this area follows the specific process as described in steps S801 to S808:

[0105] It should be further explained here that the reason why the background image of the pop-up window needs to be preloaded in this embodiment is because we do not want to wait until the pop-up window is clicked to request the image path resource of the background image. Instead, the background image is preloaded after entering the page and before the pop-up window control is clicked.

[0106] This brings us to the timing of image loading during webpage construction. Webpages contain two types of images: tag images and background images. The tag image path is parsed and loaded even when the tag image is hidden. However, the loading of background images occurs during the rendering tree construction. If the image style attribute information corresponding to the background image is hidden, the hidden node corresponding to the hidden image style attribute information will not be drawn on the rendering tree. Therefore, all background images on the hidden node and its child nodes will not be pre-loaded. The area display method provided in this application allows for the pre-loading of background images.

[0107] S801. The computer device obtains the area information of the area to be displayed within the display interface.

[0108] In this embodiment of the application, the area to be displayed is a pop-up window.

[0109] The region information can be a class name, and the specific region information can be the common class name of the display region nodes of the region to be displayed, such as pop, dialog, etc. The class name can also be a custom class name defined by the developer.

[0110] In some embodiments, the region information may be information generated by the computer device in response to an input command for a region to be displayed. Specifically, the developer may enter a common class name used by all pop-up nodes on this page.

[0111] S802, A script for computer devices to obtain information about a specific region.

[0112] This application embodiment can rely on scripts in the highly convenient and well-encapsulated jQuery library to retrieve nodes in the area to be displayed. Therefore, this application embodiment first needs to determine whether the computer device has imported a script targeting area information. The jQuery library is a fast and concise JavaScript code library.

[0113] Based on the above, this application embodiment uses keywords in the jQuery library to determine whether the script exists. If the script does not exist, the jQuery script is dynamically imported first. If the script already exists, step S803 is executed.

[0114] Specifically, the process is as follows: Obtain script information for the specified region; based on the script information, determine whether the script is stored in the local storage space; if the script is not stored in the local storage space, obtain the script feature information corresponding to the script, and obtain the script for the specified region information from the server based on the script feature information; if the script exists, obtain the script for the specified region information from the local storage space.

[0115] The script information can be keywords from the jQuery library.

[0116] Among them, script feature information can be the script identifier of the script or the storage path of the script on the server.

[0117] S803: The computer equipment constructs an information acquisition interface for the region based on the script.

[0118] In one example, the script builds an information retrieval interface, through which developers can customize region information, and computer devices can return display region nodes that match the region to be displayed through the information retrieval interface.

[0119] The computer device can generate custom area information in response to input instructions for the area to be displayed.

[0120] S804. The computer device, through the information acquisition interface, selects the display area node that matches the display area from the object nodes contained in the display interface based on the area information.

[0121] Specifically, through the information acquisition interface, embodiments of this application can use a node selector to filter out the display area nodes that match the display area from the object nodes contained in the display interface.

[0122] Specifically, the node selector can be a class name selector and a child node selector encapsulated by the jQuery library.

[0123] S805. The computer device obtains the image style attribute information of the background image to be displayed in the display area.

[0124] In some embodiments of the application, the image style attribute information can be information stored in a database. Thus, the image style attribute information of the background image can be extracted from the database in this embodiment of the application.

[0125] S806. The computer device extracts the pre-loaded information of the background image from the nodes of the area to be displayed based on the image style attribute information.

[0126] The preloading information can be the preloading path of the background image.

[0127] In this embodiment, an extraction function for extracting preloaded information of the background image can be encapsulated in the jQuery library. Based on the extraction function, the preloaded information of the background image is extracted from the nodes of the area to be displayed according to the image style attribute information.

[0128] Specifically, the extraction function can include the css() method encapsulated in the jQuery library, which extracts the preloaded information of the background image from the nodes of the area to be displayed based on the image style attribute information.

[0129] It's important to note that the target image style attribute information for the background image used in the pop-up window is often written in the outermost or second-outermost child node of the node in the area to be displayed. The second-outermost child node is the next level node after the outermost child node. This can be understood as the preloading information for the background image also being written in the outermost or second-outermost child node of the node in the area to be displayed.

[0130] To maximize coverage of pop-ups on the current page, the paths for storing the preloaded information obtained in this embodiment are concentrated in the nodes of the area to be displayed, and the outermost or second-outermost child nodes of the nodes of the area to be displayed. Since the nodes of the area to be displayed may not have child nodes, the preloaded information is stored in the nodes of the area to be displayed.

[0131] In some application embodiments, the method for extracting the preload information of the background image from the node of the area to be displayed based on the image style attribute information can be as follows: perform preload information search processing in the node of the area to be displayed based on the image style attribute information to obtain the initial preload information corresponding to the background image; and perform extraction processing on the initial preload information to obtain the preload information corresponding to the background image.

[0132] In this embodiment, the initial preloading information obtained is url('path'), which needs to be processed by string truncation to remove the double quotes before and after url('path') to obtain the final loading information path.

[0133] Based on the above, specifically, the method for extracting and processing the initial preloaded information to obtain the preloaded information corresponding to the background image can be as follows: obtain preset reference information; determine the key information in the initial preloaded information that matches the preset reference information based on the preset reference information; and extract and process the initial preloaded information based on the key information to obtain the preloaded information corresponding to the background image.

[0134] The key information can be the double quotes before and after url('path').

[0135] Since background images are often reused in multiple pop-ups, the initial preloading information collected in this application embodiment needs to be deduplicated to obtain preloading information. Specifically, the initial preloading information is deduplicated to obtain duplicate target initial preloading information; the target initial preloading information is deleted from the initial preloading information to obtain the preloading information corresponding to the background image.

[0136] S807. The computer device preloads the background image based on the preload information.

[0137] In this embodiment, a network request is made based on preloaded information to preload a background image.

[0138] The object nodes include the area to be displayed nodes and the display area nodes. The method for preloading the background image based on preload information can be as follows: determine whether the node information of the display area nodes in the display interface has been fully loaded; if the node information has been fully loaded, then preload the background image based on the preload information.

[0139] It is understood here that, in order to avoid the background image blocking the loading of the display area in the display interface, the embodiments of this application will preload the background image after the node information of the display area node has been loaded.

[0140] S808: The computer device displays the area to be displayed within the display interface based on a preloaded background image.

[0141] After the background image is preloaded in this embodiment, the preloaded information of the preloaded background image will be written on the front-end console for developers to verify and process.

[0142] When a user clicks on the corresponding pop-up control, the complete background image of the pop-up and other related content will be displayed directly, thus greatly reducing the flickering or slow loading phenomenon when the pop-up is clicked for the first time.

[0143] One option is to add an overlay area to the display interface to show the pop-up window.

[0144] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0145] This application embodiment allows all pages currently using pop-ups to automatically capture the pop-up display area nodes using the script of this application embodiment, and obtain the preloaded information of the background image in the display area nodes. When retrieving the preloaded information, according to the current pop-up writing rules for pop-ups, a two-level search can be performed on the parent node and the first-level child nodes of the display area node to obtain the preloaded information, ensuring that all display area nodes on the page can be covered with a high probability.

[0146] The embodiments of this application can ensure that the preloading of the background image is performed after the node information of the display area node of the page is loaded. This is to allow the page to be presented in the user's field of vision first, and then to perform the optimization work of preloading the background image.

[0147] The embodiments of this application allow developers to avoid manually collecting and preloading page pop-up images, thus optimizing the user experience and freeing up some of the developers' labor.

[0148] The embodiments in this application are further described, such as Figure 9 As shown, this embodiment of the application can obtain the area information of the area to be displayed within the display interface, such as the public class name of the display area nodes. Then, it obtains the script information for the area information, such as keywords in the jQuery library; based on the script information, it determines whether the script is stored in the local storage space; if the script is not stored in the local storage space, it obtains the script feature information corresponding to the script, and obtains the script for the area information from the server based on the script feature information; if the script exists, it obtains the script for the area information from the local storage space. Next, based on the script, an information acquisition interface for the region information is constructed. Using this interface, the node matching the region to be displayed is selected from the object nodes contained in the display interface. The image style attribute information of the background image to be displayed within the region is obtained. Based on the image style attribute information, preload information is searched within the node to be displayed to obtain the initial preload information corresponding to the background image. Then, the initial preload information is deduplicated, specifically by deduplicating the initial preload information to obtain duplicate target initial preload information. This target initial preload information is then deleted from the initial preload information to obtain the preload information corresponding to the background image.

[0149] This application embodiment can obtain the region information of the area to be displayed within the display interface; based on the region information, filter out the display area nodes that match the display area from the object nodes contained in the display interface; obtain the image style attribute information of the background image to be displayed within the display area; extract the preloading information of the background image from the display area nodes based on the image style attribute information; preload the background image based on the preloading information, so as to display the area to be displayed within the display interface based on the preloaded background image; since this application embodiment allows all display interfaces that currently use the display area, such as pop-ups, such as pages, to automatically capture the display area nodes and obtain the preloading information of the background image in the display area nodes, the effect of quickly obtaining the preloading information in the front-end display interface can be achieved. Especially when there are multiple display areas in the front-end display interface, the efficiency of obtaining the preloading information can be further demonstrated, thereby enabling the background image to be preloaded quickly. In this way, the display area can be quickly displayed based on the preloaded background image, avoiding the flickering effect.

[0150] To better implement the above methods, embodiments of this application also provide a regional display device, which can be integrated into a computer device, such as a server or terminal, and the terminal may include a tablet computer, a laptop computer, and / or a personal computer.

[0151] For example, such as Figure 10 As shown, the area display device may include a first acquisition unit 301, a filtering unit 302, a second acquisition unit 303, an extraction unit 304, and a preloading unit 305, as follows:

[0152] (1) First acquisition unit 301;

[0153] The first acquisition unit 301 can be used to acquire the area information of the area to be displayed within the display interface.

[0154] (2) Filtering unit 302;

[0155] The filtering unit 302 can be used to filter out the display area nodes that match the display area from the object nodes contained in the display interface based on the area information.

[0156] In some embodiments, the filtering unit 302 can be used to obtain an information acquisition interface for region information; and through the information acquisition interface, filter out the display region nodes that match the display region from the object nodes contained in the display interface according to the region information.

[0157] In some embodiments, the filtering unit 302 can be used to obtain a script for regional information; and to construct an information acquisition interface for regional information based on the script.

[0158] In some embodiments, the filtering unit 302 can be used to obtain script information for region information; determine whether a script is stored in the local storage space based on the script information; if no script is stored in the local storage space, obtain the script feature information corresponding to the script, and obtain the script for region information from the server based on the script feature information; if a script exists, obtain the script for region information from the local storage space.

[0159] (3) Second acquisition unit 303;

[0160] The second acquisition unit 303 can be used to acquire the image style attribute information of the background image to be displayed in the display area.

[0161] (4) Extraction unit 304;

[0162] The extraction unit 304 can be used to extract the preloaded information of the background image from the nodes of the area to be displayed based on the image style attribute information.

[0163] In some embodiments, the extraction unit 304 can be used to perform preload information lookup processing in the node of the area to be displayed according to the image style attribute information to obtain the initial preload information corresponding to the background image; and to extract the initial preload information to obtain the preload information corresponding to the background image.

[0164] In some embodiments, the extraction unit 304 may be used to obtain preset reference information; determine key information in the initial preload information that matches the preset reference information based on the preset reference information; and extract the initial preload information based on the key information to obtain the preload information corresponding to the background image.

[0165] In some embodiments, the extraction unit 304 can be used to perform deduplication processing on the initial preload information to obtain duplicate target initial preload information in the initial preload information; and to delete the target initial preload information in the initial preload information to obtain the preload information corresponding to the background image.

[0166] (5) Preloading unit 305;

[0167] The preloading unit 305 can be used to preload the background image according to the preloading information, so as to display the area to be displayed in the display interface based on the preloaded background image.

[0168] In some embodiments, the object node includes a display area node and a display area node; the preloading unit 305 can be used to determine whether the node information of the display area node in the display interface has been loaded; if the node information has been loaded, the background image is preloaded according to the preloading information.

[0169] As can be seen from the above, the first acquisition unit 301 of this application embodiment can be used to acquire the region information of the area to be displayed within the display interface; the filtering unit 302 can be used to filter out the display area nodes that match the display area from the object nodes contained in the display interface according to the region information; the second acquisition unit 303 can be used to acquire the image style attribute information of the background image to be displayed within the display area; the extraction unit 304 can be used to extract the preloading information of the background image from the display area nodes according to the image style attribute information; the preloading unit 305 can be used to preload the background image according to the preloading information, so as to... After preloading, the background image is displayed in the designated display area within the display interface. This embodiment allows all display interfaces using designated display areas, such as pop-ups, to automatically capture the nodes of the designated display area and obtain the preloading information of the background image within those nodes. This enables rapid acquisition of preloading information on the front-end display interface, especially when there are multiple designated display areas. This significantly improves the efficiency of obtaining preloading information, allowing for rapid preloading of the background image. Consequently, the designated display area can be displayed quickly based on the preloaded background image, avoiding flickering. Specifically, when retrieving the preloading information of the background image, this embodiment uses the current pop-up writing rules to perform a two-layer search on both the parent node and the first-level child nodes of the display area node, ensuring a high probability of covering all designated display area nodes on the page. This embodiment eliminates the need for developers to manually collect and preload background images, optimizing the user experience and freeing up some of their workload.

[0170] This application also provides a computer device, such as... Figure 11 As shown, it illustrates a structural schematic diagram of the computer device involved in the embodiments of this application, specifically:

[0171] The computer device may include components such as a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, a power supply 403, and an input unit 404. Those skilled in the art will understand that... Figure 11 The computer device structure shown does not constitute a limitation on the computer device and may include more or fewer components than shown, or combine certain components, or have different component arrangements. Wherein:

[0172] The processor 401 is the control center of the computer device, connecting various parts of the computer device through various interfaces and lines. It performs various functions and processes data by running or executing software programs and / or modules stored in the memory 402, and by calling data stored in the memory 402. Optionally, the processor 401 may include one or more processing cores; preferably, the processor 401 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and computer programs, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 401.

[0173] The memory 402 can be used to store software programs and modules. The processor 401 executes various functional applications and data processing by running the software programs and modules stored in the memory 402. The memory 402 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, computer programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 402 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 402 may also include a memory controller to provide the processor 401 with access to the memory 402.

[0174] The computer device also includes a power supply 403 that supplies power to the various components. Preferably, the power supply 403 can be logically connected to the processor 401 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. The power supply 403 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0175] The computer device may also include an input unit 404, which can be used to receive input digital or character information communication, and to generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

[0176] Although not shown, the computer device may also include a display unit, etc., which will not be described in detail here. Specifically, in this embodiment, the processor 401 in the computer device loads the executable files corresponding to the processes of one or more computer programs into the memory 402 according to the following instructions, and the processor 401 runs the computer programs stored in the memory 402 to realize various functions, as follows:

[0177] This application embodiment can obtain region information of the area to be displayed within the display interface; based on the region information, filter out the display area nodes that match the display area from the object nodes contained in the display interface; obtain the image style attribute information of the background image to be displayed within the display area; extract the preloading information of the background image from the display area nodes based on the image style attribute information; preload the background image based on the preloading information, so as to display the display area within the display interface based on the preloaded background image.

[0178] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0179] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by a computer program, or by a computer program controlling related hardware. The computer program can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0180] Therefore, embodiments of this application provide a computer-readable storage medium storing a computer program that can be loaded by a processor to execute any of the area display methods provided in embodiments of this application.

[0181] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0182] The computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0183] Since the instructions stored in the computer-readable storage medium can execute the steps in any of the area display methods provided in the embodiments of this application, the beneficial effects that any of the area display methods provided in the embodiments of this application can achieve can be realized, as detailed in the preceding embodiments, and will not be repeated here.

[0184] According to one aspect of this application, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations of the above embodiments.

[0185] The above provides a detailed description of a region display method, computer device, and computer-readable storage medium provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for displaying a region, characterized in that, include: Obtain the area information of the region to be displayed within the display interface; Based on the region information, filtering out the display region nodes that match the display region from the object nodes included in the display interface includes: obtaining the mapping relationship between the object nodes and preset object information, wherein the preset object information includes preset region information corresponding to the display region nodes, the object nodes indicate the region existing in the display interface with preset functions and preset appearance, and the display region nodes belong to object nodes; searching for the preset region information corresponding to the region information in the preset object information based on the region information; determining the object node corresponding to the preset region information based on the mapping relationship between the object nodes and the preset object information, thereby obtaining the display region nodes that match the display region. Obtain the image style attribute information of the background image to be displayed within the area to be displayed; Based on the image style attribute information, the preloading information is searched and processed in the node of the area to be displayed to obtain the initial preloading information corresponding to the background image; The initial preload information is extracted and processed to obtain the preload information corresponding to the background image. The preload information is the initial preload information after denoising or the initial preload information after deduplication. The background image is preloaded according to the preloaded information, so that the area to be displayed is displayed in the display interface based on the preloaded background image.

2. The area display method according to claim 1, characterized in that, The step of filtering out display area nodes that match the display area from the object nodes included in the display interface based on the area information includes: Obtain the information retrieval interface for the aforementioned region; Based on the region information, the information acquisition interface filters out the display region nodes that match the display region from the object nodes contained in the display interface.

3. The area display method according to claim 2, characterized in that, The information acquisition interface for the region includes: A script for obtaining information about the region; Based on the script, construct the information acquisition interface for the region information.

4. The area display method according to claim 3, characterized in that, The script for obtaining information about the region includes: Obtain script information for the region; Based on the script information, determine whether the script is stored in the local storage space; If the script is not stored in the local storage space, the script feature information corresponding to the script is obtained, and the script for the region information is obtained from the server based on the script feature information. If a script exists, the script for the region information is retrieved from the local storage space.

5. The area display method according to claim 1, characterized in that, The step of extracting the initial preloaded information to obtain the preloaded information corresponding to the background image includes: Obtain preset reference information; Based on the preset reference information, key information matching the preset reference information in the initial preload information is determined, and the key information is noise in the initial preload information; Based on the key information, the initial preload information is extracted and processed to obtain the preload information corresponding to the background image.

6. The area display method according to claim 1, characterized in that, The step of extracting the initial preloaded information to obtain the preloaded information corresponding to the background image includes: The initial preload information is deduplicated to obtain duplicate target initial preload information. The target initial preload information is deleted from the initial preload information to obtain the preload information corresponding to the background image.

7. The area display method according to any one of claims 1 to 6, characterized in that, The object node includes a display area node and a display area node; the preloading of the background image according to the preloading information includes: Determine whether the node information of the nodes in the display area of ​​the display interface has been fully loaded; If the node information is fully loaded, the background image is preloaded according to the preloaded information.

8. A region display device, characterized in that, include: The first acquisition unit is used to acquire the area information of the area to be displayed within the display interface; A filtering unit is configured to filter out display area nodes that match the display area from object nodes included in the display interface based on the region information, including: obtaining a mapping relationship between the object nodes and preset object information, wherein the preset object information includes preset region information corresponding to the display area nodes, the object nodes indicate areas existing in the display interface with preset functions and preset display forms, and the display area nodes belong to object nodes; searching for preset region information corresponding to the region information in the preset object information based on the region information; determining the object node corresponding to the preset region information based on the mapping relationship between the object nodes and the preset object information, thereby obtaining the display area nodes that match the display area; The second acquisition unit is used to acquire image style attribute information of the background image to be displayed in the area to be displayed; The extraction unit is used to perform preloading information lookup processing in the node of the area to be displayed according to the image style attribute information to obtain the initial preloading information corresponding to the background image; and to extract the initial preloading information to obtain the preloading information corresponding to the background image, wherein the preloading information is the initial preloading information after noise reduction or the initial preloading information after deduplication. A preloading unit is used to preload the background image according to the preloading information, so as to display the area to be displayed in the display interface based on the preloaded background image.

9. The area display device according to claim 8, characterized in that, The filtering unit is specifically used to obtain an information acquisition interface for regional information; and through the information acquisition interface, to filter out the display area nodes that match the display area from the object nodes contained in the display interface according to the regional information.

10. A computer device, characterized in that, It includes a memory and a processor; the memory stores a computer program, and the processor is used to run the computer program in the memory to perform the area display method according to any one of claims 1 to 7.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program adapted for loading by a processor to perform the area display method according to any one of claims 1 to 7.

12. A computer program product, characterized in that, The computer program product stores a computer program adapted for loading by a processor to execute the area display method according to any one of claims 1 to 7.

Images