Method and device for loading placeholder image

Abstract

The present invention discloses a method and device for loading a placeholder image, and relates to the field of computer technology. A specific implementation of the method includes: when using a picture component to start loading a target picture: by pre-assigning the address information of the placeholder image to the placeholder image attribute of the picture component, loading the placeholder image at the display position corresponding to the target picture; wherein the picture component supports a loading prompt attribute, which is used to display a rotating prompt icon during the loading of the picture; the placeholder image attribute is obtained by removing the automatic rotation effect of the loading prompt attribute. This implementation can generate its placeholder image attribute by modifying the relevant attributes of the existing picture component, thereby achieving the placeholder image effect without affecting the application performance.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for loading a placeholder map. Background Art

[0002] React Native is an open source cross-platform mobile application development framework that currently supports Android and iOS platforms. Android and iOS are both operating systems that can be installed on mobile devices. In the existing ReactNative framework, the target image is generally loaded by configuring multiple properties of the image component. In order to improve the user experience, a placeholder image needs to be displayed at the beginning of loading and when loading fails in actual applications. However, the Image component in the existing React Native Android version does not support the placeholder image attribute. In actual applications, two images need to be superimposed to achieve the placeholder image effect, which will affect application performance.

[0003] In addition, since the existing React Native does not support web development, in the process of application development, it is often necessary to first use React Native to write the code for the Android and iOS sides, and then use conversion tools such as React Web to convert to the web side. It can be seen that the existing technology cannot achieve the true integration of the Android side, iOS side and web side, nor can it provide a unified interface to load the placeholder image on the above three sides. Summary of the invention

[0004] In view of this, an embodiment of the present invention provides a method and device for loading a placeholder image, which can generate its placeholder image properties by modifying relevant properties of an existing image component, thereby achieving a placeholder image effect without affecting application performance.

[0005] To achieve the above objective, according to one aspect of the present invention, a method for loading a placeholder image is provided.

[0006] The method for loading a placeholder image in an embodiment of the present invention includes: when using a picture component to start loading a target picture: by pre-assigning the address information of the placeholder image to the placeholder image attribute of the picture component, loading the placeholder image at a display position corresponding to the target picture; wherein the picture component supports a loading prompt attribute for displaying a rotating prompt icon during the picture loading process; the placeholder image attribute is obtained after removing the automatic rotation effect of the loading prompt attribute.

[0007] Optionally, the method is implemented according to an Android version of React Native; the picture component is an Image component in the Android version; the placeholder image is a default local image or a local image specified by a user; the address information is a data object composed of path information of the placeholder image; and the loading prompt attribute is a loadingIndicatorSrc attribute.

[0008] To achieve the above objective, according to one aspect of the present invention, another method for loading a placeholder image is provided.

[0009] The method for loading a placeholder image in an embodiment of the present invention includes: encapsulating on an Android version of React Native, an iOS version of React Native, and a web-side conversion tool of React Native, and setting unified components and attributes for the Android side, the iOS side, and the web-side; the unified components and attributes include: an image component obtained through the encapsulation and a placeholder attribute of the image component; wherein the placeholder attribute is configured to keep attribute values ​​consistent with the following attributes: a placeholder attribute of the image component in the Android version, a default source file attribute of the image component in the iOS version, and a source file attribute of an image tag triggered by a start loading event in the web-side conversion tool; the image component in the Android version supports a loading prompt attribute for displaying a rotating prompt icon during the loading of an image; the placeholder attribute is obtained by removing the automatic rotation effect of the loading prompt attribute; and the execution steps of the method on the Android side, the iOS side, or the web-side include: when starting to load a target image using the image component obtained through the encapsulation: by pre-assigning the address information of the placeholder image to the placeholder attribute, the placeholder image is loaded at a display position corresponding to the target image.

[0010] Optionally, the method further includes: when performing the encapsulation, configuring the placeholder attribute to maintain a consistent attribute value with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the Android version, the image source file attribute triggered by the loading failure event in the image component of the iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web conversion tool; and, the execution steps of the method on the Android side, iOS side or web side include: when the target image fails to be loaded using the image component obtained through the encapsulation, loading the placeholder image at the display position corresponding to the target image.

[0011] Optionally, the placeholder image is a default local image or a local image specified by the user; the web page conversion tool includes: React Web or React Native Web; the default source file attribute is the defaultSource attribute; the loading prompt attribute is the loadingIndicatorSrc attribute; and the address information is a data object composed of the path information of the placeholder image.

[0012] To achieve the above objective, according to one aspect of the present invention, a device for loading a placeholder image is provided.

[0013] The device for loading a placeholder image in an embodiment of the present invention may include: an attribute modification unit, used to remove the automatic rotation effect of the loading prompt attribute of the image component, and obtain the placeholder image attribute of the image component; wherein the loading prompt attribute is used to display a rotating prompt icon during the image loading process; and a loading unit, used to load the placeholder image at the display position corresponding to the target image by assigning the address information of the placeholder image to the placeholder image attribute in advance when using the image component to start loading the target image.

[0014] Optionally, the device is implemented according to an Android version of React Native; the picture component is the Image component in the Android version; the placeholder image is a default local image or a local image specified by a user; the address information is a data object composed of path information of the placeholder image; and the loading prompt attribute is the loadingIndicatorSrc attribute.

[0015] To achieve the above object, according to one aspect of the present invention, another device for loading a placeholder image is provided, which is used in the Android version of React Native, the iOS version of React Native and the Native web conversion tool, set a unified picture component and placeholder attributes of the picture component for Android, iOS and web, and use the picture component and the placeholder attributes to realize the loading of placeholder images for Android, iOS and web; the device may include: an attribute modification module, used to remove the automatic rotation effect of the loading prompt attribute of the picture component in the Android version, and obtain the placeholder attribute of the picture component in the Android version; wherein the loading prompt attribute is used to display a rotating prompt icon during the loading of the picture; an attribute value synchronization module, used to configure the placeholder attribute to keep the attribute value consistent with the following attributes: the placeholder attribute of the picture component in the Android version, the default source file attribute of the picture component in the iOS version, and the source file attribute of the picture tag triggered by the start loading event in the web conversion tool; and a loading module, used to load the placeholder at the display position corresponding to the target picture by assigning the address information of the placeholder to the placeholder attribute in advance when using the unified picture component to start loading the target picture.

[0016] Optionally, the attribute value synchronization module is further used to: when performing the encapsulation, configure the placeholder attribute to maintain the attribute value consistent with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the Android version, the image source file attribute triggered by the loading failure event in the image component of the iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web conversion tool; and the loading module is further used to: when the target image fails to be loaded using the unified image component, load the placeholder image at the display position corresponding to the target image.

[0017] Optionally, the placeholder image is a default local image or a local image specified by the user; the web page conversion tool includes: React Web or React Native Web; the default source file attribute is the defaultSource attribute; the loading prompt attribute is the loadingIndicatorSrc attribute; and the address information is a data object composed of the path information of the placeholder image.

[0018] To achieve the above objective, according to another aspect of the present invention, an electronic device is provided.

[0019] An electronic device of the present invention includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the method for loading a placeholder map provided by the present invention.

[0020] To achieve the above objective, according to yet another aspect of the present invention, a computer-readable storage medium is provided.

[0021] A computer-readable storage medium of the present invention stores a computer program, and when the program is executed by a processor, the method for loading a placeholder map provided by the present invention is implemented.

[0022] According to the technical solution of the present invention, one embodiment of the above invention has the following advantages or beneficial effects:

[0023] First, by modifying the loading prompt attributes related to the placeholder image in the existing React Native Android version, the placeholder image attributes of the image component are generated. When the placeholder image effect is to be achieved, the attribute can be directly set, thereby overcoming the defect of the existing image overlay method that reduces application performance.

[0024] Secondly, a cross-platform abstraction layer is encapsulated on top of the existing React Native Android version, React Native iOS version and React Native web conversion tool, and by synchronizing the corresponding attribute values ​​of the abstraction layer with the underlying layer (i.e., the layer where the React Native Android version, React Native iOS version and React Native web conversion tool are located), a unified image component and a unified placeholder attribute that can be applied to the Android side, iOS side and web side are generated, so that the placeholder image display is realized on the above three sides when the target image starts to load, thereby improving application development efficiency and improving user experience.

[0025] Third, the placeholder attributes of the abstract layer are further synchronized with the attribute values ​​of each source file attribute corresponding to the underlying loading failure event, so that the placeholder image display can be realized on the three ends when the target image fails to load.

[0026] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0028] Figure 1 is a schematic diagram of main steps of a method for loading a placeholder image according to a first embodiment of the present invention;

[0029] Figure 2 is a schematic diagram of main steps of a method for loading a placeholder image according to a second embodiment of the present invention;

[0030] Figure 3 It is a schematic diagram of components of an apparatus for loading a placeholder map for implementing the method in the first embodiment of the present invention;

[0031] Figure 4 is a schematic diagram of components of an apparatus for loading a placeholder map for implementing the method in the second embodiment of the present invention;

[0032] Figure 5 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;

[0033] Figure 6 It is a schematic diagram of the structure of an electronic device used to implement the method for loading a placeholder image in an embodiment of the present invention. DETAILED DESCRIPTION

[0034] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0035] When a user uses a terminal device to load a target image (usually a network image), it often takes a while from the start of loading to the successful or failed loading. In order to improve the user experience, a locally stored placeholder image can be used to display the corresponding display position of the target image at the beginning of loading, and the placeholder image can be removed when the target image is successfully loaded; or the placeholder image can be displayed from the start of loading failure. When developing applications using React Native, the Image component of the React Native Android version (ReactNative for Android) does not support the placeholder attribute, and the Image component of the React Native iOS version (ReactNative for iOS) has a default source file attribute (i.e., the defaultSource attribute) that can implement the placeholder function.

[0036] In addition, the existing React Native can only be used on the Android platform and the iOS platform, and cannot be used on the web side. Among them, the web side refers to the browser side on user terminals such as smart phones, tablet computers, portable computers or desktop computers, or the Web side. In actual applications, developers often need to use React Native to write code for the Android side and the iOS side (most of the code for the Android side and the iOS side can be reused), and then use tools such as React Web and React Native Web to convert the code for the Android side or the iOS side into the web side code. Among them, React Web and React Native Web are both web side implementation tools for React Native components, and the packaging tools can be used to package the React Native code into code that can run on the web side. It can be seen that in the prior art, it is not possible to write a program once and run it on multiple terminals, and it is impossible to achieve the true integration of the Android side, the iOS side and the web side.

[0037] In the embodiments of the present invention, the above problems are solved by the following technical contents. It should be pointed out that the embodiments of the present invention and the technical features in the embodiments can be combined with each other without conflict.

[0038] Figure 1 1 is a schematic diagram of main steps of a method for loading a placeholder image according to a first embodiment of the present invention.

[0039] like Figure 1 As shown, the method for loading a placeholder image in this embodiment can be specifically performed according to the following steps:

[0040] Step S101: remove the automatic rotation effect of the loading prompt attribute of the image component to obtain the placeholder image attribute of the image component.

[0041] In this step, a component refers to an independent function or interface encapsulated for the purpose of code reuse or business logic separation, and a picture component is a component used to display pictures. Preferably, the picture component can be the Image component of the ReactNative Android version, and the loading prompt attribute can be the loadingIndicatorSrc (corresponding to Chinese: loading prompt source file) attribute of the above-mentioned Image component. As a new attribute added to React Native version 0.17, the loadingIndicatorSrc attribute is used to display a rotating prompt icon when the target image starts to load, and stop displaying when the target image is loaded successfully. Its automatic rotation effect is controlled by the AutoRotateDrawable (corresponding to Chinese: automatically rotate the image) code.

[0042] In order to implement the placeholder function in the Image component of the React Native Android version, the above AutoRotateDrawable can be set to remove the automatic rotation effect of the loadingIndicatorSrc attribute, thereby obtaining the placeholder attribute of the Image component. In actual applications, the attribute name of the above placeholder attribute can remain unchanged as loadingIndicatorSrc to facilitate subsequent development. It can be understood that in addition to the loadingIndicatorSrc attribute, other attributes related to the placeholder can also be modified in this embodiment to implement the placeholder function.

[0043] Step S102: when the image component is used to start loading the target image, the placeholder image is loaded at the display position corresponding to the target image by assigning the address information of the placeholder image to the placeholder image attribute in advance.

[0044] In this step, the placeholder image properties obtained in step S201 can be used to load the placeholder image. Specifically, taking the image component as an Image component as an example, before using the image component to load the target image, the properties of the Image component must first be configured. For example, the address information of the target image is assigned to the source (source file) property, the address information of the placeholder image is assigned to the placeholder image property, and the style (style), resizeMode (zoom mode) and other properties are configured.

[0045] Since each property in React Native needs to be assigned in the form of a data object, the address information is a data object composed of the path information of the placeholder, and the path information can be absolute path information or relative path information. For example, if you want to set a picture with a file path of "assets / abc / test" as a placeholder, you can construct the path information into a data object {{uri:'assets / abc / test'}}, and then assign values ​​to the placeholder properties. Among them, uri is a uniform resource identifier (Uniform Resource Identifier), and the pair of curly brackets outside the data object indicate that the code is a JavaScript (a literal scripting language) statement, and the pair of curly brackets inside are the syntax specifications of JSX (a language that combines Javascript and extensible markup language XML).

[0046] In this way, when the target image is loaded using the image component with configured properties, the placeholder image can be loaded at the display position corresponding to the target image until the target image is loaded successfully. It is understandable that in order to increase the loading and display speed of the placeholder image, the placeholder image can generally be set as a local image. If the user does not set the placeholder image properties, the system default local image can be used as the placeholder image. In addition, the zoom mode property of the placeholder image can be set to contain (corresponding to Chinese: include), so that the placeholder image can be fully displayed while ensuring the aspect ratio.

[0047] Through the above settings, this embodiment can implement the placeholder function based on a single image in the React Native Android version, overcoming the defect of the existing image overlay method that reduces application performance. In practical applications, the method of this embodiment can also be used in any applicable development platform other than React Native, and the present invention does not limit this.

[0048] Figure 2 4 is a schematic diagram of main steps of a method for loading a placeholder image according to a second embodiment of the present invention.

[0049] In this embodiment, the React Native Android version, the React Native iOS version, and the ReactNative web conversion tool can be used as the bottom layer, and an abstract layer can be encapsulated on it to provide unified components and properties for the Android side, iOS side, and web side. It can be understood that various application program interfaces need to be redefined in the abstract layer and correspond to the corresponding interfaces of the three bottom ends. For the placeholder function, it can be implemented through the placeholder properties of the picture component redefined in the abstract layer.

[0050] like Figure 2 As shown, the method for loading a placeholder image in this embodiment can be specifically performed according to the following steps:

[0051] Step S201: remove the automatic rotation effect of the loading prompt attribute of the image component in the React Native Android version, and obtain the placeholder image attribute of the image component in the Android version.

[0052] The loading hint attribute is used to display a rotating hint icon during the loading of the image. In this step, the placeholder attribute of the image component can be implemented by modifying the loading hint attribute related to the placeholder in the React Native Android version, such as the loadingIndicatorSrc attribute.

[0053] Step S202: configure the placeholder attribute to keep the attribute value consistent with the following attributes: the placeholder attribute of the image component in the React Native Android version, the default source file attribute of the image component in the React Native iOS version, and the source file attribute of the image tag triggered by the start loading event in the web conversion tool.

[0054] The placeholder attribute is the attribute generated by the loading hint attribute in step S201, and the default source file attribute can be the defaultSource attribute of the React Native iOS version. In web conversion tools (such as ReactWeb and React Native Web), the start loading event refers to the onloadstart event of the hypertext markup language HTML (corresponding to Chinese: start loading) and the image tag is the Tag (this tag is used to insert pictures into the page), the above source file attributes refer to The src attribute of the tag. It can be understood that the source file attribute of the image tag triggered by the start loading event in the above web conversion tool can be used to set the image path triggered by the onloadstart event, that is, this attribute can be used to implement the placeholder function when the target image starts loading.

[0055] In specific applications, the same variable can be assigned to the above placeholder attributes and the above three attributes of the Android, iOS and web terminals, so that the attribute values ​​of these attributes remain consistent. In subsequent applications, configuring the placeholder attributes of the abstract layer is equivalent to configuring the corresponding attributes of the Android, iOS and web terminals in the same way, thereby realizing a three-terminal fusion solution for the placeholder function. It should be noted that the above attribute values ​​remaining consistent does not mean that the attribute values ​​of each attribute are exactly the same, but that the file path information in the attribute values ​​of each attribute points to the same file.

[0056] Through the above settings, this embodiment can realize the placeholder function when the target image starts to load synchronously on the Android terminal, iOS terminal and web terminal. In the optional implementation of this embodiment, the placeholder function when the target image fails to load can be realized in the following way.

[0057] Specifically, when performing abstract layer encapsulation, the placeholder attribute can be further configured to keep the attribute value consistent with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the React Native Android version, the image source file attribute triggered by the loading failure event in the image component of the React Native iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web conversion tool. Among them, the loading failure event can be an onError (corresponding to Chinese: an error occurs) event, and the image source file attribute triggered by the loading failure event can be the source attribute of the image triggered by the onError event.

[0058] It can be understood that the above three attributes triggered by the loading failure event can be used to realize the display of the placeholder image when the target image fails to load. Therefore, the variables assigned to the placeholder attributes can be further assigned to the above three attributes of the Android side, iOS side and web side, so that the attribute values ​​of these attributes remain consistent. In subsequent applications, configuring the placeholder attributes of the abstract layer is equivalent to configuring the above attributes of the Android side, iOS side and web side in the same way, thereby realizing the placeholder image display solution of the three-end integration when the target image fails to load.

[0059] Step S203: when starting to load the target image using a unified image component, the placeholder image is loaded at the display position corresponding to the target image by assigning the address information of the placeholder image to the placeholder attribute in advance.

[0060] In this step, the placeholder attribute configured in step S202 can be used to load the placeholder image. In specific applications, if the placeholder attribute only keeps the same attribute value as the placeholder attribute in the React Native Android version, the defaultSource attribute in the React Native iOS version, and the above attribute triggered by the start loading event in the web conversion tool, the placeholder image loading effect can only be displayed when the target image starts loading; if the placeholder attribute also keeps the same attribute value as the attribute triggered by the loading failure event on the three ends, the placeholder image effect can be displayed when the target image starts loading and when the loading fails.

[0061] It can be understood that the placeholder is loaded by assigning the address information of the placeholder to the placeholder attribute before configuring the image component. In order to meet the syntax requirements of React Native, the above address information is a data object composed of the path information of the placeholder. In practical applications, in order to improve the loading and display speed of the placeholder, the placeholder can generally be set to a local image. If the user does not set the placeholder attribute, the system default local image can be used as the placeholder. In addition, the scaling mode attribute of the placeholder can be set to contain, so that the placeholder can be fully displayed while ensuring the aspect ratio.

[0062] It should be noted that although this embodiment is introduced by taking the multi-platform integration solution of React Native as an example, this does not mean that the application scenario of the present invention is limited to this. In fact, in addition to React Native, any applicable multi-platform integration solution can use the method of the present invention.

[0063] In the technical solution of the embodiment of the present invention, the placeholder image properties can be realized by modifying the relevant properties of the image component in the existing React Native Android version, thereby improving the application performance. At the same time, cross-platform encapsulation is performed for the Android terminal, iOS terminal and web terminal, realizing an application development mechanism of writing once and running in multiple places, and also realizing a placeholder image loading solution compatible with the above three terminals.

[0064] It should be noted that, for the convenience of description, the aforementioned method embodiments are described as a series of action combinations, but those skilled in the art should be aware that the present invention is not limited by the described action sequence, and some steps can actually be performed in other sequences or simultaneously. In addition, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily necessary to implement the present invention.

[0065] In order to better implement the above-mentioned solution of the embodiment of the present invention, relevant devices for implementing the above-mentioned solution are also provided below.

[0066] See also Figure 3 As shown, the embodiment of the present invention provides an apparatus 300 for loading a placeholder map corresponding to the method in the first embodiment, which may include a property modification unit 301 and a loading unit 302 .

[0067] Specifically, the attribute modification unit 301 can be used to remove the automatic rotation effect of the loading prompt attribute of the image component to obtain the placeholder attribute of the image component; wherein the loading prompt attribute is used to display a rotating prompt icon during the image loading process; the loading unit 302 can be used to load the placeholder at the display position corresponding to the target image by pre-assigning the address information of the placeholder to the placeholder attribute when using the image component to start loading the target image.

[0068] In an embodiment of the present invention, the device is implemented according to an Android version of React Native; the picture component is an Image component in the Android version; the placeholder image is a default local image or a local image specified by a user; the address information is a data object composed of path information of the placeholder image; and the loading prompt attribute is a loadingIndicatorSrc attribute.

[0069] Figure 4 It is a schematic diagram of components of an apparatus for loading a placeholder map for implementing the method in the second embodiment of the present invention.

[0070] like Figure 4 As shown, the device 400 for loading a placeholder image in an embodiment of the present invention is used to be encapsulated on the Android version of React Native, the iOS version of React Native, and the web conversion tool of React Native, and a unified image component and a placeholder attribute of the image component are set for the Android side, the iOS side, and the web side, and the image component and the placeholder attribute are used to implement the loading of the placeholder image on the Android side, the iOS side, and the web side; the device 400 may include an attribute modification module 401, an attribute value synchronization module 402, and a loading module 403.

[0071] Among them, the attribute modification module 401 can be used to remove the automatic rotation effect of the loading prompt attribute of the image component in the Android version, and obtain the placeholder attribute of the image component in the Android version; wherein, the loading prompt attribute is used to display a rotating prompt icon during the image loading process; the attribute value synchronization module 402 can be used to configure the placeholder attribute to keep the attribute value consistent with the following attributes: the placeholder attribute of the image component in the Android version, the default source file attribute of the image component in the iOS version, and the source file attribute of the image tag triggered by the start loading event in the web conversion tool; the loading module 403 can be used to load the placeholder at the display position corresponding to the target image by assigning the address information of the placeholder to the placeholder attribute in advance when using the unified image component to start loading the target image.

[0072] As a preferred solution, the attribute value synchronization module 402 can be further used to: when performing the encapsulation, configure the placeholder attribute to maintain the attribute value consistent with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the Android version, the image source file attribute triggered by the loading failure event in the image component of the iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web conversion tool; the loading module 403 can be further used to: when the target image fails to be loaded using the unified image component, load the placeholder image at the display position corresponding to the target image.

[0073] In addition, in an embodiment of the present invention, the placeholder image is a default local image or a local image specified by a user; the web page conversion tool includes: React Web or React Native Web; the default source file attribute is the defaultSource attribute; the loading prompt attribute is the loadingIndicatorSrc attribute; and the address information is a data object composed of the path information of the placeholder image.

[0074] In the technical solution of the embodiment of the present invention, the placeholder image properties can be realized by modifying the relevant properties of the image component in the existing React Native Android version, thereby improving the application performance. At the same time, cross-platform encapsulation is performed for the Android terminal, iOS terminal and web terminal, realizing an application development mechanism of writing once and running in multiple places, and also realizing a placeholder image loading solution compatible with the above three terminals.

[0075] Figure 5 An exemplary system architecture 500 is shown to which the method for loading a placeholder map or the apparatus for loading a placeholder map according to the embodiments of the present invention can be applied.

[0076] like Figure 5 As shown, the system architecture 500 may include terminal devices 501, 502, 503, a network 504 and a server 505 (this architecture is only an example, and the components included in the specific architecture may be adjusted according to the specific application). The network 504 is used to provide a medium for a communication link between the terminal devices 501, 502, 503 and the server 505. The network 504 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0077] Users can use terminal devices 501, 502, 503 to interact with server 505 through network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, 503, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0078] The terminal devices 501 , 502 , and 503 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, desktop computers, and the like.

[0079] The server 505 may be a server that provides various services, such as a backend management server (only an example) that provides support for shopping websites browsed by users using the terminal devices 501, 502, and 503. The backend management server may process received product information query requests, etc., and feed back the processing results (such as product pictures - only an example) to the terminal device.

[0080] It should be noted that the method for loading a placeholder map provided in the embodiment of the present invention is generally executed by the terminal devices 501 , 502 , 503 , and accordingly, the apparatus for loading a placeholder map is generally disposed in the terminal devices 501 , 502 , 503 .

[0081] It should be understood that Figure 5The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0082] The present invention also provides an electronic device. The electronic device of an embodiment of the present invention includes: one or more processors; a storage device for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors implement the method for loading a placeholder map provided by the present invention.

[0083] Reference below Figure 6 , which shows a schematic diagram of the structure of a computer system 600 of an electronic device suitable for implementing an embodiment of the present invention. Figure 6 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0084] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage part 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the computer system 600 are also stored. The CPU 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0085] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed so that a computer program read therefrom is installed into the storage section 608 as needed.

[0086] In particular, according to the embodiments disclosed in the present invention, the process described in the main step diagram above can be implemented as a computer software program. For example, an embodiment of the present invention includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program code for executing the method shown in the main step diagram. In the above embodiment, the computer program can be downloaded and installed from the network through the communication part 609, and / or installed from the removable medium 611. When the computer program is executed by the central processing unit 601, the above functions defined in the system of the present invention are executed.

[0087] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer readable signal media may also be any computer readable medium other than computer readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0088] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0089] The units involved in the embodiments of the present invention may be implemented by software or hardware. The units described may also be set in a processor, for example, it may be described as: a processor includes an attribute modification unit and a loading unit. The names of these units do not constitute a limitation on the units themselves in some cases, for example, the attribute modification unit may also be described as a "unit that provides placeholder attributes to the loading unit".

[0090] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently and not be assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by the device, the steps executed by the device include: when using the image component to start loading the target image: by pre-assigning the address information of the placeholder image to the placeholder image attribute of the image component, the placeholder image is loaded at the display position corresponding to the target image; wherein, the image component supports a loading prompt attribute, which is used to display a rotating prompt icon during the loading process of the image; the placeholder image attribute is obtained after removing the automatic rotation effect of the loading prompt attribute.

[0091] In the technical solution of the embodiment of the present invention, the placeholder image properties can be realized by modifying the relevant properties of the image component in the existing React Native Android version, thereby improving the application performance. At the same time, cross-platform encapsulation is performed for the Android terminal, iOS terminal and web terminal, realizing an application development mechanism of writing once and running in multiple places, and also realizing a placeholder image loading solution compatible with the above three terminals.

[0092] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for loading a placeholder image, characterized in that: include: Wrap it on top of React Native's Android version, React Native's iOS version, and React Native's web conversion tool, and set unified components and properties for Android, iOS, and web. The unified components and attributes include: the image component obtained through the encapsulation and the placeholder attribute of the image component; wherein, The placeholder attribute is configured to keep the attribute value consistent with the following attributes: the placeholder attribute of the picture component in the Android version, the default source file attribute of the picture component in the iOS version, and the source file attribute of the picture tag triggered by the start loading event in the web conversion tool; the picture component in the Android version supports a loading prompt attribute, which is used to display a rotating prompt icon during the loading of the picture; the placeholder attribute is obtained by removing the automatic rotation effect of the loading prompt attribute; the loading prompt attribute is the loadingIndicatorSrc attribute; Furthermore, the execution steps of the method on an Android terminal, an iOS terminal or a web terminal include: when starting to load a target image using the image component obtained through the encapsulation: by pre-assigning the address information of the placeholder image to the placeholder attribute, loading the placeholder image at a display position corresponding to the target image; the address information is a data object composed of the path information of the placeholder image; The method further includes: when performing the encapsulation, configuring the placeholder attribute to maintain a consistent attribute value with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the Android version, the image source file attribute triggered by the loading failure event in the image component of the iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web conversion tool; and the execution steps of the method on the Android side, iOS side or web side include: when the target image fails to be loaded using the image component obtained through the encapsulation, loading the placeholder image at the display position corresponding to the target image.

2. The method according to claim 1, characterized in that The placeholder image is a default local image or a local image specified by the user; Web conversion tools include: React Web or React Native Web; The default source file attribute is the defaultSource attribute.

3. The method according to claim 1, characterized in that The picture component in the Android version is the Image component in the Android version.

4. A device for loading a placeholder image, characterized in that: The device is used to encapsulate the Android version of React Native, the iOS version of React Native and the web conversion tool of React Native, set a unified picture component and a placeholder attribute of the picture component for the Android side, the iOS side and the web side, and use the picture component and the placeholder attribute to realize the loading of the placeholder image of the Android side, the iOS side and the web side; the device includes: The attribute modification module is used to remove the automatic rotation effect of the loading prompt attribute of the picture component in the Android version, and obtain the placeholder image attribute of the picture component in the Android version; wherein the loading prompt attribute is used to display a rotating prompt icon during the loading of the picture; the loading prompt attribute is the loadingIndicatorSrc attribute; An attribute value synchronization module, configured to configure the placeholder attribute to keep the attribute value consistent with the following attributes: the placeholder image attribute of the image component in the Android version, the default source file attribute of the image component in the iOS version, and the source file attribute of the image tag triggered by the start loading event in the webpage conversion tool; A loading module, configured to load the placeholder at a display position corresponding to the target image by assigning the address information of the placeholder to the placeholder attribute in advance when starting to load the target image using the unified image component; the address information is a data object composed of the path information of the placeholder; The attribute value synchronization module is further used to: when performing the encapsulation, configure the placeholder attribute to keep the attribute value consistent with the following attributes: the image source file attribute triggered by the loading failure event in the image component of the Android version, the image source file attribute triggered by the loading failure event in the image component of the iOS version, and the source file attribute of the image tag triggered by the loading failure event in the web page conversion tool; The loading module is further used to: when the target image fails to be loaded using the unified image component, load the placeholder image at the display position corresponding to the target image.

5. The device according to claim 4, characterized in that The placeholder image is a default local image or a local image specified by the user; Web conversion tools include: React Web or React Native Web; The default source file attribute is the defaultSource attribute.

6. The device according to claim 4, characterized in that The picture component in the Android version is the Image component in the Android version.

7. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 3.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 3 is implemented.

Images