Method and device for dynamically generating page skeleton screen, electronic equipment and storage medium

Abstract

The invention relates to the field of data request processing, and discloses a method for dynamically generating a page skeleton screen, which comprises the following steps of: acquiring HTML (Hypertext Markup Language) content according to a page identifier of a page to be processed, and analyzing the HTML content to obtain a document object tree; identifying element nodes in the document object tree, judging the content type of each element node according to tag names and attribute values in node information of the element nodes, generating placeholder elements according to the content types, and collecting all the generated placeholder elements to obtain a skeleton screen template; according to the equipment operation information, adjusting a placeholder element corresponding to the skeleton screen template to obtain an adjusted skeleton screen template; and inserting the adjusted skeleton screen template into a display container to obtain a skeleton screen container, inserting the skeleton screen container into a preset position and displaying placeholder elements of the skeleton screen, and switching the skeleton screen to real content. According to the method, skeleton screen codes do not need to be written manually, the skeleton screen is generated by automatically analyzing the page document object tree and the data drive, and the page can be dynamically adapted.

Description

Technical Field

[0001] The present invention relates to the field of data request processing, and particularly to a method, device, electronic device, and storage medium for dynamically generating a page skeleton screen. Background Art

[0002] In modern web development, in order to improve the user experience, developers usually display a skeleton screen before the real content is loaded. The skeleton screen can simulate the basic layout and structure of the page, giving users a smoother visual experience while waiting for the real content to load. However, the following are several common methods and their limitations in implementing the skeleton screen in the prior art:

[0003] 1. Manually writing a static skeleton screen: Developers manually write the HTML and CSS of the skeleton screen according to the page layout to implement the placeholder for the picture box and text bar. This method has a high development cost, and the static layout is difficult to adapt to dynamic content, unable to meet the adaptation requirements of dynamic data.

[0004] 2. Component-level skeleton screen: Using the skeleton screen components provided by front-end frameworks (such as Vue or React), and configuring the display effect through props. Although part of the development work is simplified, developers still need to manually define the skeleton screen layout, with poor adaptability to dynamic content, and additional configuration is required for complex pages, increasing the development and maintenance difficulty.

[0005] 3. Combining server-side rendering (SSR) with the skeleton screen: Directly outputting the static skeleton screen HTML content through server-side rendering, and replacing it with the real content after the browser finishes loading. The skeleton screen generated by this method is fixed, difficult to adjust according to dynamic data, and there may be flickering or stuttering phenomena during the replacement process, affecting the user experience.

[0006] Therefore, how to automatically generate and dynamically adapt the skeleton screen of the page is a technical problem that urgently needs to be solved. Summary of the Invention

[0007] In view of the above, it is necessary to provide a method for dynamically generating a page skeleton screen, the purpose of which is to generate the skeleton screen by automatically parsing the page document object tree and data driving without manually writing the skeleton screen code, and to be able to dynamically adapt to the page.

[0008] The method for dynamically generating a page skeleton screen provided by the present invention includes:

[0009] Receiving a request to load a page to be processed on a target device, obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed, and parsing the HTML content to obtain the document object tree of the page to be processed;

[0010] Identify the element nodes in the document object tree, obtain the node information of each element node, determine the content type of the content stored in each element node according to the tag name and attribute value in the node information, generate placeholder elements corresponding to the page to be processed according to the content type, and collect all the generated placeholder elements to obtain the skeleton screen template of the page to be processed;

[0011] Obtain the device operation information of the target device, and adjust the placeholder elements corresponding to the skeleton screen template according to the device operation information to obtain an adjusted skeleton screen template. The device operation information includes at least one of the screen size information, resolution information, and network status information of the target device;

[0012] Insert the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, insert the skeleton screen container into a preset position of the page to be processed and display the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switch the skeleton screen to the real content.

[0013] Optionally, the obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed includes:

[0014] Extract the page identifier of the page to be processed from the request;

[0015] According to the page identifier, send a request to the server to obtain the HTML content of the page to be processed;

[0016] Receive the response result returned by the server for obtaining the HTML content, and extract the HTML content of the page to be processed from the response result.

[0017] Optionally, the parsing the HTML content to obtain the document object tree of the page to be processed includes:

[0018] Load the HTML content into a preset HTML parser, and use the HTML parser to parse the HTML string of the HTML content into a structured document object tree.

[0019] Optionally, the identifying the element nodes in the document object tree includes:

[0020] Use a preset page scanner to start from the root node of the document object tree and recursively traverse each node of the document object tree to obtain the node types of all nodes. The node types include text nodes, comment nodes, and element nodes;

[0021] Use a preset conditional statement for judging element nodes to judge the integer value corresponding to each node type, and filter out element nodes from all node types according to the judgment result.

[0022] Optionally, determining the content type of the content stored in each element node according to the tag name and attribute value in the node information includes:

[0023] Querying a preset association table between element nodes and content types according to the tag name and attribute value of each element node to obtain the initial type of the corresponding element node;

[0024] Obtaining the preset attribute value corresponding to the initial type from the association table, and updating the attribute value in the corresponding element node with the preset attribute value to obtain the content type of the content stored in each element node.

[0025] Optionally, the content type includes a picture type, a text type, and a block level type. Generating a placeholder element corresponding to the page to be processed according to the content type includes:

[0026] For an element node of the picture type, generating a picture partition element with the same width and height, and setting the background color of the picture partition element to obtain a picture placeholder element;

[0027] For an element node of the text type, generating a text partition element with a fixed height and width, and setting the background color of the text partition element to obtain a text placeholder element;

[0028] For an element node of the block level type, generating a block level partition element with the same width and height, and setting the background color of the block level partition element to obtain a block level placeholder element.

[0029] Optionally, adjusting the placeholder element corresponding to the skeleton screen template according to the device running information of the target device to obtain an adjusted skeleton screen template includes:

[0030] Traversing each placeholder element in the skeleton screen template, and adjusting each element according to the device running information;

[0031] Collecting all the adjusted placeholder elements to generate an adjusted skeleton screen template.

[0032] To solve the above problems, the present invention also provides a device for dynamically generating a page skeleton screen, and the device includes:

[0033] A parsing module, configured to receive a request for loading a page to be processed on a target device, obtain the HTML content of the page to be processed according to the page identifier of the page to be processed, and parse the HTML content to obtain the document object tree of the page to be processed;

[0034] An identification module, configured to identify element nodes in the document object tree, obtain node information of each element node, determine the content type of the content stored in each element node according to the tag name and attribute value in the node information, generate placeholder elements corresponding to the page to be processed according to the content type, and collect all the generated placeholder elements to obtain a skeleton screen template of the page to be processed;

[0035] An adjustment module, configured to obtain device operation information of the target device, and adjust the placeholder elements corresponding to the skeleton screen template according to the device operation information to obtain an adjusted skeleton screen template, where the device operation information includes at least one of screen size information, resolution information, and network status information of the target device;

[0036] A switching module, configured to insert the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, insert the skeleton screen container into a preset position of the page to be processed and display the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switch the skeleton screen to the real content.

[0037] To solve the above problems, the present invention further provides an electronic device, where the electronic device includes:

[0038] At least one processor; and,

[0039] A memory communicatively connected to the at least one processor; wherein,

[0040] The memory stores a program for dynamically generating a page skeleton screen that can be executed by the at least one processor, and the program for dynamically generating a page skeleton screen is executed by the at least one processor so that the at least one processor can execute the above method for dynamically generating a page skeleton screen.

[0041] To solve the above problems, the present invention further provides a computer-readable storage medium, where a program for dynamically generating a page skeleton screen is stored on the computer-readable storage medium, and the program for dynamically generating a page skeleton screen can be executed by one or more processors to implement the above method for dynamically generating a page skeleton screen.

[0042] Compared with the prior art, the present invention obtains the HTML content according to the page identifier and parses it into a document object tree, providing basic data support for the subsequent generation of the skeleton screen, ensuring that the skeleton screen can be dynamically generated based on the actual structure of the page, rather than relying on a static template written manually. Traverse the document object tree, identify element nodes and obtain node information, judge the content type according to the tag name and attribute value, generate corresponding placeholder elements, and gather them to form a skeleton screen template. By automatically parsing page elements and generating placeholder elements, the dynamic generation of the skeleton screen is realized, avoiding the cumbersome process of manually defining the skeleton screen layout, and at the same time improving the adaptability of the skeleton screen to dynamic content. Obtain information such as the screen size, resolution, and network status of the target device, and dynamically adjust the placeholder elements in the skeleton screen template. This process dynamically adjusts the skeleton screen template according to the running state of the device, ensuring that the skeleton screen can adapt to the display requirements of different devices, optimizing the user experience, and solving the deficiencies of traditional skeleton screens in multi-device adaptation. Insert the adjusted skeleton screen template into the display container, embed it in the preset position of the page and display the placeholder elements. After the real content is loaded, smoothly switch to the real content, providing instant visual feedback to the user, and ensuring a smoother switch between the skeleton screen and the real content by dynamically generating and adjusting the skeleton screen, reducing flickering or stuttering phenomena.

[0043] The present invention jointly solves the problems existing in the traditional skeleton screen technology, such as high development cost, difficulty in adapting static layouts to dynamic content, poor device adaptability, and poor user experience, by automatically parsing the page document object tree, dynamically generating placeholder elements, adjusting the skeleton screen template according to device information, and realizing the display and content switching of the skeleton screen. It can automatically generate a skeleton screen according to the actual structure of the page and the running state of the device, providing a smoother and more personalized visual experience for users, while significantly reducing the development and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 is a schematic flowchart of a method for dynamically generating a page skeleton screen provided by an embodiment of the present invention;

[0045] Figure 2 is a schematic block diagram of a device for dynamically generating a page skeleton screen provided by an embodiment of the present invention;

[0046] Figure 3 is a schematic structural diagram of an electronic device for implementing a method for dynamically generating a page skeleton screen provided by an embodiment of the present invention;

[0047] The implementation, functional features, and advantages of the present invention will be further described with reference to the embodiments and the accompanying drawings. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0048] In order to make the objectives, technical solutions and advantages of the present invention more clear and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0049] It should be noted that the descriptions involving "first", "second", etc. in the present invention are only for descriptive purposes and cannot be construed as indicating or implying their relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include at least one such feature. In addition, the technical solutions between various embodiments can be combined with each other, but it must be based on the ability of those of ordinary skill in the art to implement. When the combination of technical solutions results in contradictions or cannot be implemented, it should be considered that such a combination of technical solutions does not exist and is not within the protection scope required by the present invention.

[0050] Refer to Figure 1 As shown, it is a schematic flowchart of a method for dynamically generating a page skeleton screen provided by an embodiment of the present invention. This method is executed by an electronic device.

[0051] In this embodiment, the method for dynamically generating a page skeleton screen includes:

[0052] S1. Receive a request to load a page to be processed on a target device, obtain the HTML content of the page to be processed according to the page identifier of the page to be processed, and parse the HTML content to obtain the document object tree of the page to be processed;

[0053] In this embodiment, when a user enters a website address, clicks a link, or triggers page loading through an operation in a browser of a target device (such as a mobile phone, tablet, or computer), the browser will send a request to the server to request the content of the page.

[0054] Obtain the page identifier of the page to be processed from the request. The page identifier is a string used to uniquely identify a page, such as a URL. The role of the page identifier is to tell the server the specific real content that the user needs to load.

[0055] After the server receives the request, it finds the corresponding HTML content according to the page identifier and returns it to the browser. The HTML content is a text-formatted string that contains the structure and style information of the page to be processed. The browser or front-end code needs to parse the HTML content into a structured document object tree, that is, the DOM tree (Document Object Model). The document object tree is a hierarchical node structure that represents the logical structure of the page, and each node represents an element in the page (such as <h1>, , etc.)

[0056] Taking a financial loan scenario as an example of the present invention, assume that a user accesses a loan application page through a mobile banking or financial APP. The real content includes a user information input box, a loan product list, an interest rate description, an application button, etc. Before the data is loaded completely, a skeleton screen will be displayed on the page to simulate the layout and structure of the real page. The following is the specific process:

[0057] When the user opens the loan application page, the server first receives the page loading request and obtains the HTML content according to the page identifier. By parsing the HTML, a document object tree of the page is generated, so as to understand the overall structure of the page, such as the distribution of elements such as input boxes, buttons, and text content.

[0058] In one embodiment, obtaining the HTML content of the to-be-processed page according to the page identifier of the to-be-processed page includes:

[0059] Extracting the page identifier of the to-be-processed page from the request;

[0060] According to the page identifier, sending a request to the server to obtain the HTML content of the to-be-processed page;

[0061] Receiving the response result returned by the server for obtaining the HTML content, and extracting the HTML content of the to-be-processed page from the response result.

[0062] When the browser sends a request, the request contains the URL of the target page. Extract the page identifier (usually the path part of the URL) from the URL of the request, and according to the extracted page identifier, find the corresponding real content. If the real content is stored in the file system of the server, the server will read the file; if the real content needs to be generated dynamically (such as obtaining data from a database), the server will execute the corresponding logic to generate the HTML content.

[0063] The server encapsulates the generated HTML content into an HTTP response result and sends it to the client (browser). After receiving the response result, the browser extracts the HTML content from the response result for subsequent parsing and rendering.

[0064] In one embodiment, parsing the HTML content to obtain the document object tree of the to-be-processed page includes:

[0065] Loading the HTML content into a preset HTML parser, and using the HTML parser to parse the HTML string of the HTML content into a structured document object tree.

[0066] The HTML content includes the title, header information, and body content of a web page. However, the HTML content is in plain text format, and computers cannot directly understand its structure and logic.

[0067] It is necessary to load the HTML content into a preset HTML parser. An HTML parser is a tool or library used to parse an HTML string into a structured document object tree. The parser can be a built-in parser of a browser or a third-party library (such as DOMParser in JavaScript or BeautifulSoup in Python).

[0068] Use the HTML parser to parse the HTML content line by line, identify the HTML strings (tags, attributes, and text content) in the HTML content, obtain the parsing result, and organize the parsing result into a tree structure according to the structure of the HTML content to get the document object tree. Each node of the document object tree contains the following information:

[0069] Node type: element node (such as ) Text nodes, comment nodes, etc.

[0070] Node attributes: such as class="transaction-list" or data-type="text".

[0071] Style information: such as the width and height of elements (which can be obtained by parsing CSS).

[0072] Parent-child relationship: indicating the nesting relationship between elements.

[0073] The structure of the document object tree includes: Root node: usually a tag. Child nodes: such as and. Deeper nodes: such as <h1>、 etc.

[0074] By parsing the HTML content to obtain the document object tree, any element and its attributes in the page can be accessed, a skeleton screen consistent with the page layout of the page to be processed can be generated, and the style and layout of the skeleton screen can be dynamically adjusted according to the node information in the document object tree.

[0075] In step S1, obtaining the document object tree of the page to be processed is the basis and key step of the entire dynamic skeleton screen generation process. Through document object tree parsing, a skeleton screen can be generated according to the actual layout of the page, rather than relying on a fixed template. This enables the skeleton screen to better simulate the real layout of the page, provides the necessary page structure information for subsequent skeleton screen generation, adaptation, and rendering, and solves the problem that static skeleton screens in the prior art are difficult to adapt to dynamic content and complex page layouts.

[0076] S2. Identify the element nodes in the document object tree, obtain the node information of each element node, judge the content type of the content stored in each element node according to the tag name and attribute value in the node information, generate placeholder elements corresponding to the page to be processed according to the content type, and collect all the generated placeholder elements to obtain the skeleton screen template of the page to be processed;

[0077] In this embodiment, the document object tree not only contains element nodes, but also contains text nodes, comment nodes, etc. Therefore, it is necessary to filter out the element nodes through conditional statements (such as node.nodeType === 1). Element nodes are the main basis for generating the skeleton screen because element nodes define the layout and structure of the page.

[0078] Obtain the detailed node information of each element node, including: tag name (such as div, img, p, etc.). Style information (such as width, height, position, etc., which can be obtained through window.getComputedStyle). Attribute value (such as data-type, class, id, etc.).

[0079] Judge the content type of each element node according to the tag name and attribute value of the node. The content type determines the style and behavior of the generated placeholder element. The content types include: image type (such as tag or data-type = "image"). Text type (such as 、 、 <h1>such tags or data-type = "text"). Block-level types (such as , usually representing a general placeholder area).

[0080] The logic for determining the content type of each element node: If the tag name is img, the content type is an image. If the tag name is p, span, h1, etc., the content type is text. If the node has a data-type attribute, the content type is determined according to the value of the data-type.

[0081] According to the content type of each node, the system generates corresponding placeholder elements. The placeholder elements are the core of the skeleton screen and are used to simulate the layout and style of real content during page loading. The generation rules are as follows:

[0082] Image type: Generate a placeholder element with the same width and height, and the background color is light gray (such as #ccc).

[0083] Text type: Generate a placeholder element with a fixed height, and the background color is light gray (such as #ddd).

[0084] Block-level type: Generate a placeholder element with the same width and height, and the background color is light gray (such as #eee).

[0085] Collect all the generated placeholder elements to form a complete skeleton screen template. The skeleton screen template will be inserted into the page to be processed and used as a placeholder display before the real content is actually loaded.

[0086] Continue to illustrate the present invention with the above financial loan scenario. Identify each element node in the document object tree and determine its content type (such as text box, button, image, etc.) according to the tag name and attribute value. For example, for the loan product list, the system will generate multiple gray rectangular placeholder elements; for the interest rate description, a text placeholder bar will be generated. These placeholder elements are collected to form a skeleton screen template to simulate the basic layout of the page.

[0087] In one embodiment, the identifying the element nodes in the document object tree includes:

[0088] Using a preset page scanner to start from the root node of the document object tree and recursively traverse each node of the document object tree to obtain the node types of all nodes. The node types include text nodes, comment nodes, and element nodes;

[0089] Using a preset conditional statement for judging element nodes to judge the integer value corresponding to each node type, and screening out element nodes from all node types according to the judgment result.

[0090] The document object tree is a hierarchical node structure that contains node information for all elements in the page. To generate the skeleton screen, starting from the root node (usually the <html> tag) of the document object tree, a preset recursive function is used to visit its child nodes layer by layer until all nodes are visited, and the node types of all nodes are obtained.

[0091] The node types include: Element nodes (node.nodeType === 1): representing HTML tags, such as 、 、 etc. Text nodes (node.nodeType === 3): represent text content. Comment nodes (node.nodeType === 8): represent HTML comments.

[0092] Use the condition statement of node.nodeType === 1 to determine whether the current node is an element node. If the condition is met, mark the node as an element node and record its node information.

[0093] Extracting the element node information related to the page layout from the document object tree can help understand the page layout structure, and thus generate a skeleton screen consistent with the page layout.

[0094] Traditional static skeleton screens are difficult to adapt to complex pages or dynamic content. Through dynamically traversing the document object tree and filtering element nodes, the present invention can automatically identify new elements or dynamically generated content in the page, and generate a skeleton screen consistent with the actual structure of the page, even if the real content changes (such as dynamically loaded data).

[0095] In one embodiment, the obtaining the node information of each element node includes:

[0096] Obtain the width, height, and position of each element node as style information;

[0097] Obtain the tag name and attribute values of each element node, where the attribute values include data type values and default values;

[0098] Take the style information, the tag name, and the attribute values as the node information.

[0099] The style information includes: Width: the width of the element, used to determine the width of the placeholder element. Height: the height of the element, used to determine the height of the placeholder element. Position: the position of the element in the page (such as absolute, relative, etc.), used to ensure that the layout of the placeholder element is consistent with the original page.

[0100] The tag name (TagName) is the HTML tag name of the element node, such as div, img, p, h1, etc. The tag name is used to determine the type of the element (such as image, text, block-level element, etc.), so as to decide which type of placeholder element to generate.

[0101] The attribute values can help the system more accurately identify the content type of the element, and thus generate a more suitable placeholder element. The attribute values include data type values and default values:

[0102] Data type value (data-type): A custom attribute used to explicitly specify the content type of an element (e.g., data-type = "text" or data-type = "image").

[0103] Default value (default): If the data-type is not explicitly specified, the default value (such as default) is used to determine the content type.

[0104] Integrate the obtained style information, tag name, and attribute values into a complete node information object, which will be used as the basic data for generating the skeleton screen later.

[0105] In one embodiment, determining the content type of the content stored in each element node according to the tag name and attribute value in the node information includes:

[0106] According to the tag name and attribute value of each element node, query the preset association table between the element node and the content type to obtain the initial type of the corresponding element node;

[0107] Obtain the preset attribute value corresponding to the initial type from the association table, and use the preset attribute value to update the attribute value in the corresponding element node to obtain the content type of the content stored in each element node.

[0108] The preset association table between the element node and the content type is used to define the mapping relationship between different tag names and attribute values and the content type. The role of this association table is to quickly determine the content type of each element node.

[0109] For each element node, according to its tag name (such as 、 ) and the attribute values (such as data-type="text") to query the preset association table, thereby determining the initial type of the node.

[0110] After judging the initial type, obtain the preset attribute values corresponding to the initial type from the association table, and use these preset attribute values to replace the original attribute values of the element nodes, so as to obtain the content type of the content stored in each element node. This step is to ensure that the generated placeholder elements can better adapt to the requirements of the skeleton screen.

[0111] Through the preset association table, the content type of the element nodes can be dynamically judged according to the tag names and attribute values of the element nodes, which enables the skeleton screen to adapt to the layouts and contents of different pages without manual configuration.

[0112] By dynamically replacing the attribute values, the styles of the placeholder elements can be adjusted according to the preset rules to better adapt to the requirements of the skeleton screen. For example, attributes such as background color and size can be adjusted according to the content type.

[0113] In one embodiment, the content type includes a picture type, a text type, and a block level type. Generating the placeholder elements corresponding to the page to be processed according to the content type includes:

[0114] For the element nodes of the picture type, generate a picture partition element with the same width and height, and set the background color of the picture partition element to obtain a picture placeholder element;

[0115] For the element nodes of the text type, generate a text partition element with a fixed height and width, and set the background color of the text partition element to obtain a text placeholder element;

[0116] For the element nodes of the block level type, generate a block level partition element with the same width and height, and set the background color of the block level partition element to obtain a block level slice placeholder element.

[0117] In the present invention, the content types of the element nodes are divided into the following three categories:

[0118] Picture Type: Corresponding to tags or elements with the attribute of data-type="image".

[0119] Text Type: Corresponding to 、 、 <h1>Such tags or elements with the data-type="text" attribute.

[0120] Block Type: Corresponding to Or other block-level elements, representing a general layout area.

[0121] Generate corresponding placeholder elements according to the content type of each element node. The styles of the placeholder elements (such as width, height, background color) will be adjusted according to the content type to simulate the visual effects of real content.

[0122] For element nodes of the image type: Generate a placeholder element with the same width and height as the original image (the original image refers to the actual image element existing in the page to be processed ( tag)), and set the background color of the placeholder element (such as light gray #ccc) to simulate the visual effect of the image.

[0123] For element nodes of the text type: Generate a placeholder element with a fixed height and width (the width is usually adapted according to the container width and the height is fixed). Set the background color of the placeholder element (such as light gray #ddd) to simulate the visual effect of the text.

[0124] For element nodes of the block-level type: Generate a placeholder element with the same width and height as the original block-level element. Set the background color of the placeholder element (such as light gray #eee) to simulate the visual effect of the block-level element.

[0125] By generating placeholder elements consistent with the actual content type of the page, the skeleton screen can more accurately simulate the layout and visual effects of the page to be processed. This enables users to see a skeleton similar to the real page layout when waiting for the page to load, reducing the visual abruptness.

[0126] The skeleton screen can dynamically generate placeholder elements according to the actual content of the page. For example: If the page contains multiple images, the system will generate multiple image placeholder elements. If the page contains a large amount of text, the system will generate multiple text placeholder elements. This dynamic adaptation ability enables the skeleton screen to support complex pages and dynamic content.

[0127] S3. Obtain the device running information of the target device, and adjust the placeholder elements corresponding to the skeleton screen template according to the device running information to obtain an adjusted skeleton screen template. The device running information includes at least one of the screen size information, resolution information, and network status information of the target device;

[0128] In this embodiment, when generating the skeleton screen, device running information of the target device is obtained through front-end code (such as JavaScript) or back-end logic. The device running information includes but is not limited to: Screen size: The screen width and height of the device (such as 360px × 640px). Resolution: The resolution of the screen (such as 1080p, 720p, etc.). Network status: The current network connection status of the device (such as Wi-Fi, 4G, low bandwidth, etc.). Device type: Whether it is a desktop device, tablet, or mobile device. Operating system: The operating system of the device (such as iOS, Android, Windows, etc.).

[0129] The target device refers to the terminal device that the user is currently using, that is, the device that requests to load the web page and display the skeleton screen. The target device includes smartphones, tablets, personal computers (PCs), all-in-one machines, and other devices (smart TVs, in-vehicle devices, wearable devices).

[0130] After obtaining the device running information, the placeholder elements in the skeleton screen template are dynamically adjusted according to the device running information. The purpose of the adjustment is to make the skeleton screen better adapt to the display requirements of the target device and improve the user experience. The content of the adjustment includes: Size adjustment: Adjust the width and height of the placeholder elements according to the screen size. Style adjustment: Adjust the font size, margin, etc. of the placeholder elements according to the resolution. Performance optimization: When the network status is poor, reduce the visual complexity of the placeholder elements (such as reducing the contrast of the background color).

[0131] In the present invention, the target device is the core object for generating and adapting the dynamic skeleton screen. It is necessary to adjust the style and layout of the skeleton screen according to the running information of the target device (such as screen size, resolution, network status, etc.) to ensure that the skeleton screen can provide the best user experience.

[0132] Continuing with the above financial loan scenario as an example of the present invention, obtain the running information of the target device, such as screen size, resolution, and network status. If the user is using a small-screen device, the size and layout of the placeholder elements will be adjusted to ensure that the skeleton screen can also be displayed well on the small-screen device. For example, shrink the placeholder element of the button, or adjust the width of the text placeholder bar to adapt to the screen width.

[0133] In one embodiment, adjusting the placeholder elements corresponding to the skeleton screen template according to the device running information of the target device to obtain an adjusted skeleton screen template includes:

[0134] Traverse each placeholder element in the skeleton screen template and adjust each element according to the device running information;

[0135] Collect all the adjusted placeholder elements to generate an adjusted skeleton screen template.

[0136] In one embodiment, traversing each placeholder element in the skeleton screen template and adjusting each element according to the device running information includes:

[0137] Adjusting the width and height of the placeholder element according to the screen size information;

[0138] Adjusting the font size and margin of the placeholder element according to the resolution information;

[0139] Identifying whether the network status information is a low-bandwidth network. If so, reducing the contrast of the background color of the placeholder element.

[0140] When generating the skeleton screen, first generate a set of placeholder elements (such as image placeholders, text placeholders, block-level placeholders, etc.) according to the document object tree of the page. These placeholder elements form the initial skeleton screen template. Next, it is necessary to traverse these placeholder elements and adjust them one by one to adapt to the running environment of the target device.

[0141] During the traversal process, each placeholder element is adjusted according to the device running information of the target device. The adjusted content includes: Size adjustment: Adjusting the width and height of the placeholder element according to the screen size. Style adjustment: Adjusting the font size, margin or background color according to the resolution. Performance optimization: When the network status is poor, reducing the visual complexity of the placeholder element (such as reducing the contrast of the background color).

[0142] After adjustment, all the modified placeholder elements are recombined to generate an adjusted skeleton screen template. The adjusted skeleton screen template will be inserted into the page and used as a placeholder display before the real content is loaded.

[0143] In step S3, by adjusting the style of the placeholder element according to the screen size and resolution of the device, the skeleton screen can better adapt to the display effect of the target device. By dynamically adapting to the device running information, the skeleton screen can more smoothly transition to the real content, reducing the flickering and stuttering phenomena during the page loading process.

[0144] Modern web applications need to run on various devices, including desktop devices, tablets and mobile devices. By dynamically adjusting the skeleton screen, it is possible to ensure a consistent user experience on different devices.

[0145] S4. Insert the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, insert the skeleton screen container into a preset position of the page to be processed and display the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switch the skeleton screen to the real content.

[0146] In this embodiment, during the process of generating the skeleton screen, a preset display container is created to accommodate all the skeleton screen placeholder elements. The display container is usually a element with specific styles (such as background color, layout, etc.).

[0147] The skeleton screen container needs to be inserted into a preset position on the page to be processed, usually at the top of the page or the very front of the content area. This ensures that the skeleton screen can be seen by the user during the page loading process. After inserting the skeleton screen container, the placeholder elements of the skeleton screen will be immediately displayed on the page. These placeholder elements simulate the actual layout and visual effects of the page, providing a smooth visual experience for the user while waiting for the real content to load.

[0148] When the real content is loaded, the skeleton screen is smoothly switched to the real content through an animation effect. This process needs to ensure a smooth switching process and avoid flickering or lagging.

[0149] The skeleton screen template is dynamically generated according to the actual structure of the page and can adapt to the layout requirements of different pages. By inserting the skeleton screen into the preset position on the page, seamless integration of the skeleton screen with the page is ensured. The generation and switching process of the skeleton screen is dynamic and can adapt to the needs of complex pages and dynamic content. Regardless of how the real content changes, the skeleton screen can provide a consistent visual experience.

[0150] Continuing with the above financial loan scenario as an example of the present invention, the adjusted skeleton screen template is inserted into the preset position on the page and displayed to the user. After the data is loaded, the skeleton screen will be smoothly switched to the real content, such as displaying specific loan product information, interest rate details, etc. This dynamically generated and adaptable skeleton screen not only improves the user experience but also reduces the problem of blank pages caused by network latency.

[0151] In the financial loan scenario, the application of the dynamic skeleton screen can significantly improve the user experience. For example, when the user is waiting for the loan product list to load, the skeleton screen simulates the page layout, allowing the user to understand the page structure in advance and reducing the anxiety during waiting. At the same time, by dynamically adapting to device information, the skeleton screen can better adapt to different users' device environments and further optimize the visual effects.

[0152] In one embodiment, inserting the adjusted skeleton screen template into a preset display container to obtain the skeleton screen container includes:

[0153] Creating a container element for displaying the skeleton screen, and setting the basic styles of the container element according to the adjusted skeleton screen template to obtain the display container;

[0154] Inserting the adjusted skeleton screen template into the display container to obtain the skeleton screen container.

[0155] The container element is an HTML element (usually ) is used to accommodate all the placeholder elements of the skeleton screen. Its function is to insert the skeleton screen as a whole into the page and control the layout and display effect of the skeleton screen through styles.

[0156] Before inserting the skeleton screen template into the container, some basic styles need to be set for the container. The basic styles include: Width and height: Ensure that the container can adapt to the page layout. Background color: Set a default background color to give the skeleton screen a good visual effect during loading. Layout method: Such as display:flex or display:block, to ensure that the placeholder elements can be correctly arranged. Transition effect: Set a smooth transition effect to reduce flicker when the skeleton screen switches to the real content.

[0157] The adjusted skeleton screen template is an HTML string that contains the HTML code of all placeholder elements. Insert the adjusted skeleton screen template into the container element to make it a part of the container.

[0158] By creating a special container element, all the placeholder elements of the skeleton screen can be organized together to form a unified layout. This enables the skeleton screen to better adapt to the page structure, and no matter how the real content changes, the skeleton screen can maintain a consistent visual effect.

[0159] By setting basic styles for the container, the display effect of the skeleton screen can be dynamically adjusted to adapt to the layout requirements of different pages. For example: On mobile devices, the skeleton screen can automatically adapt to the screen width by setting width:100%. On desktop devices, the placeholder elements can be arranged more flexibly by setting the flex layout.

[0160] In steps S1 to S4, the present invention obtains the HTML content according to the page identifier and parses it into a document object tree, providing basic data support for the subsequent generation of the skeleton screen, ensuring that the skeleton screen can be dynamically generated based on the actual structure of the page, rather than relying on a static template written manually.

[0161] Traverse the document object tree, identify the element nodes and obtain the node information, judge the content type according to the tag name and attribute value, generate the corresponding placeholder elements, and gather them to form the skeleton screen template. By automatically parsing the page elements and generating the placeholder elements, the dynamic generation of the skeleton screen is realized, avoiding the cumbersome process of manually defining the skeleton screen layout, and at the same time improving the adaptability of the skeleton screen to dynamic content.

[0162] Obtain information such as the screen size, resolution, and network status of the target device, and dynamically adjust the placeholder elements in the skeleton screen template. This process dynamically adjusts the skeleton screen template according to the running state of the device, ensuring that the skeleton screen can adapt to the display requirements of different devices, optimizing the user experience, and solving the deficiencies of traditional skeleton screens in multi-device adaptation.

[0163] Insert the adjusted skeleton screen template into the display container, embed it in the preset position of the page, and display the placeholder elements. After the real content is loaded, smoothly switch to the real content, providing instant visual feedback to the user, and ensuring a smoother switch between the skeleton screen and the real content by dynamically generating and adjusting the skeleton screen, reducing flickering or stuttering.

[0164] The present invention jointly solves the problems existing in traditional skeleton screen technologies, such as high development costs, difficulty in adapting static layouts to dynamic content, poor device adaptability, and poor user experience, by automatically parsing the page document object tree, dynamically generating placeholder elements, adjusting the skeleton screen template according to device information, and implementing the display and content switching of the skeleton screen. It can automatically generate a skeleton screen according to the actual structure of the page and the running state of the device, providing a smoother and more personalized visual experience for users, while significantly reducing development and maintenance costs.

[0165] As Figure 2 shown, it is a schematic module diagram of a device for dynamically generating a page skeleton screen provided by an embodiment of the present invention.

[0166] The device 100 for dynamically generating a page skeleton screen according to the present invention can be installed in an electronic device. According to the functions implemented, the device 100 for dynamically generating a page skeleton screen can include a parsing module 110, an identification module 120, an adjustment module 130, and a switching module 140. The modules in the present invention can also be referred to as units, which refer to a series of computer program segments that can be executed by an electronic device processor and can complete fixed functions, and are stored in the memory of the electronic device.

[0167] In this embodiment, the functions of each module / unit are as follows:

[0168] The parsing module 110 is used to receive a request to load a page to be processed on the target device, obtain the HTML content of the page to be processed according to the page identifier of the page to be processed, and parse the HTML content to obtain the document object tree of the page to be processed;

[0169] An identification module 120, configured to identify element nodes in the document object tree, obtain node information of each element node, determine the content type of the content stored in each element node according to the tag name and attribute value in the node information, generate placeholder elements corresponding to the page to be processed according to the content type, and collect all the generated placeholder elements to obtain a skeleton screen template for the page to be processed;

[0170] An adjustment module 130, configured to obtain device operation information of the target device, and adjust placeholder elements corresponding to the skeleton screen template according to the device operation information to obtain an adjusted skeleton screen template, where the device operation information includes at least one of screen size information, resolution information, and network status information of the target device;

[0171] A switching module 140, configured to insert the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, insert the skeleton screen container into a preset position of the page to be processed and display the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switch the skeleton screen to the real content.

[0172] In one embodiment, the obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed includes:

[0173] Extracting the page identifier of the page to be processed from the request;

[0174] According to the page identifier, sending a request to the server to obtain the HTML content of the page to be processed;

[0175] Receiving a response result returned by the server for obtaining the HTML content, and extracting the HTML content of the page to be processed from the response result.

[0176] In one embodiment, the parsing the HTML content to obtain the document object tree of the page to be processed includes:

[0177] Loading the HTML content into a preset HTML parser, and using the HTML parser to parse the HTML string of the HTML content into a structured document object tree.

[0178] In one embodiment, the identifying element nodes in the document object tree includes:

[0179] Using a preset page scanner to start from the root node of the document object tree, recursively traverse each node of the document object tree to obtain the node types of all nodes, where the node types include text nodes, comment nodes, and element nodes;

[0180] Using a preset conditional statement for judging element nodes, judge the integer value corresponding to each node type, and filter out element nodes from all node types according to the judgment result.

[0181] In one embodiment, the judging the content type of the content stored in each element node according to the tag name and attribute value in the node information includes:

[0182] According to the tag name and attribute value of each element node, query the preset association table between element nodes and content types to obtain the initial type of the corresponding element node;

[0183] Obtain the preset attribute value corresponding to the initial type from the association table, and use the preset attribute value to update the attribute value in the corresponding element node to obtain the content type of the content stored in each element node.

[0184] In one embodiment, the content type includes a picture type, a text type, and a block level type. The generating the placeholder element corresponding to the page to be processed according to the content type includes:

[0185] For an element node of the picture type, generate a picture partition element with the same width and height, and set the background color of the picture partition element to obtain a picture placeholder element;

[0186] For an element node of the text type, generate a text partition element with a fixed height and width, and set the background color of the text partition element to obtain a text placeholder element;

[0187] For an element node of the block level type, generate a block level partition element with the same width and height, and set the background color of the block level partition element to obtain a block level placeholder element.

[0188] In one embodiment, the adjusting the placeholder element corresponding to the skeleton screen template according to the device operation information of the target device to obtain an adjusted skeleton screen template includes:

[0189] Traverse each placeholder element in the skeleton screen template, and adjust each element according to the device operation information;

[0190] Collect all the adjusted placeholder elements to generate an adjusted skeleton screen template.

[0191] As Figure 3 shown, it is a schematic structural diagram of an electronic device for implementing the method for dynamically generating a page skeleton screen provided by an embodiment of the present invention.

[0192] In this embodiment, the electronic device 1 includes, but is not limited to, a memory 11, a processor 12, and a network interface 13 that can communicate with each other through a system bus. A program 10 for dynamically generating a page skeleton screen is stored in the memory 11, and the program 10 for dynamically generating a page skeleton screen can be executed by the processor 12. Figure 3 Only the electronic device 1 with components 11-13 and the program 10 for dynamically generating a page skeleton screen is shown. Those skilled in the art can understand that Figure 3 the shown structure does not constitute a limitation on the electronic device 1, and it may include fewer or more components than shown, or combine certain components, or have a different component arrangement.

[0193] Among them, the memory 11 includes a memory and at least one type of readable storage medium. The memory provides a cache for the operation of the electronic device 1; the readable storage medium can be a non-volatile storage medium such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the readable storage medium can be an internal storage unit of the electronic device 1; in other embodiments, the non-volatile storage medium can also be an external storage device of the electronic device 1, such as a plug-in hard disk equipped on the electronic device 1, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. In this embodiment, the readable storage medium of the memory 11 is generally used to store the operating system and various application software installed in the electronic device 1, such as storing the code of the program 10 for dynamically generating a page skeleton screen in an embodiment of the present invention. In addition, the memory 11 can also be used to temporarily store various data that have been output or will be output.

[0194] In some embodiments, the processor 12 can be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. The processor 12 is generally used to control the overall operation of the electronic device 1, such as performing control and processing related to data interaction or communication with other devices. In this embodiment, the processor 12 is used to run the program code stored in the memory 11 or process data, such as running the program 10 for dynamically generating a page skeleton screen.

[0195] The network interface 13 can include a wireless network interface or a wired network interface, and this network interface 13 is used to establish a communication connection between the electronic device 1 and a terminal (not shown in the figure).

[0196] Optionally, the electronic device 1 may further include a user interface, which may include a display, an input unit such as a keyboard, and optionally, the user interface may further include a standard wired interface and a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch liquid crystal display, and an OLED (Organic Light-Emitting Diode) toucher, etc. Among them, the display may also be appropriately referred to as a display screen or a display unit, and is used to display the information processed in the electronic device 1 and to display a visual user interface.

[0197] It should be understood that the above embodiments are only for illustrative purposes and are not limited by this structure in the scope of the patent application.

[0198] The program 10 for dynamically generating a page skeleton screen stored in the memory 11 of the electronic device 1 is a combination of multiple instructions. When running in the processor 12, it can achieve:

[0199] Receiving a request to load a page to be processed on a target device, obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed, parsing the HTML content, and obtaining the document object tree of the page to be processed;

[0200] Identifying element nodes in the document object tree, obtaining node information of each element node, judging the content type of the content stored in each element node according to the tag name and attribute value in the node information, generating placeholder elements corresponding to the page to be processed according to the content type, and collecting all the generated placeholder elements to obtain a skeleton screen template of the page to be processed;

[0201] Obtaining the device operation information of the target device, and adjusting the placeholder elements corresponding to the skeleton screen template according to the device operation information to obtain an adjusted skeleton screen template, where the device operation information includes at least one of the screen size information, resolution information, and network status information of the target device;

[0202] Inserting the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, inserting the skeleton screen container into a preset position of the page to be processed and displaying the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switching the skeleton screen to the real content.

[0203] Specifically, for the specific implementation method of the above program 10 for dynamically generating a page skeleton screen by the processor 12, reference may be made to Figure 1 the description of the relevant steps in the corresponding embodiments, which will not be elaborated here.

[0204] Furthermore, if the modules / units integrated in the electronic device 1 are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. The computer-readable medium can be non-volatile or non-volatile. The computer-readable medium can include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard disk, a magnetic disk, an optical disk, a computer memory, a read-only memory (ROM, Read-Only Memory).

[0205] A program 10 for dynamically generating a page skeleton screen is stored on the computer-readable storage medium. The program 10 for dynamically generating a page skeleton screen can be executed by one or more processors. The specific implementation manner of the computer-readable storage medium of the present invention is basically the same as that of the above-described embodiments of the method for dynamically generating a page skeleton screen, and will not be elaborated herein.

[0206] In several embodiments provided by the present invention, it should be understood that the disclosed devices, apparatuses, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the modules is only a logical function division, and there can be other division methods in actual implementation.

[0207] The modules described as separate components may or may not be physically separated. The components shown as modules may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0208] In addition, in each embodiment of the present invention, the functional modules can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The above-mentioned integrated units can be implemented in the form of hardware or in the form of hardware plus software functional modules.

[0209] For those skilled in the art, it is obvious that the present invention is not limited to the details of the above-described exemplary embodiments, and can be implemented in other specific forms without departing from the spirit or basic characteristics of the present invention.

[0210] Therefore, from any point of view, the embodiments should be regarded as exemplary and non-restrictive. The scope of the present invention is defined by the appended claims rather than the above description. Therefore, all changes falling within the meaning and scope of the equivalent elements of the claims are intended to be included in the present invention. Any associated drawing marks in the claims should not be regarded as limiting the claimed rights.

[0211] In addition, it is obvious that the term "comprising" does not exclude other units or steps, and the singular does not exclude the plural. A plurality of units or devices stated in the system claims can also be implemented by one unit or device through software or hardware. The terms such as "second" are used to denote names and do not denote any particular order.

[0212] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit them. Although the present invention has been described in detail with reference to the preferred embodiments, those of ordinary skill in the art should understand that the technical solutions of the present invention can be modified or equivalently replaced without departing from the spirit and scope of the technical solutions of the present invention. < / h1> < / h1> < / h1> < / h1>

Claims

1. A method for dynamically generating a page skeleton screen, characterized in that, The method includes: Receiving a request to load a page to be processed on a target device, obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed, parsing the HTML content, and obtaining a document object tree of the page to be processed; Identifying element nodes in the document object tree, obtaining node information of each element node, judging the content type of the content stored in each element node according to the tag name and attribute value in the node information, generating placeholder elements corresponding to the page to be processed according to the content type, and aggregating all the generated placeholder elements to obtain a skeleton screen template of the page to be processed; Obtaining device operation information of the target device, and adjusting the placeholder elements corresponding to the skeleton screen template according to the device operation information to obtain an adjusted skeleton screen template, where the device operation information includes at least one of screen size information, resolution information, and network status information of the target device; Inserting the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, inserting the skeleton screen container into a preset position of the page to be processed and displaying the placeholder elements of the skeleton screen, and after obtaining the real content of the page to be processed, switching the skeleton screen to the real content.

2. The method for dynamically generating a page skeleton screen according to claim 1, wherein The obtaining the HTML content of the page to be processed according to the page identifier of the page to be processed includes: Extracting the page identifier of the page to be processed from the request; According to the page identifier, sending a request to the server to obtain the HTML content of the page to be processed; Receiving a response result returned by the server for obtaining the HTML content, and extracting the HTML content of the page to be processed from the response result.

3. The method for dynamically generating a page skeleton screen according to claim 1, wherein, The parsing the HTML content to obtain a document object tree of the page to be processed includes: Loading the HTML content into a preset HTML parser, and using the HTML parser to parse the HTML string of the HTML content into a structured document object tree.

4. The method for dynamically generating a page skeleton screen according to claim 1, wherein The identifying element nodes in the document object tree includes: Using a preset page scanner to start from the root node of the document object tree, recursively traversing each node of the document object tree to obtain the node types of all nodes, where the node types include text nodes, comment nodes, and element nodes; Using a preset conditional statement for judging element nodes to judge the integer value corresponding to each node type, and screening out element nodes from all node types according to the judgment result.

5. The method for dynamically generating a page skeleton screen according to claim 1, wherein The judging the content type of the content stored in each element node according to the tag name and attribute value in the node information includes: According to the tag name and attribute value of each element node, querying an association table between element nodes and content types preset to obtain an initial type of the corresponding element node; Obtaining a preset attribute value corresponding to the initial type from the association table, and using the preset attribute value to update the attribute value in the corresponding element node to obtain the content type of the content stored in each element node.

6. The method for dynamically generating a page skeleton screen according to claim 1, wherein The content types include picture type, text type, and block level type. The generating placeholder elements corresponding to the page to be processed according to the content type includes: For an element node of the image type, generate an image partition element with the same width and height, set the background color of the image partition element, and obtain an image placeholder element; For an element node of the text type, generate a text partition element with a fixed height and width, set the background color of the text partition element, and obtain a text placeholder element; For an element node of the block level type, generate a block level partition element with the same width and height, set the background color of the block level partition element, and obtain a block level placeholder element.

7. The method for dynamically generating a page skeleton screen according to claim 1, wherein The adjusting the placeholder elements corresponding to the skeleton screen template according to the device running information of the target device to obtain an adjusted skeleton screen template includes: Traverse each placeholder element in the skeleton screen template, and adjust each element according to the device running information; Collect all the adjusted placeholder elements to generate an adjusted skeleton screen template.

8. An apparatus for dynamically generating a page skeleton screen, characterized in that The apparatus includes: A parsing module, configured to receive a request to load a page to be processed on a target device, obtain the HTML content of the page to be processed according to the page identifier of the page to be processed, and parse the HTML content to obtain a document object tree of the page to be processed; An identifying module, configured to identify element nodes in the document object tree, obtain node information of each element node, determine the content type of the content stored in each element node according to the tag name and attribute value in the node information, generate placeholder elements corresponding to the page to be processed according to the content type, and collect all the generated placeholder elements to obtain a skeleton screen template of the page to be processed; An adjusting module, configured to obtain the device running information of the target device, and adjust the placeholder elements corresponding to the skeleton screen template according to the device running information to obtain an adjusted skeleton screen template, where the device running information includes at least one of screen size information, resolution information, and network status information of the target device; A switching module, configured to insert the adjusted skeleton screen template into a preset display container to obtain a skeleton screen container, insert the skeleton screen container into a preset position of the page to be processed and display the placeholder elements of the skeleton screen, and switch the skeleton screen to the real content after obtaining the real content of the page to be processed.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a program for dynamically generating a page skeleton screen that can be executed by the at least one processor, and the program for dynamically generating a page skeleton screen is executed by the at least one processor, so that the at least one processor can execute the method for dynamically generating a page skeleton screen according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, A program for dynamically generating a page skeleton screen is stored on the computer-readable storage medium, and the program for dynamically generating a page skeleton screen can be executed by one or more processors to implement the method for dynamically generating a page skeleton screen according to any one of claims 1 to 7.

Images