Picture loading method and device, equipment and storage medium

Abstract

The invention discloses a picture loading method and device, equipment and a storage medium, and belongs to the field of application software. The method comprises the following steps: loading text content and picture content of image-text mixed content; the image-text mixed content comprises mixed typesetting content of images and texts; under the condition that the text content is successfully loaded, a blank drawable object is inserted into the position where the picture content is located in the text content, and the text content is displayed; the blank drawable object is a drawable object which does not contain visible content; and under the condition that the picture content is successfully loaded, replacing the blank drawable object with the picture content, and updating the text content to obtain the text content and the picture content which are typeset in a mixed manner. The method can solve the problem that the display position of the picture content in the image-text mixed content is abnormal.

Description

Technical Field

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

[0002] In application interfaces, it's often necessary to display mixed content, combining images and text, to convey information through the complementary use of visuals and text. For example, images can be used to illustrate a point in an article, images and text can be used to display product details on a product page, and images can be used to identify users and text can be used to display user messages in a chat window.

[0003] Regarding the loading and display of mixed text and image content, the loading speed is faster because the data volume of text content is smaller than that of image content. The client usually pre-marks the display position of the image in the text, and displays the text content first after the text content is loaded. After the image content is loaded, it displays the image content at the corresponding position according to the pre-marked image display position.

[0004] However, when mixed text and image content contains multiple images, inserting an image into the text will cause the text length to change, and the pre-marked display positions of other images will no longer be accurate, and the display positions of other images will become abnormal. Summary of the Invention

[0005] This application provides a method, device, equipment, and storage medium for loading images, which can solve the problem of abnormal display position of image content in mixed image and text content. The technical solution is as follows:

[0006] According to one aspect of the present application, a method for loading an image is provided, the method comprising:

[0007] Loading text content and image content of mixed text and image content; the mixed text and image content includes content with mixed layout of images and text;

[0008] If the text content is loaded successfully, inserting a blank drawable object into the text content at the location of the image content to display the text content; the blank drawable object is a drawable object that does not contain visible content;

[0009] When the image content is loaded successfully, the blank drawable object is replaced with the image content, and the text content is updated to obtain the mixed typesetting text content and the image content.

[0010] According to another aspect of the present application, a picture loading device is provided, the device comprising:

[0011] A loading module, configured to load text content and image content of mixed text and image content; the mixed text and image content includes content in a mixed layout of images and text;

[0012] A display module, configured to insert a blank drawable object into the text content at the location of the image content when the text content is loaded successfully, so as to display the text content; the blank drawable object is a drawable object that does not contain visible content;

[0013] The display module is configured to replace the blank drawable object with the image content if the image content is loaded successfully, and update the text content to obtain the mixed typesetting text content and the image content.

[0014] According to another aspect of the present application, a computer device is provided, comprising a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set, or an instruction set, and the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by the processor to implement the image loading method described above.

[0015] According to another aspect of the present application, a computer-readable storage medium is provided, in which at least one instruction, at least one program, a code set or an instruction set is stored. The at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the image loading method described above.

[0016] According to another aspect of the present application, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the image loading method provided in various optional implementations of the above aspects.

[0017] The beneficial effects of the technical solution provided by this application include at least:

[0018] When loading and displaying mixed text and image content, a blank drawable object can be used to replace the image content that has not been loaded. After the image content is loaded, the blank drawable object is replaced with the image content. Since the blank drawable object is mixed with the text content, after the blank drawable object is inserted into the position where the image content is located, when the layout of the text content changes (for example, after a picture is loaded, it will be displayed in the text content, causing the length of the text content to change), the position of the blank drawable object will move accordingly. Therefore, the blank drawable object can mark the display position of the image content in real time. After the image content is loaded, replacing the blank drawable object with the image content can ensure that the image content is accurately displayed at the preset position, ensuring the normal display of the mixed text and image content. In addition, this method does not require the coupled calculation of the latest display position of all image content when the text content layout changes, which reduces the logical operation load of the image content display and improves the efficiency of loading and displaying mixed text and image content. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] 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.

[0020] Figure 1 is a schematic diagram of the structure of a computer system provided by an exemplary embodiment of the present application;

[0021] Figure 2 is a flowchart of a method for loading an image provided by an exemplary embodiment of the present application;

[0022] Figure 3 is a flowchart of a method for loading an image provided by an exemplary embodiment of the present application;

[0023] Figure 4 is a flowchart of a method for loading an image provided by an exemplary embodiment of the present application;

[0024] Figure 5 is a schematic diagram of a method for loading an image provided by an exemplary embodiment of the present application;

[0025] Figure 6 It is a structural diagram of a picture loading device provided by an exemplary embodiment of the present application;

[0026] Figure 7 It is a structural diagram of a computer device provided by an exemplary embodiment of the present application.

[0027] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application. DETAILED DESCRIPTION

[0028] 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.

[0029] Figure 1 A schematic diagram of a computer system provided by an exemplary embodiment of the present application is shown. The computer system may include a terminal device 101 and a server 103.

[0030] For example, the image loading method shown in the embodiment of the present application can be applied to a terminal device 101 running an application 102 that supports the display of mixed text and image content. The terminal device may include a mobile phone, a tablet computer, a notebook computer, a laptop computer, a desktop computer, an all-in-one computer, an Internet of Things device, an intelligent robot workstation, a television, a set-top box, smart glasses, a smart watch, a digital camera, an MP4 player, an MP5 player, a learning machine, a point-reading machine, an electronic paper book, an electronic dictionary, an in-vehicle device, a virtual reality (VR) player, or an augmented reality (AR) player, etc.

[0031] Exemplarily, the image loading method provided in this application can be executed by a client in a terminal device. The client is a client of an application that supports the display function of mixed text and image content. Any application with an interface display capability can display mixed text and image content. Therefore, this application is not limited to the type of application. For example, the application may include at least one of the following: an audio application, a video application, a social application, a shopping application, a live broadcast application, an information application, a browser, a local service application, a travel application, and a financial application.

[0032] The terminal device 101 includes a first memory and a first processor. The first memory stores an image loading program; the image loading program is called and executed by the first processor to implement the image loading method provided in this application. The first memory may include but is not limited to the following: random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), and electrically erasable read-only memory (EEPROM).

[0033] The first processor may be composed of one or more integrated circuit chips. Optionally, the first processor may be a general-purpose processor, such as a central processing unit (CPU) or a network processor (NP). Optionally, the first processor may implement the image loading method provided in this application by running a program or code.

[0034] In an optional embodiment, the terminal device 101 and the server 103 may be connected to each other via a wired or wireless network.

[0035] Server 103 is used to provide background services for the target use case system of terminal device 101. Optionally, server 103 performs primary computing tasks, and terminal device 101 performs secondary computing tasks; alternatively, server 103 performs secondary computing tasks, and terminal device 101 performs primary computing tasks; alternatively, server 103 and terminal device 101 utilize a distributed computing architecture for collaborative computing.

[0036] The server 103 may be a single server, a server cluster consisting of multiple servers, or a cloud computing service center.

[0037] Optionally, server 103 includes a second memory and a second processor. The second memory stores an image loading program; the image loading program is invoked by the second processor to implement the image loading method provided herein. Optionally, the second memory may include, but is not limited to, RAM, ROM, PROM, EPROM, and EEPROM. Optionally, the second processor may be a general-purpose processor, such as a CPU or NP.

[0038] Figure 2 This is a flow chart of a method for loading an image provided by an exemplary embodiment of the present application. Figure 1 The terminal device shown in FIG.

[0039] Step 210: Loading text content and image content of mixed text and image content; the mixed text and image content includes content in a mixed layout of images and text.

[0040] Optionally, the method is executed by a client on the terminal, where the client is an application client that supports the display of mixed text and image content. For example, the application may include at least one of the following: an audio player, a video application, a social application, a shopping application, a live broadcast application, an information application, a browser, a game application, a local service application, a travel application, and a financial application.

[0041] Mixed text and image content refers to a presentation format that seamlessly combines text and images (or other drawable objects, such as vector graphics, shapes, animations, colors, etc.) within the same layout area and dynamically lays them out. Mixed text and image content coordinates the relative position, size, and alignment of text and images to visually form a unified logical whole (such as the coexistence of emoticons and text, the interweaving of icons and data, etc.), and supports dynamic changes based on content (such as automatic adaptation of text and image positions due to the addition or removal of text). This mixed layout is common in scenarios that require enhanced information expressiveness or interactive flexibility (such as chat dialog boxes, rich text editors, etc.).

[0042] For example, mixed text and graphics content could be:

[0043] 1) Emojis and text in chat messages: When users insert emojis or animated stickers while typing a message, the text and emojis will wrap and align based on the context, for example, "Nice weather today (sun emoji)";

[0044] 2) Rich text posts on social media: embed icons (such as reminder symbols) next to the title, follow the product name with a thumbnail, or alternate step-by-step text with example images in tutorials;

[0045] 3) Mixed text and image columns in news applications: Floating images, tables, and explanatory text are embedded in the main text paragraphs and displayed side by side;

[0046] 4) Dynamic labels in forms: Required fields are marked with icons next to input boxes, and error icons are dynamically displayed after error text.

[0047] Mixed text and image content consists of image content and text content. The client loads the image content and text content separately when loading the mixed text and image content. The image content may include at least one image. Any of the at least one image may be located before the text content, after the text content, or in the middle of the text content. When an image is located between text content, the image content may be divided into at least two parts of text. For example, when the image content includes two images located in the middle of the text content, the mixed text and image content may be arranged in the following order: the first part of text, the first image, the second part of text, the second image, and the third part of text.

[0048] Optionally, when the picture content includes at least two pictures, the picture sizes of the at least two pictures are not limited, that is, the picture sizes of the at least two pictures can be the same or different.

[0049] In an optional application scenario, the client may be a client of a live broadcast application. In response to the operation of entering the first live broadcast room, the live broadcast interface of the first live broadcast room is displayed. The live broadcast interface includes a chat message display area. The chat message display area displays the first message sent by the first account. The first message may be a mixed text and image content, that is, the first message includes message text (text content) and emoticons (picture content); the client loads the message text and emoticons of the first message.

[0050] In another optional application scenario, the client may be a client of a social application, which displays a social dynamics interface in response to an operation of opening a social dynamics feed. The first social dynamics displayed in the social dynamics interface includes social dynamics text (text content) and pictures (picture content); the client loads the social dynamics text and pictures of the first social dynamics feed.

[0051] In another optional embodiment, the client can be a memo client, which displays the display interface of the first memo in response to the operation of opening the first memo. The first memo includes memo text (text content) and pictures (picture content), and the client loads the memo text and pictures of the first memo.

[0052] Step 220: If the text content is loaded successfully, a blank drawable object is inserted into the position of the image content in the text content to display the text content; a blank drawable object is a drawable object that does not contain visible content.

[0053] For example, the client can load text content and image content simultaneously. Since the amount of text content is usually smaller than that of image content, the text content loads faster and will be loaded first. After the text content is loaded, the client can display the text content first while continuing to load the image content.

[0054] When displaying text content, since the image content has not been loaded, it is necessary to pre-mark the display position of the image content. The method in the related art can mark the display position of the image content, for example, mark the coordinate position of the image content in the interface, and display the image content according to the coordinate position after loading is completed. However, when the mixed text and image content includes multiple pictures, inserting a picture in the previous text will affect the position of the subsequent text and pictures, and the pre-recorded position of the subsequent pictures is incorrect, resulting in the wrong position displayed after the subsequent pictures are loaded. In order to solve this problem, the method provided in the embodiment of the present application uses a blank drawable object to replace the picture content after the text content is loaded, and displays the mixed layout of text content and blank drawable objects; after the picture content is loaded, the blank drawable object is replaced by a picture, so that the picture content can be accurately displayed in the expected position.

[0055] A blank drawable is a blank drawable. For example, a blank drawable does not contain any drawable content; or the size of a blank drawable is smaller than a threshold, for example, the size of a blank drawable is 0.

[0056] Blank drawables are invisible on the interface. For example, because they don't contain any drawable content, they won't be rendered on the interface. Or, because their size is 0, they won't be rendered on the interface. However, blank drawables can be mixed with text content for layout. When the position of the text content changes, the blank drawable will also change position according to the layout logic. This way, blank drawables can be used to mark the position of image content, ensuring that the blank drawable content is always positioned accurately within the image content.

[0057] A drawable object (Drawable) is not a specific image file, but a graphic resource that can be defined through code or XML. Drawable can describe a variety of visual elements, including bitmaps, solid colors, shapes (such as rounded rectangles), gradients, animation frame combinations, or dynamic states (such as different styles of button presses / lifts). Compared to using image files directly, Drawable focuses more on flexibility and adaptability, supporting automatic scaling according to screen resolution, or dynamic modification of color / size through code. For example: define the rounded background of a button through ShapeDrawable, use StateListDrawable to implement color switching when the button is clicked, or use VectorDrawable to implement lossless scaling of vector icons. Drawable resources are usually stored in the res / drawable directory, defined through XML or called by the program, and finally parsed by the system into pixel graphics on the screen.

[0058] For example, if a drawable object is embedded in a text control (such as TextView) and set to be associated with the text, the position of the drawable object will be bound to the text content as a whole. When the text content changes, the size or content layout of the entire text control will be recalculated, and the position of the drawable object will be automatically adjusted dynamically based on the new text length and layout direction (such as from left to right). For example: a TextView with an icon on the left, if text is added after the icon, causing the text line to become longer or wrap, the icon will always be located at the beginning of the text line; if text is inserted in front of the icon (such as switching from right to left language), the icon will automatically move to the new beginning of the text, forming a visual "position follow". This display logic is implemented by the layout rules of the text control (such as text direction, alignment) and the semantics of the drawable object attached to the text.

[0059] Optionally, drawable objects can also use UIImage (picture), UIView subclass (view), CoreGraphics (drawing), CALayer (layer), etc.

[0060] Step 230: When the image content is loaded successfully, the blank drawable object is replaced with the image content, and the text content is updated to obtain mixed typeset text content and image content.

[0061] For example, while displaying the text content, the image content is asynchronously loaded. When the image content includes multiple images, the multiple images can be loaded sequentially or synchronously, for example, using multiple threads to load multiple images simultaneously (each thread loads one image). Each time an image is loaded, the loaded image can be updated in real time in the text content.

[0062] In an optional embodiment, the image content includes at least two images; the at least two images include a first image and a second image; and the blank drawable objects include a first blank drawable object corresponding to the first image and a second blank drawable object corresponding to the second image. If the first image is successfully loaded, the client replaces the first blank drawable object with the first image and updates the text content to obtain mixed-layout text content and the first image. If the second image is successfully loaded, the client replaces the second blank drawable object with the second image and updates the text content and the first image to obtain mixed-layout text content, the first image, and the second image.

[0063] In an optional embodiment, the blank drawable object is invisible; when the image content is not loaded successfully, the text content is displayed in a coherent arrangement.

[0064] For example, the mixed text and image content includes the following arranged in sequence: the first part of text, the first picture, the second part of text, the second picture, and the third part of text; when the picture content has not been loaded completely, only the text content arranged in sequence is displayed: the first part of text, the second part of text, and the third part of text; when the first picture is loaded completely, the text content and the first picture are displayed in sequence: the first part of text, the first picture, the second part of text, and the third part of text; when the second picture is also loaded completely, the text content and the picture content are displayed in sequence: the first part of text, the first picture, the second part of text, the second picture, and the third part of text.

[0065] For another example, the image content is located in the middle of the text content, and the text content is divided into a first text and a second text. When displaying the text content, the client displays the first text at the first position and the second text at the second position; the first position is connected to the second position. When displaying the image content, the client displays the first text at the first position, the image content at the third position, and the second text at the fourth position; the first position is connected to the third position, and the fourth position is connected to the third position; wherein the second position and the third position have the same starting position, and the end position of the third position is determined based on the image size of the image content.

[0066] For example, if the image content fails to load, the blank drawable content will not be replaced with the image content.

[0067] In an optional embodiment, the image content includes a first image and a second image. If the first image loads successfully but the second image fails to load, the mixed-layout text content and the first image are displayed, and the second image is not displayed. That is, if the second image fails to load, the blank drawable object corresponding to the second image continues to be displayed, and the blank drawable object is not replaced.

[0068] For example, the mixed text and image content includes the following arranged in sequence: the first part of text, the first picture, the second part of text, the second picture, and the third part of text; when the first picture and the second picture are both loaded successfully, the following arranged in sequence are displayed: the first part of text, the first picture, the second part of text, the second picture, and the third part of text; when the first picture is loaded successfully and the second picture fails to load, the text content and the first picture arranged in sequence are displayed: the first part of text, the first picture, the second part of text, and the third part of text.

[0069] In another optional embodiment, the image content includes a first image and a second image. If the first image loads successfully but the second image fails to load, the mixed-format text content, the first image, and a failure indicator image are displayed, and the second image is not displayed. The failure indicator image is used to indicate that the second image failed to load. The failure indicator image can be a locally pre-stored image used to mark the failure of the image at that location. That is, if the second image fails to load, the locally stored failure indicator image is used to replace the blank drawable object corresponding to the second image.

[0070] For example, the mixed text and image content includes the following arranged in sequence: the first part of text, the first picture, the second part of text, the second picture, and the third part of text; when the first picture and the second picture are both loaded successfully, the following arranged in sequence are displayed: the first part of text, the first picture, the second part of text, the second picture, and the third part of text; when the first picture is loaded successfully and the second picture fails to load, the text content, the first picture, and the failure indication picture are displayed in the following sequence: the first part of text, the first picture, the second part of text, the failure indication picture, and the third part of text.

[0071] It should be noted that when the image content includes multiple images, some images may be loaded successfully and some images may not be loaded successfully. In this case, the successfully loaded images can be displayed normally, while the unsuccessfully loaded images will not be displayed.

[0072] Of course, when the picture content includes multiple pictures, if some pictures fail to load successfully, all the picture content may not be displayed, or some pictures associated with the pictures that failed to load may not be displayed.

[0073] For example, the image content includes a first group of images and a second group of images, where the first group of images includes the first and second images, which are related. If the first image loads successfully but the second image fails to load, all images related to the second image are not displayed. That is, the first and second images are not displayed, while the second group of images is displayed normally. This method ensures that the related images are fully displayed. If some images fail to load, the other related images are also not displayed, providing a good visual experience for users and avoiding visual defects caused by some images in the combined image being displayed while others are not.

[0074] Exemplarily, the image content includes a first image and a second image with an associated relationship, and the associated relationship is used to indicate that the first image and the second image must be displayed at the same time or not displayed at the same time; then, when the first image is loaded successfully, wait for the second image to be loaded successfully; when both the first image and the second image are loaded successfully, use the first image to replace the first blank drawable object corresponding to the first image, and use the second image to replace the second blank drawable object corresponding to the second image; when the first image is loaded successfully and the second image fails to load, the first blank drawable object is not replaced by the first image, nor is the second blank drawable object replaced by the second image.

[0075] In summary, the method provided by this embodiment can use a blank drawable object to replace the image content that has not been loaded when loading and displaying mixed text and image content, and then replace the blank drawable object with the image content after the image content is loaded. Since the blank drawable object is mixed with the text content, after the blank drawable object is inserted into the position where the image content is located, when the layout of the text content changes (for example, after a picture is loaded, it will be displayed in the text content, causing the length of the text content to change), the position of the blank drawable object will move accordingly. Therefore, the blank drawable object can mark the display position of the image content in real time. After the image content is loaded, replacing the blank drawable object with the image content can ensure that the image content is accurately displayed at the preset position, ensuring the normal display of the mixed text and image content. In addition, this method does not require the coupled calculation of the latest display position of all image content when the text content layout changes, which reduces the logical operation load of the image content display and improves the efficiency of loading and displaying mixed text and image content.

[0076] Exemplarily, an embodiment of using a blank drawable object to mark the display position of image content is provided.

[0077] Figure 3 This is a flow chart of a method for loading an image provided by an exemplary embodiment of the present application. Figure 1 The terminal device shown. Figure 2 In the illustrated embodiment, step 220 includes step 221 .

[0078] Step 210: Loading text content and image content of mixed text and image content; the mixed text and image content includes content in a mixed layout of images and text.

[0079] Step 221: When the text content is loaded successfully, obtain the display position of the image content in the text content; create a blank drawable object; insert the blank drawable object into the display position of the image content, and display the blank drawable object and the text content.

[0080] For example, after the text content is loaded, a blank drawable object is created for each image in the image content, with each blank drawable object corresponding to a single image. The position of the image in the text content is determined based on the layout logic of the mixed text and image content, and the blank drawable object is inserted into the corresponding position.

[0081] Exemplarily, the client generates an image identifier corresponding to the image content; the image identifier is used to uniquely identify an image within the mixed image and text content. Based on the image identifier, the client creates a blank drawable object corresponding to the image, with the blank drawable object being associated with the image identifier. The blank drawable object is then inserted into the display location corresponding to the image.

[0082] Since the blank drawable object is invisible on the interface, only the text content is displayed on the interface.

[0083] Step 230: When the image content is loaded successfully, the blank drawable object is replaced with the image content, and the text content is updated to obtain mixed typeset text content and image content.

[0084] Exemplarily, according to the picture identifier corresponding to the picture content, the blank drawable object corresponding to the picture identifier is replaced with the picture content.

[0085] For example, the image content includes a first image and a second image. When the text content is loaded, the client generates a first image identifier for the first image and a second image identifier for the second image; creates a first blank drawable object based on the first image identifier and a second blank drawable object based on the second image identifier; inserts the first blank drawable object into the first display position of the first image; and inserts the second blank drawable object into the second display position of the second image. After the first image is loaded, the first blank drawable object corresponding to the first image identifier is determined based on the first image identifier, and the first blank drawable object is replaced with the first image; the second blank drawable object corresponding to the second image identifier is determined based on the second image identifier, and the second blank drawable object is replaced with the second image.

[0086] In summary, the method provided in this embodiment generates a unique identifier for each image in the mixed text and image content after the text content is loaded. The unique identifier can uniquely identify each image in the mixed text and image content. A blank drawable object is then generated for each unique identifier and inserted into the corresponding display position of the image to identify the display position of the image. After the image is loaded, the blank drawable object corresponding to the image can be identified based on the unique identifier, and the blank drawable object can be replaced with the corresponding image so that the image can be accurately displayed in the desired location. This method only requires the use of blank drawable objects to mark the real-time location of the image, which simplifies the implementation logic and reduces the computational effort.

[0087] The method provided in this embodiment can use a blank drawable object to replace the image content that has not been loaded when loading and displaying mixed text and image content, and then replace the blank drawable object with the image content after the image content is loaded. Since the blank drawable object is mixed with the text content, after the blank drawable object is inserted into the position where the image content is located, when the layout of the text content changes (for example, after a picture is loaded, the picture will be displayed in the text content, causing the length of the text content to change), the position of the blank drawable object will move accordingly. Therefore, the blank drawable object can mark the display position of the image content in real time. After the image content is loaded, replacing the blank drawable object with the image content can ensure that the image content is accurately displayed at the preset position, ensuring the normal display of the mixed text and image content. In addition, this method does not need to couple the calculation of the latest display position of all image content when the text content layout changes, which reduces the logical operation load of the image content display and improves the efficiency of loading and displaying mixed text and image content.

[0088] An embodiment of using the image loading method provided in the embodiment of the present application for interface display in a live broadcast application is provided.

[0089] Figure 4 This is a flow chart of a method for loading an image provided by an exemplary embodiment of the present application. Figure 1 The terminal device shown in FIG.

[0090] Step 301: Receive the operation of entering the live broadcast room and display the live broadcast interface of the live broadcast room.

[0091] For example, some areas of the live interface can display mixed text and image content. For example, the chat area of the live interface can display chat messages mixed with text and images; or the activity display area of the live interface can display activity introductions mixed with text and images.

[0092] Step 302: Obtain the addresses of the text and pictures to be displayed in the live broadcast interface through an interface or a socket.

[0093] For example, for mixed text and image content, the addresses of the text content and image content are obtained through an interface or a socket, and the image content and text content are loaded according to the addresses.

[0094] Step 303: Determine the display position of each picture according to the business logic, generate and record the unique value of the picture (picture identifier), create a blank drawable object (Drawable) with the unique value, and insert the blank drawable object into the text.

[0095] After the text content is loaded, the display position of the image content in the text content is determined, an image identifier is generated for each image, a blank drawable object is created for each image based on the image identifier, and the blank drawable object is inserted into the display position corresponding to the image. The blank drawable object is used to identify the display position of the image in the text content.

[0096] Step 304: After the text loading is complete, the text is displayed and the image is loaded asynchronously.

[0097] For example, text content and a blank drawable object are displayed, but since the blank drawable object is invisible, only the text content is displayed on the interface, and the text parts in the text content are arranged coherently. The image content is loaded asynchronously while the text content is displayed.

[0098] Step 305: After the image is loaded, find the blank drawable object in the text based on the unique value, replace the blank drawable object with the loaded drawable object, and update the text. If the image is not loaded, the text is not updated.

[0099] When the image is loaded, the blank drawable object corresponding to the image identifier is determined according to the image identifier corresponding to the image, and the blank drawable object is replaced with the loaded image. The displayed text content and image content are updated, and the image content displayed in the text content can be obtained, thereby obtaining mixed image and text content.

[0100] For example, if the image content has not been loaded completely or the image content fails to load, the image will not be used to replace the blank drawable object, and the displayed text does not need to be updated.

[0101] This method can be used to display the chat area in the live broadcast interface. For example, in the chat area, it is necessary to display the user's identity icon (picture), user nickname, and user message. These contents are mixed text and image layout content. When the text is loaded, Figure 5 As shown in (1), the client can display the text content and insert three blank drawable objects at the image display position 401 to mark the positions of the three identity icons. The blank drawable objects are not visible on the interface. When the image is loaded, as shown in Figure 5 As shown in (2), the blank drawable object at the display position 401 is replaced with the corresponding identity image, and the text content is updated to obtain a mixed text and image layout content.

[0102] To sum up, the method provided in this embodiment uses a blank Drawable named with a unique value as a placeholder for the image when displaying multiple images in the text. After the image corresponding to the unique value is loaded, the position of the placeholder blank Drawable in the text is determined according to the unique value, and the placeholder blank Drawable is replaced to ensure that the image is displayed in the correct position.

[0103] It should be noted that before collecting the user's relevant data and during the process of collecting the user's relevant data, this application can display a prompt interface, pop-up window or output voice prompt information. The prompt interface, pop-up window or voice prompt information is used to remind the user that its relevant data is currently being collected, so that this application only starts to execute the relevant steps of obtaining the user's relevant data after obtaining the user's confirmation operation on the prompt interface or pop-up window. Otherwise (that is, when the user's confirmation operation on the prompt interface or pop-up window is not obtained), the relevant steps of obtaining the user's relevant data are terminated, that is, the user's relevant data is not obtained. In other words, all user data collected by this application are collected with the user's consent and authorization, and the collection, use and processing of relevant user data need to comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0104] It should be noted that the order of the method steps provided in the embodiments of the present application can be appropriately adjusted, and the steps can be increased or decreased according to the circumstances. Figures 2 to 4 The steps in the illustrated embodiments may also be arbitrarily combined to obtain new embodiments. Any person skilled in the art can easily come up with variations within the technical scope disclosed in this application, and all such variations should be included within the scope of protection of this application, so these variations will not be described in detail.

[0105] Figure 6 This is a schematic diagram of the structure of an image loading device provided by an exemplary embodiment of the present application. The device includes:

[0106] The loading module 601 is used to load the text content and image content of the mixed text and image content; the mixed text and image content includes the content of the mixed layout of images and text;

[0107] Display module 602, configured to insert a blank drawable object into the text content at the location of the image content if the text content is loaded successfully, to display the text content; the blank drawable object is a drawable object that does not contain visible content;

[0108] The display module 602 is configured to replace the blank drawable object with the image content if the image content is loaded successfully, and update the text content to obtain the mixed typesetting text content and the image content.

[0109] In an optional embodiment, the display module 602 is used to obtain the display position of the image content in the text content;

[0110] The display module 602 is used to create the blank drawable object;

[0111] The display module 602 is configured to insert the blank drawable object into the display position of the image content, and display the blank drawable object and the text content.

[0112] In an optional embodiment, the display module 602 is configured to generate a picture identifier corresponding to the picture content;

[0113] The display module 602 is configured to create the blank drawable object according to the image identifier, where the blank drawable object is associated with the image identifier.

[0114] In an optional embodiment, the display module 602 is configured to replace the blank drawable object corresponding to the picture identifier with the picture content according to the picture identifier corresponding to the picture content.

[0115] In an optional embodiment, the loading module 601 is configured to asynchronously load the image content while displaying the text content.

[0116] In an optional embodiment, the image content includes at least two images; the at least two images include a first image and a second image; the blank drawable object includes a first blank drawable object corresponding to the first image, and a second blank drawable object corresponding to the second image;

[0117] The display module 602 is configured to replace the first blank drawable object with the first image if the first image is loaded successfully, update the text content, and obtain a mixed layout of the text content and the first image;

[0118] The display module 602 is configured to replace the second blank drawable object with the second image when the second image is loaded successfully, update the text content and the first image, and obtain the mixed layout of the text content, the first image, and the second image.

[0119] In an optional embodiment, the blank drawable object is invisible; when the image content is not loaded successfully, the text content is displayed in a coherent arrangement.

[0120] In an optional embodiment, the image content is located in the middle of the text content, and the text content is split into a first text and a second text;

[0121] The display module 602 is configured to display the first text at a first position and the second text at a second position; the first position is connected to the second position;

[0122] The display module 602 is configured to display the first text at a first position, the image content at a third position, and the second text at a fourth position; the first position is connected to the third position, and the fourth position is connected to the third position;

[0123] The second position is the same as the starting position of the third position, and the ending position of the third position is determined according to the image size of the image content.

[0124] It should be noted that the image loading device provided in the above embodiment is only illustrated by the division of the above functional modules. 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 based on the same concept. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0125] Embodiments of the present application further provide a computer device comprising: a processor and a memory, wherein the memory stores at least one instruction, at least one program, code set, or instruction set, and the processor loads and executes the at least one instruction, at least one program, code set, or instruction set to implement the image loading methods provided in the above-described method embodiments. The computer device may be implemented as a terminal device.

[0126] For example, Figure 7 It is a structural diagram of a computer device provided by an exemplary embodiment of the present application.

[0127] Typically, the computer device 1700 includes a processor 1701 and a memory 1702 .

[0128] The processor 1701 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1701 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), or PLA (Programmable Logic Array). The processor 1701 may 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 1701 may 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 1701 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

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

[0130] In some embodiments, computer device 1700 may optionally include a peripheral device interface 1703 and at least one peripheral device. Processor 1701, memory 1702, and peripheral device interface 1703 may be connected via a bus or signal lines. Each peripheral device may be connected to peripheral device interface 1703 via a bus, signal lines, or circuit boards. Specifically, the peripheral device may include at least one of a radio frequency circuit 1704, a display screen 1705, a camera assembly 1706, an audio circuit 1707, and a power supply 1708.

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

[0132] RF circuit 1704 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. RF circuit 1704 communicates with communication networks and other communication devices via electromagnetic signals. RF circuit 1704 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals into electrical signals. RF circuit 1704 optionally 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. RF circuit 1704 can communicate with other computer devices 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, RF circuit 1704 may also include circuitry related to Near Field Communication (NFC), although this application does not limit this.

[0133] The display screen 1705 is used to display a UI (User Interface). The UI may include graphics, text, icons, videos, and any combination thereof. When the display screen 1705 is a touch screen display, the display screen 1705 also has the ability to collect touch signals on the surface or above the surface of the display screen 1705. The touch signal can be input as a control signal to the processor 1701 for processing. At this time, the display screen 1705 can also be used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, there can be one display screen 1705, which is set on the front panel of the computer device 1700; in other embodiments, there can be at least two display screens 1705, which are respectively set on different surfaces of the computer device 1700 or in a folding design; in still other embodiments, the display screen 1705 can be a flexible display screen, which is set on the curved surface or folding surface of the computer device 1700. Even more, the display screen 1705 can be set as a non-rectangular irregular shape, that is, a special-shaped screen. The display screen 1705 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0134] The camera assembly 1706 is used to capture images or videos. Optionally, the camera assembly 1706 includes a front camera and a rear camera. Typically, the front camera is set on the front panel of the computer device 1700, and the rear camera is set on the back of the computer device. 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 1706 may also include a flash. The flash can be a single-color 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 under different color temperatures.

[0135] The audio circuit 1707 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 that are input into the processor 1701 for processing, or input into the radio frequency circuit 1704 to achieve voice communication. For the purpose of stereo sound collection or noise reduction, there may be multiple microphones, each located in different parts of the computer device 1700. The microphone may also be an array microphone or an omnidirectional collection microphone. The speaker is used to convert electrical signals from the processor 1701 or the radio frequency circuit 1704 into sound waves. The speaker may be a traditional thin film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert electrical signals into sound waves audible to humans, but also convert electrical signals into sound waves inaudible to humans for purposes such as distance measurement. In some embodiments, the audio circuit 1707 may also include a headphone jack.

[0136] Power supply 1708 is used to power various components in computer device 1700. Power supply 1708 can be AC power, DC power, a disposable battery, or a rechargeable battery. When power supply 1708 includes a rechargeable battery, the rechargeable battery can be wired or wirelessly rechargeable. A wired rechargeable battery is charged via a wired line, while a wireless rechargeable battery is charged via a wireless coil. The rechargeable battery can also support fast charging technology.

[0137] In some embodiments, the computer device 1700 further includes one or more sensors 1709 , including but not limited to an acceleration sensor 1710 , a gyroscope sensor 1711 , a pressure sensor 1712 , an optical sensor 1713 , and a proximity sensor 1714 .

[0138] The accelerometer 1710 can detect the magnitude of acceleration along the three coordinate axes of the coordinate system established by the computer device 1700. For example, the accelerometer 1710 can be used to detect the components of gravity acceleration along the three coordinate axes. The processor 1701 can control the touch screen display 1705 to display the user interface in a landscape or portrait view based on the gravity acceleration signal collected by the accelerometer 1710. The accelerometer 1710 can also be used to collect game or user motion data.

[0139] The gyroscope sensor 1711 can detect the orientation and rotation angle of the computer device 1700. It can also work with the accelerometer 1710 to collect 3D motions of the user on the computer device 1700. Based on the data collected by the gyroscope sensor 1711, the processor 1701 can implement the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0140] The pressure sensor 1712 can be installed on the side frame of the computer device 1700 and / or below the touch screen display 1705. When the pressure sensor 1712 is installed on the side frame of the computer device 1700, it can detect the user's grip signal of the computer device 1700, and the processor 1701 can perform left and right hand recognition or shortcut operations based on the grip signal collected by the pressure sensor 1712. When the pressure sensor 1712 is installed below the touch screen display 1705, the processor 1701 controls the operational controls on the UI interface based on the user's pressure operation on the touch screen display 1705. The operational controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0141] Optical sensor 1713 is used to detect ambient light intensity. In one embodiment, processor 1701 can control the display brightness of touchscreen display 1705 based on the ambient light intensity detected by optical sensor 1713. Specifically, when the ambient light intensity is high, the display brightness of touchscreen display 1705 is increased; when the ambient light intensity is low, the display brightness of touchscreen display 1705 is decreased. In another embodiment, processor 1701 can also dynamically adjust the shooting parameters of camera assembly 1706 based on the ambient light intensity detected by optical sensor 1713.

[0142] Proximity sensor 1714, also known as a distance sensor, is typically located on the front panel of computer device 1700. Proximity sensor 1714 is used to detect the distance between the user and the front of computer device 1700. In one embodiment, when proximity sensor 1714 detects that the distance between the user and the front of computer device 1700 is gradually decreasing, processor 1701 controls touchscreen display 1705 to switch from the screen-on state to the screen-off state. When proximity sensor 1714 detects that the distance between the user and the front of computer device 1700 is gradually increasing, processor 1701 controls touchscreen display 1705 to switch from the screen-off state to the screen-on state.

[0143] Those skilled in the art will understand that Figure 7 The structure shown in the figure does not constitute a limitation on the computer device 1700, and the computer device 1700 may include more or fewer components than shown in the figure, or combine some components, or adopt a different component arrangement.

[0144] A computer-readable storage medium is also provided in an embodiment of the present application. The computer-readable storage medium stores at least one instruction, at least one program, code set or instruction set. When the at least one instruction, at least one program, code set or instruction set is loaded and executed by the processor of a computer device, the image loading method provided by the above-mentioned method embodiments is implemented.

[0145] The present application also provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the image loading methods provided in the above-mentioned method embodiments.

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

[0147] The above description is merely an optional embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent switches, 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: Loading text content and image content of mixed text and image content; the mixed text and image content includes content with mixed layout of images and text; If the text content is loaded successfully, inserting a blank drawable object into the text content at the location of the image content to display the text content; the blank drawable object is a drawable object that does not contain visible content; When the image content is loaded successfully, the blank drawable object is replaced with the image content, and the text content is updated to obtain the mixed typesetting text content and the image content.

2. The method according to claim 1, characterized in that The step of inserting a blank drawable object into the text content at the location of the image content to display the text content includes: Obtaining the display position of the image content in the text content; Create the blank drawable object; The blank drawable object is inserted into the display position of the image content, and the blank drawable object and the text content are displayed.

3. The method according to claim 2, characterized in that The step of creating the blank drawable object comprises: Generate a picture identifier corresponding to the picture content; The blank drawable object is created according to the picture identifier, and the blank drawable object is associated with the picture identifier.

4. The method according to claim 3, characterized in that The replacing the blank drawable object with the image content includes: According to the picture identifier corresponding to the picture content, the blank drawable object corresponding to the picture identifier is replaced with the picture content.

5. The method according to any one of claims 1 to 4, characterized in that: The method further comprises: While displaying the text content, the image content is asynchronously loaded.

6. The method according to any one of claims 1 to 4, characterized in that: The image content includes at least two images; the at least two images include a first image and a second image; the blank drawable object includes a first blank drawable object corresponding to the first image, and a second blank drawable object corresponding to the second image; When the image content is loaded successfully, the blank drawable object is replaced with the image content, the text content is updated, and the mixed typesetting text content and the image content are obtained, including: If the first image is loaded successfully, the first blank drawable object is replaced with the first image, and the text content is updated to obtain the mixed typesetting text content and the first image; When the second image is loaded successfully, the second blank drawable object is replaced with the second image, and the text content and the first image are updated to obtain the mixed layout of the text content, the first image, and the second image.

7. The method according to any one of claims 1 to 4, characterized in that: The blank drawable object is invisible; when the image content is not loaded successfully, the text content is displayed in a coherent arrangement.

8. The method according to claim 7, characterized in that The image content is located in the middle of the text content, and the text content is split into a first text and a second text; The displaying of the text content includes: Displaying the first text at a first position and the second text at a second position; the first position is connected to the second position; The updating of the text content to obtain the mixed typesetting text content and the image content includes: Displaying the first text at a first position, the image content at a third position, and the second text at a fourth position; the first position is connected to the third position, and the fourth position is connected to the third position; The second position is the same as the starting position of the third position, and the ending position of the third position is determined according to the image size of the image content.

9. A picture loading device, characterized in that: The device comprises: A loading module, configured to load text content and image content of mixed text and image content; the mixed text and image content includes content in a mixed layout of images and text; A display module, configured to insert a blank drawable object into the text content at the location of the image content when the text content is loaded successfully, so as to display the text content; the blank drawable object is a drawable object that does not contain visible content; The display module is configured to replace the blank drawable object with the image content if the image content is loaded successfully, and update the text content to obtain the mixed typesetting text content and the image content.

10. A computer device, characterized in that: The computer device includes a processor and a memory, wherein the memory stores at least one program, and the at least one program is loaded and executed by the processor to implement the image loading method according to any one of claims 1 to 8.

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

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

Images