Image loading method, device, equipment and readable storage medium

Abstract

The present application provides a method, device, equipment and readable storage medium for loading images, which belongs to the field of Internet technology. The method includes: in the process of loading a web page, based on the ancestor elements in the target DOM tree of the web page, monitoring the loading status of all images in the web page, and when it is monitored that the loading of the image resource corresponding to any image element fails, obtaining a network address pointing to the same image resource but with a different domain name, and reloading the image resource based on the network address. The above method utilizes the feature that any descendant element based on the ancestor element can be accessed based on the ancestor element, avoiding the need to monitor the loading status of all images in the web page separately during the web page loading process, realizing automatic loading and retrying of all images that failed to load in the web page, and improving the efficiency of loading and retrying after the image loading fails.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a method, apparatus, device, and readable storage medium for loading an image. Background Art

[0002] With the rapid development of Internet technology, online content is becoming increasingly rich. Web pages now include a variety of images in addition to text. Loading image resources is particularly important during web page loading. Sometimes, failure to resolve the domain name of a webpage's static resources can cause all image resources on the page to fail to load, affecting the page's functionality.

[0003] In related technologies, developers usually determine the element nodes containing images in the web page script, and monitor the node status of each element node containing images during the web page loading process. When it is detected that a certain image fails to load, the image is reloaded.

[0004] However, the above method can only monitor and retry the loading of a single image, and cannot automatically retry the loading of all images in the web page. The efficiency of retrying the loading after the image loading fails is low. Summary of the Invention

[0005] The embodiments of the present application provide a method, apparatus, device, and readable storage medium for loading images, which automatically retry loading all images that fail to load on a web page, thereby improving the efficiency of retrying loading after image loading fails. The technical solution is as follows:

[0006] In one aspect, a method for loading an image is provided, the method comprising:

[0007] During web page loading, monitoring a first element of a target DOM tree of the web page, where the target DOM tree represents elements of the web page and relationships between the elements, the first element being an ancestor element of multiple elements, wherein the multiple elements include an image element;

[0008] In response to monitoring that a loading failure of an image resource corresponding to any image element under the first element occurs, obtaining a first network address of the image resource from the image element in the target DOM tree;

[0009] Obtaining a second network address of the image resource, where the second network address has a different domain name from the first network address and points to the same image resource;

[0010] Based on the second network address, the image resource is obtained, and the obtained image resource is loaded.

[0011] In another aspect, a device for loading an image is provided, the device comprising:

[0012] a monitoring module configured to monitor, during a webpage loading process, a first element of a target DOM tree of the webpage, the target DOM tree being used to represent elements of the webpage and relationships between the elements, the first element being an ancestor element of multiple elements, wherein the multiple elements include an image element;

[0013] a first acquisition module configured to acquire a first network address of the image resource from the image element in the target DOM tree in response to monitoring that loading of the image resource corresponding to any image element under the first element fails;

[0014] a second acquisition module, configured to acquire a second network address of the image resource, where the second network address has a different domain name from the first network address and points to the same image resource;

[0015] The first loading module includes: an acquisition unit, used to acquire the image resource based on the second network address, and a loading unit, used to load the acquired image resource.

[0016] In an optional implementation, the apparatus further includes:

[0017] A DOM tree generation module, configured to generate a target DOM tree of the web page based on the web page data of the web page;

[0018] A traversal module, configured to traverse the target DOM tree and determine all image elements in the target DOM tree;

[0019] A first determining module, configured to determine ancestor elements of all the image elements based on all the image elements in the target DOM tree;

[0020] a second determining module, configured to determine the ancestor element as the first element;

[0021] A configuration module is used to configure a listener on the first element, where the listener is used to monitor a failure in loading a resource corresponding to any descendant element under the first element.

[0022] In an optional implementation, the monitoring module is configured to:

[0023] During the webpage loading process, a query message is sent to each descendant element of the first element, wherein the query message is used to inquire whether there is an element whose resource loading fails among the descendant elements;

[0024] Receive an event notification message returned by any descendant element, where the event notification message indicates that loading of a resource corresponding to the descendant element has failed;

[0025] If it is determined according to the event notification message that the descendant element is a picture element, it is determined that the loading of the picture resource corresponding to the picture element under the first element fails.

[0026] In an optional implementation, the apparatus further includes:

[0027] A third acquisition module is configured to, after acquiring the first network address of the image resource, delay for a target duration and acquire a third network address of the image resource from the image element in the target DOM tree;

[0028] The first execution module is configured to execute a step of acquiring a second network address of the image resource if the third network address is the same as the first network address.

[0029] In an optional implementation, the apparatus further includes:

[0030] a query module, configured to, if the third network address is the same as the first network address and the first network address does not include the first identifier and the second identifier, query an image retry database for the existence of the first network address, the image retry database being used to store image network addresses obtained during historical retry processes, the first identifier being used to indicate that the image resource failed to be loaded again, and the second identifier being used to indicate that the first network address points to the first image;

[0031] The second execution module is configured to execute the step of obtaining the second network address of the image resource if the first network address does not exist in the image retry database and the first network address conforms to the target format and meets the retry condition.

[0032] In an optional implementation, the apparatus further includes:

[0033] The second loading module is used to load the first image to the web page location corresponding to the image element if the third network address is the same as the first network address and the first network address includes a first identifier, and the first identifier is used to indicate that the image resource fails to be loaded again.

[0034] In an optional implementation, the apparatus further includes:

[0035] a third loading module, configured to not reload the image resource corresponding to the image element if the third network address is the same as the first network address and the first network address does not include the first identifier but includes a second identifier, wherein the second identifier is used to indicate that the first network address points to the first image.

[0036] In an optional implementation, the apparatus further includes:

[0037] An information generation module, configured to generate target information, wherein the target information is used to indicate a retry status of a picture resource corresponding to the picture element;

[0038] The information sending module is used to send the target information to the source server of the web page.

[0039] On the other hand, a computer device is provided, which includes a processor and a memory, wherein the memory is used to store at least one segment of program code, and the at least one segment of program code is loaded and executed by the processor to implement the operations performed in the image loading method in the embodiment of the present application.

[0040] On the other hand, a computer-readable storage medium is provided, in which at least one program code is stored. The at least one program code is loaded and executed by the processor to implement the operations performed in the image loading method in the embodiment of the present application.

[0041] In another aspect, a computer program product or computer program is provided. The computer program product or computer program includes computer program code stored in a computer-readable storage medium. A processor of a computer device reads the computer program code from the computer-readable storage medium and executes the computer program code, causing the computer device to perform the image loading method provided in the various optional implementations described above.

[0042] The beneficial effects of the technical solution provided by the embodiments of the present application are:

[0043] In an embodiment of the present application, a method for loading an image is provided. During the web page loading process, the loading status of all images in the web page is monitored based on the ancestor elements in the target DOM tree of the web page. When it is monitored that the loading of the image resource corresponding to any image element fails, a network address pointing to the same image resource but with a different domain name is obtained, and the image resource is reloaded based on the network address. The above method utilizes the characteristic that any descendant element based on the ancestor element can be accessed based on the ancestor element, avoiding the need to monitor the loading status of all images in the web page separately during the web page loading process, realizing automatic retry of loading of all images that failed to load in the web page, and improving the efficiency of retrying loading after image loading fails. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0045] Figure 1 Schematic diagram of an implementation environment of the image loading method provided in an embodiment of the present application;

[0046] Figure 2 This is a flow chart of a method for loading an image according to an embodiment of the present application;

[0047] Figure 3 This is a flow chart of another image loading method provided according to an embodiment of the present application;

[0048] Figure 4 This is an architectural diagram of a target DOM tree provided according to an embodiment of the present application;

[0049] Figure 5 This is a schematic diagram of a failure to load an image resource in a web page according to an embodiment of the present application;

[0050] Figure 6 This is a schematic diagram of a successful retry of loading an image resource in a web page according to an embodiment of the present application;

[0051] Figure 7 This is a schematic diagram of a web page after a retry fails to load an image resource according to an embodiment of the present application;

[0052] Figure 8 This is a block diagram of a picture loading device provided according to an embodiment of the present application;

[0053] Figure 9This is a block diagram of a terminal according to an embodiment of the present application;

[0054] Figure 10 It is a structural diagram of a server provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0055] In order to make the objectives, technical solutions and advantages of this application clearer, the implementation methods of this application will be further described in detail below with reference to the accompanying drawings.

[0056] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.

[0057] The following is a brief introduction to the technologies and glossaries that may be used in the embodiments of this application.

[0058] The Document Object Model (DOM) is a programming interface for Hypertext Markup Language (HTML) and Extensible Markup Language (XML) documents. DOM provides a structured representation of documents, allowing access and modification of a document's content and structure in a platform- and language-independent manner. In other words, it is a common way to represent and process an HTML or XML document. In DOM, a document is modeled as a tree, where each component of the XML syntax (such as an element or text content) is represented as a node. DOM allows traversing the document tree, moving from parent nodes to child nodes and sibling nodes, and making use of attributes specific to various node types (elements have attributes).

[0059] The DOM tree refers to the process of parsing an HTML page through the DOM, generating an HTML tree structure and corresponding access methods. Parsing the DOM tree allows for direct and easy manipulation of each tag on the HTML page. When an event occurs, it propagates between element nodes in a specific order. This propagation process is known as the DOM event flow. The DOM event flow consists of three phases: the capture phase, where events propagate from the document node to the target node; the target phase, where the actual target node processes the event; and the bubbling phase, where events propagate from the target node to the document node.

[0060] JavaScript (JS) is a high-level, multi-paradigm, interpreted programming language. It is a prototype-based, function-first language that supports object-oriented programming, imperative programming, and functional programming. It provides syntax for manipulating text, arrays, dates, and regular expressions. It does not support I / O (such as networking, storage, and graphics), but can be supported by its host environment. It is an object-based and event-driven client-side scripting language with relative security. It is also a scripting language widely used in client-side web development, often used to add dynamic functionality to HTML pages, such as responding to various user operations.

[0061] Uniform Resource Locator (URL) is the standard address of resources on the Internet.

[0062] The image address attribute (Source, src) is used in HTML language to specify the image location where the image is inserted into the web page.

[0063] The following describes the implementation environment of the method provided in the embodiment of the present application. Figure 1 1 is a schematic diagram of an implementation environment of the method provided in an embodiment of the present application. The implementation environment includes: a terminal 101 and a server 102.

[0064] The terminal 101 and the server 102 can be connected directly or indirectly via wired or wireless communication, which is not limited in this application. Optionally, the terminal 101 is a smart phone, a tablet computer, a laptop computer, a desktop computer, etc., but is not limited to this. The target application client can be installed and run on the terminal 101. Optionally, the user enters the web address of the target web page in the target application client, or clicks on the target web page in the target application client to request access to the target web page, which is a web page providing educational resources, a web page providing shopping services, etc. Schematically, the terminal 101 is a terminal used by the user, and the user account of the user is logged in to the target application client running in the terminal 101.

[0065] Server 102 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, as well as big data and artificial intelligence platforms.

[0066] For example, a target application client is installed and running on the terminal 101. The user enters a web address for providing educational resources in the target application client, or clicks on the web page he wants to visit in the target application client. The terminal 101 initiates an access request to the server 102 of the web page based on the web page address entered by the user or the user's click operation. The server 102 of the web page sends the web page data of the web page to the terminal 101 based on the access request. The terminal 101 renders and displays the web page on the target application client based on the received web page data of the web page, so that the user can browse the web page based on the target application client.

[0067] Optionally, during the image loading process, the server 102 undertakes the main computing work and the terminal 101 undertakes the secondary computing work; or, the server 102 undertakes the secondary computing work and the terminal 101 undertakes the main computing work; or, the server 102 or the terminal 101 can each undertake the computing work independently.

[0068] Optionally, server 102 includes an access server, an image loading server, and a database. The access server is used to provide access services to terminals. The image loading server is used to provide image loading services. There may be one or more image loading servers. When there are multiple image loading servers, at least two image loading servers are used to provide different services, and / or at least two image loading servers are used to provide the same service, such as providing the same service in a load balancing manner, which is not limited in this embodiment of the present application. The database is used to store web page data, etc.

[0069] Optionally, terminal 101 generally refers to one of multiple terminals. This embodiment uses terminal 101 as an example. Those skilled in the art will appreciate that the number of terminals 101 can be greater. For example, if there are dozens, hundreds, or even more terminals 101, the implementation environment of the image loading method may also include other terminals. This embodiment of the application does not limit the number of terminals or device types.

[0070] Optionally, the above-mentioned wireless network or wired network uses standard communication technology and / or protocol. The network is typically the Internet, but can also be any network, including but not limited to a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile, wired or wireless network, a private network or any combination of a virtual private network). In some embodiments, technologies and / or formats including hypertext markup language, extensible markup language, etc. are used to represent data exchanged over the network. In addition, conventional encryption technologies such as Secure Socket Layer (SSL), Transport Layer Security (TLS), Virtual Private Network (VPN), Internet Protocol Security (IPsec) can be used to encrypt all or some links. In other embodiments, customized and / or dedicated data communication technologies can also be used to replace or supplement the above-mentioned data communication technologies.

[0071] Figure 2 This is a flow chart of a method for loading an image according to an embodiment of the present application. Figure 2 As shown, in the embodiment of the present application, the application is described by taking the application in a terminal as an example. The method includes the following steps:

[0072] 201. During web page loading, monitor the first element of a target DOM tree of the web page. The target DOM tree is used to represent various elements of the web page and the relationships between the elements. The first element is an ancestor element of multiple elements, and the multiple elements include an image element.

[0073] In an embodiment of the present application, the target application client of the terminal provides a web page loading function. Optionally, the target application client is a web page browsing client, or any client with a web page browsing function, such as a video playback client, an online classroom client, etc. During the web page loading process, the target application client of the terminal generates a target DOM tree of the web page and monitors all image elements in the web page based on the ancestor elements in the target DOM tree.

[0074] 202. In response to monitoring that a loading failure of an image resource corresponding to any image element under the first element occurs, obtain a first network address of the image resource from the image element in the target DOM tree.

[0075] In an embodiment of the present application, the first network address is used to represent the acquisition address of the image resource. Based on the image element, the terminal obtains the image address attribute in the image element, that is, the src address, and extracts the first network address of the image resource based on the src address.

[0076] 203. Obtain a second network address of the image resource. The second network address has a different domain name from the first network address and points to the same image resource.

[0077] In an embodiment of the present application, the second network address has a different domain name from the first network address, but points to the same image resource. For example, the first network address is "https: / / 10.idqqimg.com / eth / " and the second network address is "https: / / fudao?10.idqqimg.com / eth / ." The two network addresses have different domain names, but point to the same image resource. The terminal sends an address acquisition request to the server corresponding to the domain name of the second network address, and receives the second network address returned by the server.

[0078] 204. Based on the second network address, obtain the image resource, and load the obtained image resource.

[0079] In the embodiment of the present application, the terminal obtains the image resource based on the second network address obtained from the above step 203, and loads the obtained image resource to achieve a loading retry of the image resource.

[0080] In an embodiment of the present application, a method for loading an image is provided. During the web page loading process, the loading status of all images in the web page is monitored based on the ancestor elements in the target DOM tree of the web page. When it is monitored that the loading of the image resource corresponding to any image element fails, a network address pointing to the same image resource but with a different domain name is obtained, and the image resource is reloaded based on the network address. The above method utilizes the characteristic that any descendant element based on the ancestor element can be accessed based on the ancestor element, avoiding the need to monitor the loading status of all images in the web page separately during the web page loading process, realizing automatic retry of loading of all images that failed to load in the web page, and improving the efficiency of retrying loading after image loading fails.

[0081] Figure 3 This is a flow chart of another image loading method provided in an embodiment of the present application. Figure 3 As shown, in the embodiment of the present application, the application is described by taking the application in a terminal as an example. The method includes the following steps:

[0082] 301. During the webpage loading process, the terminal generates a target DOM tree of the webpage based on the webpage data of the webpage.

[0083] In an embodiment of the present application, the target application client of the terminal provides a web page loading function. The user enters the address of the web page to be accessed in the target application client, or clicks on the web page to be accessed in the target application client. The target application client sends an access request for the web page to the server of the web page based on the address entered by the user, or in response to the user's click operation on the web page. The server of the web page returns the web page data of the web page based on the access request, that is, the HTML document corresponding to the web page. After receiving the web page data of the web page, the terminal parses the web page data of the web page and generates a target DOM tree for the web page. For example, based on the received HTML document, the terminal represents the tags in the HTML document as the root elements of the target DOM tree, and the elements as the branches of the tree. Each node in the tree corresponds to an element, and the relationship between each node corresponds one-to-one to the relationship between each element in the HTML document.

[0084] 302. The terminal traverses the target DOM tree to determine all image elements in the target DOM tree.

[0085] In an embodiment of the present application, after generating the target DOM tree of the web page, the target application client of the terminal traverses the target DOM tree. When it is found that an element contains an image tag, that is, an img tag, the element is determined to be a picture element to determine all the picture elements in the target DOM tree.

[0086] The img tag includes a picture address attribute, also known as the "src address," which points to the network address of the picture, also known as the URL. For example, when a terminal's target application client loads a web page, the process for loading an image on the web page is as follows: the terminal's target application client initiates a request to the server for the image resource based on the image's network address, receives the image resource returned by the server, and then loads the corresponding image to the web page location corresponding to the image element of the img tag based on the image resource.

[0087] 303. The terminal determines the ancestor elements of all the image elements based on all the image elements in the target DOM tree.

[0088] In the embodiment of the present application, the ancestor element is an element in the target DOM tree, and the terminal can access any image element based on the element through the element.

[0089] In one optional implementation, after determining all image elements in the target DOM tree, the terminal selects an outer element as an ancestor element. For example, the ancestor element is document.body, which is the main object in the HTML document of the web page. Based on this ancestor element, the terminal can access not only any image elements under this element, but also any elements under this element except image elements, thus expanding the range of elements that can be accessed and avoiding omissions.

[0090] In another optional implementation, after determining all image elements in the target DOM tree, the terminal traverses the target DOM tree from bottom to top until it reaches the topmost image element. The element immediately above the topmost image element is then identified as the ancestor element. This method accurately selects the ancestor element, ensuring that all image elements can be accessed based on the ancestor element, which is more accurate.

[0091] 304. The terminal determines the ancestor element as the first element.

[0092] In the embodiment of the present application, the terminal determines the ancestor element as the first element based on the ancestor element determined in the above step 303, and all the image elements in the target DOM tree can be accessed through the first element.

[0093] 305. The terminal configures a listener on the first element, and the listener is used to monitor that a resource corresponding to any descendant element under the first element fails to load.

[0094] In an embodiment of the present application, a listener is configured on the first element to monitor the failure of loading resources corresponding to any descendant element of the first element. For example, an error handler, namely an errorHandler object, is connected to the first element.

[0095] It should be noted that the above steps 301 to 305 are executed in sequence from front to back. In another optional implementation method, the terminal executes steps 302 to 305 synchronously while executing step 301, that is, while generating the target DOM tree, the first element is immediately determined and a listener is configured on the first element. The embodiment of the present application does not impose any specific restrictions on the execution order of the above steps.

[0096] In addition, the above steps 301 to 305 can refer to Figure 4 To understand, Figure 4This is an architectural diagram of a target DOM tree provided according to an embodiment of the present application. The target DOM tree is generated based on the web page data of the web page, the first element is determined, and a listener is configured on the first element. Through the listener, the terminal can monitor the failure of resource loading corresponding to any image element under the first element.

[0097] 306. The terminal sends a query message to each descendant element of the first element through the listener. The query message is used to inquire whether there is an element with failed resource loading among the descendant elements.

[0098] In this embodiment of the present application, descendant elements refer to all elements below the first element in the target DOM tree. The terminal, through the listener, sends a query message based on the first element in the target DOM tree to the next layer of elements below the first element. Upon receiving the query message, the next layer of elements continues to send the query message to the next layer. The query message carries the listener information, which instructs each descendant element to provide feedback to the terminal through the listener when there is a problem requiring feedback.

[0099] 307. The terminal receives an event notification message returned by any descendant element through the listener. The event notification message is used to indicate that loading of a resource corresponding to the descendant element fails.

[0100] In an embodiment of the present application, when a descendant element fails to load resources after receiving the query message sent in the above step 306, an event notification message is generated. The event notification message carries the tag in the descendant element and is fed back to the terminal through the listener, and the terminal receives the event notification message.

[0101] It should be noted that the above steps 306 to 307 are the stage of capturing events in the DOM tree. In the embodiment of the present application, the event refers to the failure to load the resource corresponding to a certain element in the target DOM tree. By monitoring the event capture stage in the DOM tree, it is ensured that the loading status of the image resources of all image elements in the entire web page can be monitored, and the event of the failure to load the image resource corresponding to the image element can be captured before the image element itself executes the monitoring function.

[0102] 308. If it is determined according to the event notification message that the descendant element is a picture element, the terminal determines that the loading of the picture resource corresponding to the picture element under the first element has failed.

[0103] In an embodiment of the present application, the terminal determines whether the tag is an img tag based on the tag carried in the event notification message. If so, it indicates that the descendant element is a picture element.

[0104] 309. The terminal obtains the first network address of the image resource from the image element in the target DOM tree.

[0105] In an embodiment of the present application, the first network address is used to represent the acquisition address of the image resource. Based on the image element, the terminal obtains the image address attribute in the image element, that is, the src address, and extracts the first network address of the image resource based on the src address. For example, the first network address is "https: / / 10.idqqimg.com / eth / ".

[0106] 310. After obtaining the first network address of the image resource, the terminal delays for a target duration and obtains a third network address of the image resource from the image element in the target DOM tree.

[0107] In the embodiment of the present application, delaying the target duration means executing the corresponding steps after the specified target duration has passed. After the target duration has passed, the terminal again obtains the picture address attribute in the picture element based on the picture element, extracts the network address of the picture resource from the picture address attribute, and determines the network address extracted this time as the third network address. For example, delaying the target duration is performed through the setTimeout method. The setTimeout method is used to call a function or calculate an expression after a specified number of milliseconds. The terminal obtains the third network address of the picture resource after 0.01s based on the setTimeout delay processing. The embodiment of the present application does not impose specific restrictions on this and can be adjusted according to actual conditions.

[0108] The image element itself has a monitoring function. For example, by adding an onerror event to the image element, when the image resource corresponding to the image element fails to load, the onerror event is triggered. The terminal then obtains the network address of the backup image resource and reloads the image resource. By delaying the target duration, the normal execution of the image element's own monitoring step can be ensured, avoiding conflicts between the execution of subsequent steps and the execution of the image element's own monitoring step.

[0109] In an optional implementation, if the picture element itself does not have a monitoring function, the terminal does not execute step 310 and the following step 311, and directly executes the subsequent step 312. The embodiment of the present application does not specifically limit whether the picture element itself has a monitoring function.

[0110] 311. If the third network address is the same as the first network address, the terminal executes step 312; if they are not the same, the current processing flow ends.

[0111] In this embodiment of the present application, when the third network address is the same as the first network address, it indicates that after the image resource corresponding to the image element failed to load, no other method has been used to process the image element, and the terminal can then execute the subsequent step 312. Among them, the other method is based on the monitoring function of the image element itself, obtaining the network address of the backup image resource and reloading the image resource. When the third network address is different from the first network address, it indicates that after the image resource corresponding to the image element failed to load, there is another method to replace the network address of the image resource, at which point the terminal ends the current process.

[0112] 312. If the first network address does not include the first identifier, the terminal continues to execute step 313. If the first network address includes the first identifier, the terminal executes step 317. The first identifier is used to indicate that the image resource fails to be loaded again.

[0113] In an embodiment of the present application, for a reloaded image resource, a first identifier is present in the network address of the image resource. For example, the first identifier is "proxy," meaning the network address of the reloaded image resource is "https: / / 10.idqqimg.com / eth / #__proxy__." If the first identifier is not included in the first network address, the terminal proceeds to step 313. However, if the first identifier is included in the first network address, it indicates that the image resource has been reloaded and has failed to load again. In this case, the terminal proceeds to step 317.

[0114] 313. If the first network address does not include the second identifier, the terminal continues to execute steps 314 to 316. If the first network address includes the second identifier, step 318 is executed. The second identifier is used to indicate that the first network address points to the first image.

[0115] In this embodiment of the present application, for a first image, the network address corresponding to the first image contains a second identifier. For example, the second identifier is "default," and the network address of the first image is "https: / / 10.idqqimg.com / eth / #__default__." If the first network address does not include the second identifier, the terminal continues to execute steps 314 to 316. However, if the first network address includes the second identifier, it indicates that the image resource is the image resource of the first image, where the first image is the default image that failed to load. In this case, the terminal executes subsequent step 317.

[0116] 314. The terminal queries whether the first network address exists in an image retry database. The image retry database is used to store image network addresses obtained during historical retry processes.

[0117] In this embodiment of the present application, step 314 is performed based on the premise of steps 312 to 313. At this time, the first network address does not include the first identifier or the second identifier, indicating that the image resource corresponding to the first network address is neither a reloaded image resource nor the image resource of the first image. At this time, the terminal queries the image retry database to determine whether the first network address exists.

[0118] In an optional implementation, the terminal is associated with a picture retry database. After the terminal reloads the picture resource of a certain picture element, the terminal stores the network address of the picture resource obtained during the reloading process in the picture retry database.

[0119] 315. If the first network address does not exist in the image retry database, and the first network address conforms to the target format and meets the retry conditions, then obtain the second network address of the image resource, where the second network address has a different domain name from the first network address and points to the same image resource.

[0120] In the embodiment of the present application, the implementation process of the above step 315 includes the following steps 1 to 3:

[0121] Step 1: When the first network address does not exist in the image retry database, the terminal determines whether the first network address conforms to the target format based on the first network address. When the terminal determines that the first network address conforms to the target format based on the first network address, the terminal continues to perform the following step 2. When the terminal determines that the first network address does not conform to the target format based on the first network address, the current processing flow ends. For example, based on the first network address, it is determined whether the format of the first network address belongs to the format of the network address of the embedded image in the web page, wherein the embedded image means that the image resource can be obtained directly from the server of the web page without initiating a request to other servers. When the terminal determines that the format of the first network address belongs to the format of the network address of the embedded image in the web page, the terminal continues to perform the following step 2. Otherwise, the current processing flow ends.

[0122] Step 2: When the terminal determines that the first network address meets the target format, it determines whether the first network address meets the retry condition. When the terminal determines that the first network address meets the retry condition based on the first network address, it continues to perform the following step three. When the terminal determines that the first network address does not meet the target format based on the first network address, it ends the current processing flow. There are multiple ways to set the retry condition. For example, whether the size of the image resource corresponding to the first network address meets the threshold is used as the retry condition. Whether the retry condition is met can be executed through the shouldIgnore judgment method. When the size of the image resource corresponding to the first network address is greater than the threshold, the shouldIgnore result is returned as true. At this time, the terminal does not perform any processing on the first network address. When the size of the image resource corresponding to the first network address is less than or equal to the threshold, the shouldIgnore result is returned as false, that is, it is considered that the first network address does not need to be ignored for retry, and the terminal executes the subsequent step three. The embodiment of the present application does not impose specific restrictions on the setting method of the retry condition, and can be adjusted according to actual conditions.

[0123] Step three: The terminal obtains the second network address of the image resource. The second network address is different from the domain name of the first network address and points to the same image resource. For example, the first network address is "https: / / 10.idqqimg.com / eth / " and the second network address is "https: / / fudao?10.idqqimg123.com / eth / ". The domain names of the two network addresses are different, but they point to the same image resource. The terminal sends an address acquisition request to the server corresponding to the domain name of the second network address, and receives the second network address returned by the server. In an optional implementation, the server corresponding to the domain name of the first network address is the first server, and the server corresponding to the domain name of the second network address is the second server, wherein the second server is provided with a reverse proxy function, and the terminal sends a request to obtain the first network address to the second server. Based on the acquisition request, the second server forwards the acquisition request to the first server and obtains the first network address returned by the first server. The second server then returns the acquired first network address to the terminal. At this time, the network address received by the terminal is the second network address after the domain name switch. For example, the domain name of the second network address is the fudao domain name, and the second network address after the domain name switching is "https: / / fudao?first network address / ".

[0124] It should be noted that the above steps 310 to 315 are one implementation method of performing multiple determinations on the first network address provided in the embodiment of the present application. In another optional implementation, the terminal does not perform the above steps 310 to 315, directly obtains the second network address after performing step 309, and continues to perform subsequent step 316. This embodiment of the present application does not specifically limit this.

[0125] 316. The terminal obtains the image resource based on the second network address, and loads the obtained image resource.

[0126] In an embodiment of the present application, after completing the above step 315, the terminal determines that the image resource that failed to load has not undergone any retry process, and the first network address of the image resource conforms to both the target format and the retry condition. The terminal then obtains the image resource based on the second network address obtained from the above step 315, and loads the obtained image resource to achieve a loading retry of the image resource.

[0127] It should be noted that after completing steps 309 to 316, the terminal stores the first network address in the above steps in the image retry database. By storing the first network address obtained during any retry process, when the first network address is obtained again, it can be known that the image resource corresponding to the first network address has been retried once, thereby avoiding multiple cycles of failed loading of the same image resource.

[0128] 317. The terminal loads the first image to the webpage location corresponding to the image element.

[0129] In an embodiment of the present application, after the above-mentioned step 312, when the terminal determines that the first network address includes the first identifier, it indicates that the image resource is an image resource that has been reloaded, and the reloaded image resource has failed to load again. At this time, the terminal loads the first image to the web page position corresponding to the image element.

[0130] It should be noted that the above-mentioned step 317 is an implementation method provided in an embodiment of the present application for processing the reloaded image resource after the reloading fails. In an optional implementation method, the terminal does not perform any processing on the image resource. In another optional implementation method, the terminal reloads the image resource again. The embodiment of the present application does not impose specific restrictions on this.

[0131] 318. The terminal does not reload the image resource corresponding to the image element.

[0132] In an embodiment of the present application, after the above step 313, the terminal determines that the first network address includes a second identifier, indicating that the image resource corresponding to the first network address is the image resource of the first image. At this time, the terminal no longer loads the image resource corresponding to the image element again.

[0133] It should be noted that the above step 318 is an implementation method of the terminal provided in an embodiment of the present application when the image resource is the image resource of the first image. In another optional implementation method, the terminal loads the second image to the web page position corresponding to the image element, wherein the second image is another default image that fails to load, which is different from the first image. The embodiment of the present application does not impose specific restrictions on this.

[0134] 319. After executing any one of steps 316 to 317 above, the terminal generates target information, which is used to indicate the retry status of the image resource corresponding to the image element, and sends the target information to the source server of the web page.

[0135] In the embodiment of the present application, the retry situation refers to the situation where the image resource corresponding to the image element is reloaded.

[0136] In the above step 319, there are the following three situations:

[0137] In an optional implementation, after executing the above step 316, the terminal generates first target information, which is used to indicate that the picture resource corresponding to the picture element is the picture resource where resource loading failed for the first time, and the terminal has reloaded the picture resource corresponding to the picture element once. For example, the target information is "The picture resource failed to load for the first time and has been reloaded."

[0138] In an optional implementation, after executing the above step 317, the terminal generates second target information, which is used to indicate that the image resource corresponding to the image element is an image resource that has been reloaded, and the terminal has loaded the first image to the web page location corresponding to the image element. For example, the target information is "The image resource failed to load again and has been reloaded as the default image that failed to load."

[0139] In an optional implementation, after executing the above step 318, the terminal generates third target information, which is used to indicate that the picture resource corresponding to the picture element is the picture resource of the first picture, and the terminal does not perform any processing. For example, the target information is "This picture resource is a default picture that failed to load and no processing is performed."

[0140] In addition, reference Figure 5 , Figure 5This is a schematic diagram of a web page image resource loading failure provided by an embodiment of the present application. After the image loading fails in the web page, a sign indicating that the image loading failed is displayed at the position corresponding to each image in the web page. Figure 6 , Figure 6 This is a schematic diagram of a web page image resource after a successful retry of loading according to an embodiment of the present application. The image displayed on the web page is the image that has been reloaded after the domain name is switched. Figure 7 , Figure 7 This is a schematic diagram of a web page after a picture resource loading retry fails according to an embodiment of the present application. The picture displayed on the web page is the default picture that failed to load.

[0141] In an embodiment of the present application, a method for loading an image is provided. During the web page loading process, the loading status of all images in the web page is monitored based on the ancestor elements in the target DOM tree of the web page. When it is monitored that the loading of the image resource corresponding to any image element fails, a network address pointing to the same image resource but with a different domain name is obtained, and the image resource is reloaded based on the network address. The above method utilizes the characteristic that any descendant element based on the ancestor element can be accessed based on the ancestor element, avoiding the need to monitor the loading status of all images in the web page separately during the web page loading process, realizing automatic retry of loading of all images that failed to load in the web page, and improving the efficiency of retrying loading after image loading fails.

[0142] Figure 8 This is a block diagram of a picture loading device provided according to an embodiment of the present application. The device is used to execute the steps of the above method. Figure 8 The device includes: a monitoring module 801, a first obtaining module 802, a second obtaining module 803, and a first loading module 804.

[0143] A monitoring module 801 is configured to monitor, during a web page loading process, a first element of a target DOM tree of the web page, where the target DOM tree represents elements of the web page and relationships between the elements, and the first element is an ancestor element of multiple elements, including an image element.

[0144] A first acquisition module 802 is configured to acquire a first network address of the image resource from the image element in the target DOM tree in response to monitoring that the image resource corresponding to any image element under the first element fails to load;

[0145] A second acquisition module 803 is configured to acquire a second network address of the image resource, where the second network address has a different domain name from the first network address and points to the same image resource;

[0146] The first loading module 804 includes: an acquiring unit, configured to acquire the image resource based on the second network address; and a loading unit, configured to load the acquired image resource.

[0147] In an optional implementation, the device further includes:

[0148] A DOM tree generation module is used to generate a target DOM tree of a web page based on the web page data of the web page;

[0149] A traversal module is used to traverse the target DOM tree and determine all image elements in the target DOM tree;

[0150] A first determining module is configured to determine ancestor elements of all the image elements based on all the image elements in the target DOM tree;

[0151] A second determining module, configured to determine the ancestor element as the first element;

[0152] The configuration module is used to configure a listener on the first element, and the listener is used to monitor the failure of loading resources corresponding to any descendant element under the first element.

[0153] In an optional implementation, the monitoring module 801 is configured to:

[0154] During the webpage loading process, a query message is sent to each descendant element of the first element, where the query message is used to inquire whether there is an element whose resource loading fails among the descendant elements;

[0155] Receive an event notification message returned by any descendant element, which is used to indicate that the resource loading corresponding to the descendant element failed;

[0156] If it is determined according to the event notification message that the descendant element is a picture element, it is determined that the loading of the picture resource corresponding to the picture element under the first element has failed.

[0157] In an optional implementation, the device further includes:

[0158] A third acquisition module is configured to, after acquiring the first network address of the image resource, delay for a target duration and acquire a third network address of the image resource from the image element in the target DOM tree;

[0159] The first execution module is configured to execute a step of obtaining a second network address of the image resource if the third network address is the same as the first network address.

[0160] In an optional implementation, the device further includes:

[0161] a query module configured to, if the third network address is the same as the first network address and the first network address does not include the first identifier and the second identifier, query an image retry database for the existence of the first network address, the image retry database being used to store image network addresses obtained during historical retry processes, the first identifier being used to indicate that the image resource failed to be loaded again, and the second identifier being used to indicate that the first network address points to the first image;

[0162] The second execution module is configured to execute the step of obtaining the second network address of the image resource if the first network address does not exist in the image retry database and the first network address conforms to the target format and conforms to the retry condition.

[0163] In an optional implementation, the device further includes:

[0164] The second loading module is used to load the first image to the web page location corresponding to the image element if the third network address is the same as the first network address and the first network address includes a first identifier, and the first identifier is used to indicate that the image resource fails to load again.

[0165] In an optional implementation, the device further includes:

[0166] A third loading module is used to not reload the image resource corresponding to the image element if the third network address is the same as the first network address and the first network address does not include the first identifier but includes the second identifier, and the second identifier is used to indicate that the first network address points to the first image.

[0167] In an optional implementation, the device further includes:

[0168] An information generation module, configured to generate target information, wherein the target information is used to indicate a retry status of the image resource corresponding to the image element;

[0169] The information sending module is used to send the target information to the source server of the web page.

[0170] In an embodiment of the present application, a method for loading an image is provided. During the web page loading process, the loading status of all images in the web page is monitored based on the ancestor elements in the target DOM tree of the web page. When it is monitored that the loading of the image resource corresponding to any image element fails, a network address pointing to the same image resource but with a different domain name is obtained, and the image resource is reloaded based on the network address. The above method utilizes the characteristic that any descendant element based on the ancestor element can be accessed based on the ancestor element, avoiding the need to monitor the loading status of all images in the web page separately during the web page loading process, realizing automatic retry of loading of all images that failed to load in the web page, and improving the efficiency of retrying loading after image loading fails.

[0171] It should be noted that the device provided in the above embodiment only uses the division of the above functional modules as an example to illustrate when loading images. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the image loading device provided in the above embodiment and the image loading method embodiment are of the same concept. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0172] Figure 9 This is a block diagram of the structure of a terminal 900 provided according to an embodiment of the present application. Terminal 900 can be a portable mobile terminal, such as a smartphone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 player (Moving Picture Experts Group Audio Layer IV), a laptop computer, or a desktop computer. Terminal 900 may also be referred to as user equipment, a portable terminal, a laptop terminal, a desktop terminal, or other similar names.

[0173] Typically, the terminal 900 includes a processor 901 and a memory 902 .

[0174] The processor 901 can include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 901 can be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 901 can also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 901 can be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 901 can also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0175] The memory 902 can include one or more computer-readable storage media, which can be non-transitory. The memory 902 may also include high-speed random access memory, and non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 902 is used to store at least one program code, which is used to be executed by the processor 901 to implement the image loading method provided in the method embodiment of the present application.

[0176] In some embodiments, terminal 900 may optionally include a peripheral device interface 903 and at least one peripheral device. Processor 901, memory 902, and peripheral device interface 903 may be connected via a bus or signal lines. Each peripheral device may be connected to peripheral device interface 903 via a bus, signal lines, or circuit boards. Specifically, the peripheral device may include at least one of a radio frequency circuit 904, a display screen 905, a camera assembly 906, an audio circuit 907, a positioning assembly 908, and a power supply 909.

[0177] The peripheral device interface 903 can be used to connect at least one I / O (Input / Output)-related peripheral device to the processor 901 and the memory 902. In some embodiments, the processor 901, the memory 902, and the peripheral device interface 903 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 901, the memory 902, and the peripheral device interface 903 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0178] The RF circuit 904 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 904 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 904 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals into electrical signals. Optionally, the RF circuit 904 includes an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and the like. The RF circuit 904 can communicate with other terminals via at least one wireless communication protocol. Such wireless communication protocols include, but are not limited to, the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 904 may also include circuitry related to Near Field Communication (NFC), which is not limited in this application.

[0179] The display screen 905 is used to display a user interface (UI). This UI can include graphics, text, icons, videos, or any combination thereof. When the display screen 905 is a touch screen display, it can also capture touch signals on or above the surface of the display screen 905. These touch signals can be input as control signals to the processor 901 for processing. In this case, the display screen 905 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there can be a single display screen 905, located on the front panel of the terminal 900. In other embodiments, there can be at least two display screens 905, located on different surfaces of the terminal 900 or in a foldable design. In other embodiments, the display screen 905 can be a flexible display screen, located on a curved or foldable surface of the terminal 900. Furthermore, the display screen 905 can be configured as a non-rectangular irregular shape, i.e., a special-shaped screen. The display screen 905 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0180] The camera assembly 906 is used to capture images or videos. Optionally, the camera assembly 906 includes a front camera and a rear camera. Typically, the front camera is arranged on the front panel of the terminal, and the rear camera is arranged on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions. In some embodiments, the camera assembly 906 can also include a flash. The flash can be a monochrome temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cold light flash, which can be used for light compensation at different color temperatures.

[0181] The audio circuit 907 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, and convert the sound waves into electrical signals to be input into the processor 901 for processing, or to be input into the radio frequency circuit 904 to achieve voice communication. For the purpose of stereo sound collection or noise reduction, there can be multiple microphones, which are respectively arranged at different parts of the terminal 900. The microphone can also be an array microphone or an omnidirectional collection microphone. The speaker is used to convert the electrical signals from the processor 901 or the radio frequency circuit 904 into sound waves. The speaker can be a traditional thin film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signals into sound waves audible to humans, but also convert the electrical signals into sound waves inaudible to humans for purposes such as ranging. In some embodiments, the audio circuit 907 can also include a headphone jack.

[0182] Positioning component 908 is used to locate the current geographic location of terminal 900 to implement navigation or LBS (Location Based Service). Positioning component 908 can be a positioning component based on the US GPS (Global Positioning System), China's Beidou system, or Russia's Galileo system.

[0183] The power supply 909 is used to power the various components in the terminal 900. The power supply 909 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When the power supply 909 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, while a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0184] In some embodiments, the terminal 900 further includes one or more sensors 910 , including but not limited to: an acceleration sensor 911 , a gyroscope sensor 912 , a pressure sensor 913 , a fingerprint sensor 914 , an optical sensor 915 , and a proximity sensor 916 .

[0185] The accelerometer 911 can detect the magnitude of acceleration along the three coordinate axes of the coordinate system established by the terminal 900. For example, the accelerometer 911 can be used to detect the components of gravity acceleration along the three coordinate axes. The processor 901 can control the display screen 905 to display the user interface in a landscape or portrait view based on the gravity acceleration signal collected by the accelerometer 911. The accelerometer 911 can also be used to collect game or user motion data.

[0186] The gyroscope sensor 912 can detect the orientation and rotation angle of the terminal 900. It can work with the accelerometer 911 to collect the user's 3D movements on the terminal 900. Based on the data collected by the gyroscope sensor 912, the processor 901 can implement the following functions: motion sensing (for example, changing the UI based on the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

[0187] The pressure sensor 913 can be set on the side frame of the terminal 900 and / or the lower layer of the display screen 905. When the pressure sensor 913 is set on the side frame of the terminal 900, it can detect the user's grip signal of the terminal 900, and the processor 901 performs left and right hand recognition or shortcut operations based on the grip signal collected by the pressure sensor 913. When the pressure sensor 913 is set on the lower layer of the display screen 905, the processor 901 controls the operable controls on the UI interface based on the user's pressure operation on the display screen 905. The operable controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0188] The fingerprint sensor 914 is used to collect the user's fingerprint. The processor 901 identifies the user's identity based on the fingerprint collected by the fingerprint sensor 914, or the fingerprint sensor 914 identifies the user's identity based on the collected fingerprint. When the user's identity is identified as a trusted identity, the processor 901 authorizes the user to perform relevant sensitive operations, such as unlocking the screen, viewing encrypted information, downloading software, making payments, and changing settings. The fingerprint sensor 914 can be set on the front, back, or side of the terminal 900. When a physical button or manufacturer logo is provided on the terminal 900, the fingerprint sensor 914 can be integrated with the physical button or manufacturer logo.

[0189] Optical sensor 915 is used to detect ambient light intensity. In one embodiment, processor 901 can control the display brightness of display screen 905 based on the ambient light intensity detected by optical sensor 915. Specifically, when the ambient light intensity is high, the display brightness of display screen 905 is increased; when the ambient light intensity is low, the display brightness of display screen 905 is decreased. In another embodiment, processor 901 can also dynamically adjust the shooting parameters of camera assembly 906 based on the ambient light intensity detected by optical sensor 915.

[0190] Proximity sensor 916, also known as a distance sensor, is typically located on the front panel of terminal 900. Proximity sensor 916 is used to detect the distance between the user and the front of terminal 900. In one embodiment, when proximity sensor 916 detects that the distance between the user and the front of terminal 900 is gradually decreasing, processor 901 controls display screen 905 to switch from the screen-on state to the screen-off state. When proximity sensor 916 detects that the distance between the user and the front of terminal 900 is gradually increasing, processor 901 controls display screen 905 to switch from the screen-off state to the screen-on state.

[0191] Those skilled in the art will understand that Figure 9 The structure shown in the figure does not constitute a limitation on the terminal 900, and the terminal 900 can include more or fewer components than shown in the figure, or combine certain components, or adopt a different component arrangement.

[0192] Figure 10 This is a structural diagram of a server provided in accordance with an embodiment of the present application. The server 1000 may have relatively large differences due to different configurations or performances, and may include one or more processors (Central Processing Units, CPU) 1001 and one or more memories 1002, wherein the memory 1002 stores at least one program code, which is loaded and executed by the processor 1001 to implement the image loading method provided in each of the above method embodiments. Of course, the server may also have components such as a wired or wireless network interface, a keyboard, and an input / output interface for input and output. The server may also include other components for implementing device functions, which will not be described in detail here.

[0193] An embodiment of the present application also provides a computer-readable storage medium, which is applied to a computer device, and the computer-readable storage medium stores at least one section of program code, which is loaded and executed by a processor to implement the operations performed by the computer device in the image loading method of the above embodiment.

[0194] The present application also provides a computer program product, including computer program code stored in a computer-readable storage medium. A processor of a computer device reads the computer program code from the computer-readable storage medium and executes the computer program code, causing the computer device to perform the image loading method provided in the various optional implementations described above.

[0195] Those skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware, or by a program to instruct the relevant hardware, and the program may be stored in a computer-readable storage medium, which may be a read-only memory, a disk, or an optical disk, etc.

[0196] The above description is merely an optional embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application shall be included in the scope of protection of the present application.

Claims

1. A method for loading an image, characterized in that: The method comprises: During web page loading, monitoring a first element of a target Document Object Model (DOM) tree of the web page, where the target DOM tree represents elements of the web page and relationships between the elements, the first element being an ancestor element of multiple elements, wherein the multiple elements include an image element; In response to monitoring that a loading failure of an image resource corresponding to any image element under the first element occurs, obtaining a first network address of the image resource from the image element in the target DOM tree; After obtaining the first network address, delaying for a target duration, and obtaining a third network address of the image resource from the image element in the target DOM tree; If the third network address is the same as the first network address, and the first network address does not include the first identifier and the second identifier, querying whether the first network address exists in an image retry database, where the image retry database is used to store image network addresses obtained during historical retries, the first identifier indicating that the image resource failed to load again, and the second identifier indicating that the first network address points to the first image; If the first network address does not exist in the image retry database, obtaining a second network address of the image resource, where the second network address has a different domain name from the first network address and points to the same image resource; Based on the second network address, the image resource is obtained, and the obtained image resource is loaded.

2. The method according to claim 1, characterized in that During the webpage loading process, before monitoring the first element of the target DOM tree of the webpage, the method further includes: Generate a target DOM tree for the web page based on the web page data of the web page; Traverse the target DOM tree to determine all image elements in the target DOM tree; Determine the ancestor elements of all the image elements based on all the image elements in the target DOM tree; Determine the ancestor element as the first element; A listener is configured on the first element, where the listener is used to listen for a resource loading failure corresponding to any descendant element of the first element.

3. The method according to claim 1, characterized in that During the webpage loading process, monitoring the first element of the target DOM tree of the webpage includes: During the webpage loading process, a query message is sent to each descendant element of the first element, wherein the query message is used to inquire whether there is an element whose resource loading fails among the descendant elements; Receive an event notification message returned by any descendant element, where the event notification message indicates that loading of a resource corresponding to the descendant element has failed; If it is determined according to the event notification message that the descendant element is a picture element, it is determined that the loading of the picture resource corresponding to the picture element under the first element fails.

4. The method according to claim 1, wherein If the first network address does not exist in the image retry database, obtaining the second network address of the image resource includes: If the first network address does not exist in the image retry database and the first network address conforms to the target format and meets the retry condition, then the second network address of the image resource is obtained.

5. The method according to claim 1, wherein The method further comprises: If the third network address is the same as the first network address, and the first network address includes a first identifier, the first image is loaded to the web page location corresponding to the image element, and the first identifier is used to indicate that the image resource fails to be loaded again.

6. The method according to claim 1, characterized in that The method further comprises: If the third network address is the same as the first network address, and the first network address does not include the first identifier but includes the second identifier, the image resource corresponding to the image element will not be loaded again, and the second identifier is used to indicate that the first network address points to the first image.

7. The method according to any one of claims 4 to 6, characterized in that The method further comprises: Generate target information, where the target information is used to indicate a retry status of the image resource corresponding to the image element; The target information is sent to the source server of the web page.

8. A picture loading device, characterized in that: The device comprises: a monitoring module configured to monitor, during a webpage loading process, a first element of a target DOM tree of the webpage, the target DOM tree being used to represent elements of the webpage and relationships between the elements, the first element being an ancestor element of multiple elements, wherein the multiple elements include an image element; a first acquisition module configured to acquire a first network address of the image resource from the image element in the target DOM tree in response to monitoring that loading of the image resource corresponding to any image element under the first element fails; A third acquisition module is configured to, after acquiring the first network address, delay for a target duration and acquire a third network address of the image resource from the image element in the target DOM tree; a query module configured to, if the third network address is the same as the first network address and the first network address does not include the first identifier and the second identifier, query whether the first network address exists in an image retry database, the image retry database being configured to store image network addresses obtained during historical retry processes, the first identifier indicating that the image resource failed to load again, and the second identifier indicating that the first network address points to the first image; a second acquisition module, configured to acquire a second network address of the image resource if the first network address does not exist in the image retry database, wherein the second network address has a different domain name from the first network address and points to the same image resource; The first loading module includes: an acquisition unit, used to acquire the image resource based on the second network address, and a loading unit, used to load the acquired image resource.

9. A computer device, characterized in that: The computer device includes a processor and a memory, the memory is used to store at least one section of program code, and the at least one section of program code is loaded by the processor and executes the image loading method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores at least one section of program code, and the at least one section of program code is loaded and executed by a processor to implement the image loading method according to any one of claims 1 to 7.

11. A computer program product, characterized in that The computer program product includes a computer program code, which is stored in a computer-readable storage medium. The processor of a computer device reads the computer program code from the computer-readable storage medium, and the processor executes the computer program code, so that the computer device executes the image loading method according to any one of claims 1 to 7.

Images