CN106886419B - Network picture loading method and device - Google Patents
Network picture loading method and device Download PDFInfo
- Publication number
- CN106886419B CN106886419B CN201710194113.3A CN201710194113A CN106886419B CN 106886419 B CN106886419 B CN 106886419B CN 201710194113 A CN201710194113 A CN 201710194113A CN 106886419 B CN106886419 B CN 106886419B
- Authority
- CN
- China
- Prior art keywords
- picture
- loaded
- network
- loading
- network picture
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 97
- 238000000034 method Methods 0.000 claims abstract description 57
- 230000003044 adaptive effect Effects 0.000 description 13
- 238000010586 diagram Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 5
- 230000006978 adaptation Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a network picture loading method and device, which are applied to an electronic terminal based on a ReactNative platform. The method comprises the following steps: setting the display size of the network picture to be loaded to be a preset size in the picture self-adaptive component; acquiring the actual size of a network picture to be loaded; updating the display size to an actual size; and loading the network picture to be loaded according to the updated display size. Through the design, the problems of incomplete picture loading and picture display deformation caused by the fact that the size of the network picture cannot be correctly specified in advance when the network picture is loaded can be solved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a network picture loading method and device.
Background
The ReactNative is a set of cross-platform mobile application development framework provided by facebook corporation, and is a derivative of UI framework React on a native mobile application platform. The inventor researches and finds that in ReactNative, when a network picture is loaded, the picture size must be specified in advance, otherwise, the network picture cannot be displayed. The requirement of specifying the picture size in advance requires that the size of the picture is known in advance, and if the picture size is specified randomly under the condition that the picture size is not clear, the picture is loaded incompletely or displayed and deformed. Even if the picture size is known in advance, once the network picture is changed, the above-mentioned problems of incomplete picture loading or display distortion still occur.
Disclosure of Invention
In view of the above, the present invention provides a method and an apparatus for loading a network picture to solve the above problem.
In order to achieve the above object, a preferred embodiment of the present invention provides a network picture loading method, which is applied to an electronic terminal based on a ReactNative platform, where the electronic terminal includes a picture adaptive component, and the method includes:
setting the display size of the network picture to be loaded to be a preset size in the picture self-adaptive component;
acquiring the actual size of the network picture to be loaded;
updating the display size to the actual size;
and loading the network picture to be loaded according to the updated display size.
Preferably, in the above network picture loading method, the picture self-adaptive component includes an instruction for calling a picture control; the step of obtaining the actual size of the network picture to be loaded comprises the following steps:
and calling a size obtaining instruction of the picture control in the picture self-adaptive assembly, and obtaining the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed.
Preferably, in the above network picture loading method, the step of updating the display size to the actual size includes:
and updating the display size to the actual size in the picture self-adaptive assembly, triggering the picture control to call a size redefinition instruction, and updating the display size in the picture control to the actual size.
Preferably, in the above network picture loading method, the method further includes:
judging the loading progress of the network picture to be loaded in the picture self-adaptive component;
and displaying or hiding the ActivityIndicator control according to the judgment result.
Preferably, in the network picture loading method, the step of displaying or hiding the activindicator control according to the judgment result includes:
when the network picture to be loaded is being loaded, displaying the activindicator control;
and hiding the activindicator control when the loading of the network picture to be loaded is finished.
The preferred embodiment of the present invention further provides a network picture loading device, which is applied to an electronic terminal based on a ReactNative platform, wherein the electronic terminal comprises an electronic terminal of a picture adaptive component, and the device comprises:
the display size setting module is used for setting the display size of the network picture to be loaded to be a preset size through the picture self-adaptive component;
the actual size acquisition module is used for acquiring the actual size of the network picture to be loaded;
a display size updating module for updating the display size to the actual size;
and the network picture loading module loads the network picture to be loaded according to the updated display size.
Preferably, in the network picture loading apparatus, the picture adaptive component includes an instruction for calling a picture control; the actual size acquisition module includes:
and the actual size obtaining sub-module is used for calling a size obtaining instruction of the picture control in the picture self-adaptive assembly and obtaining the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed.
Preferably, in the above network picture loading apparatus, the display size updating module includes:
and the display size updating sub-module is used for updating the display size to the actual size in the picture self-adaptive assembly, triggering the picture control to call a size redefinition instruction, and updating the display size in the picture control to the actual size.
Preferably, in the above network picture loading apparatus, the apparatus further includes:
the loading progress judging module is used for judging the loading progress of the network picture to be loaded in the picture self-adaptive assembly;
and the loading progress indication module is used for displaying or hiding the ActivityIndicator control according to the judgment result.
Preferably, in the above network picture loading apparatus, the loading progress indication module includes:
the first indication module is used for displaying the ActivityIndicator control when the network picture to be loaded is being loaded;
and the second indication module is used for hiding the ActivityIndicator control when the network picture to be loaded is loaded.
According to the network picture loading method and device provided by the invention, the actual size of the network picture to be loaded is obtained, and the preset display size is updated to the actual size, so that the network picture to be loaded is loaded according to the updated display size. Therefore, the problems of incomplete picture loading or picture display deformation caused by inaccurate appointed display size can be avoided.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 is a block diagram of an electronic terminal according to an embodiment of the present invention.
Fig. 2 is a schematic flowchart of a network picture loading method according to an embodiment of the present invention.
Fig. 3 is a schematic flowchart of a network picture loading method according to an embodiment of the present invention.
Fig. 4 is a schematic flowchart of a network picture loading method according to an embodiment of the present invention.
Fig. 5 is a connection block diagram of a network picture loading apparatus according to an embodiment of the present invention.
Fig. 6 is a further connection block diagram of the network picture loading apparatus according to the embodiment of the present invention.
Icon: 100-an electronic terminal; 110-network picture loading means; 111-display size setting module; 112-actual size obtaining module; 1121-actual size obtaining submodule; 113-display size update module; 1131 — display size update submodule; 114-network picture loading module; 115-a loading progress judgment module; 116-load progress indication module; 1161-a first indication submodule; 1162-a second indication submodule; 120-a memory; 130-a processor.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
In the description of the present invention, it should be noted that the terms "first", "second", "third", and the like are used only for distinguishing the description, and are not intended to indicate or imply relative importance.
In the description of the present invention, it should also be noted that, unless otherwise explicitly specified or limited, the terms "disposed," "mounted," "connected," and "connected" are to be construed broadly and may, for example, be fixedly connected, detachably connected, or integrally connected; can be mechanically or electrically connected; they may be connected directly or indirectly through intervening media, or they may be interconnected between two elements. The specific meanings of the above terms in the present invention can be understood in specific cases to those skilled in the art.
Fig. 1 is a block diagram of an electronic terminal 100 according to a preferred embodiment of the invention. The electronic terminal 100 in the embodiment of the present invention may be, but is not limited to, a server, a Personal Computer (PC), a tablet computer, a Personal Digital Assistant (PDA), a Mobile Internet Device (MID), a smart phone, and the like. The method and the device provided in the embodiment of the invention are used for loading the network picture on the electronic terminal 100.
The electronic terminal 100 includes a network picture loading device 110, a memory 120 and a processor 130.
The memory 120, processor 130, and various components are electrically coupled, directly or indirectly, to enable data transfer or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The processor 130 is used for executing executable modules stored in the memory 120, such as software functional modules and computer programs included in the network picture loading device 110.
The Memory 120 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory 120 is used for storing a program, and the processor 130 executes the program after receiving the execution instruction.
The processor 130 may be an integrated circuit chip having signal processing capabilities. The Processor 130 may be a general-purpose Processor including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components. The various methods, steps and logic blocks disclosed in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
It should be understood that the configuration shown in fig. 1 is merely illustrative, and the electronic terminal 100 may include more or fewer components than shown in fig. 1, or have a different configuration than shown in fig. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination thereof.
Fig. 2 shows a method for loading a network picture according to a preferred embodiment of the present invention. The network picture loading method is applied to the electronic terminal 100 shown in fig. 1, and the electronic terminal 100 includes a picture self-adapting component. In this embodiment, the electronic terminal 100 may be an electronic terminal 100 based on a ReactNative platform.
The method steps and the specific flow shown in fig. 2 will be described in detail below.
Step S101: and setting the display size of the network picture to be loaded to be a preset size in the picture self-adaptive component.
In the ReactNative, loading a network picture requires calling a picture control Image. In the prior art, the network picture can be loaded by directly calling the picture control through the following codes.
<Image style＝{{width:100,height:100}}
source＝{{uri：’https://facebook.gitthub.io/react/ig/logo_og.png’}}/>
The inventor researches and finds that when the network picture is loaded by the ReactNative, the picture size must be specified in advance to load the network picture. Therefore, the actual size of the network picture to be loaded must be known in advance, and if the value of the display size is randomly specified under the condition that the actual size of the network picture to be loaded is not clear, the network picture to be loaded is incompletely loaded or the finally displayed picture is deformed. Even if the actual size of the network picture to be loaded is known, once the picture is changed, the known size is no longer applicable, and if the picture is continuously loaded according to the known actual size, the problem of incomplete picture loading or display deformation is finally caused.
In this embodiment, a picture adaptive component may be customized, where the picture adaptive component is configured to call a picture control of the ReactNative to load a network picture to be loaded, that is, the picture adaptive component includes an instruction to call the picture control.
Optionally, the picture adaptation component may call the picture control, i.e., call the Image control, in a render () method. For example, it can be realized by the following codes.
The render () method is a component class layout method, and is in the form of a function, and the return value is the specific layout of the component in which the render () method is located. onLayout, onLoad, onLoadStart, and source are default properties of the picture control. When the layout of the picture control is changed, a resize method in the onlay attribute is called to modify the value of the changed corresponding attribute in the picture control. When the network picture loading is completed, the onLoad method in the onLoad attribute is called. When the network picture starts to load, the onLoadStart method in the onLoadStart attribute is called. source refers to a source attribute transmitted by a parent component, and represents a source address of a network picture.
style is the style of the picture control Image, height refers to the height of the picture, width refers to the width of the picture, and this. align item: 'center' represents that the sub-controls inside the picture are arranged in the center in the horizontal direction, and justifyContent: 'center' indicates that the sub-controls inside the picture are arranged in the center in the vertical direction. the renderChildren () method represents that it is the child control of the picture control that is returned.
According to the provisions of ReactNative, when the picture control loads the network picture, the display size of the network picture to be loaded needs to be specified in advance, that is, the display size of the network picture to be loaded needs to be set to be a preset size in the picture self-adaptive component. Wherein, the display size may include the width and height of the network picture to be loaded.
Optionally, the width and height of the network picture to be loaded may be defined in the picture adaptation component, and the width and height may be initialized to preset values. According to practical situations, the initial values of the width and the height may be the same or different, and the specific values are not limited in this embodiment. For example, the is.
Thus, the picture self-adaptive component can load the network picture to be loaded.
In this embodiment, the picture adaptive component is further configured to update the value of the display size in the picture control to the actual size of the network picture to be loaded in the loading process of the network picture to be loaded, so that the network picture to be loaded is loaded according to the correct size.
Step S102: and acquiring the actual size of the network picture to be loaded.
In the ReactNative, the picture control Image downloads the network picture to be loaded into the cache and then displays the network picture. In this embodiment, the actual size of the network picture to be loaded may be obtained in the loading process of the network picture to be loaded, and the display size may be updated to the actual size,
alternatively, the step S102 may include the following steps.
Calling a size obtaining instruction of the picture control in the picture self-adaptive assembly, and obtaining the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed
The size obtaining instruction of the picture control may be a getSize () method in the picture control, where the getSize () method is used to obtain the actual size of the network picture to be loaded before the network picture to be loaded is displayed. Optionally, the getSize () may obtain the actual size of the network picture to be loaded from the source address of the network picture to be loaded.
Step S103: and updating the display size to the actual size.
After the actual size of the network picture to be loaded is obtained, the picture self-adaptive assembly modifies the display size in the picture control object to the obtained actual size, so that the network picture to be loaded is loaded according to the updated display size.
Alternatively, the step S103 may include the following steps.
And updating the display size to the actual size in the picture self-adaptive assembly, triggering the picture control to call a size redefinition instruction, and updating the display size in the picture control to the actual size.
In this embodiment, the picture adaptation component may call this.setstate () method to update the display size of the network picture to be loaded in the component to the actual size.
Optionally, in this embodiment, the step of obtaining the size of the network picture to be loaded and modifying the display size of the network picture to be loaded in the component may be implemented by the following codes.
Image.getSize(this.props.source.uri，(width，height)＝>{this.setState ({height：height，width：width})})
The calling of the setState () method triggers the picture control Image to call a resize () method in the onLayout attribute, and redefines the display size in the picture control object. That is, the values of this.
Step S104: and loading the network picture to be loaded according to the updated display size.
In this embodiment, the value of the pre-specified display size may be modified to the actual size of the network picture to be loaded before the network picture to be loaded is displayed through the steps S102 and S103, so that a correct and complete picture can be displayed after the network picture to be loaded is loaded. In addition, since the display size is changed before the picture to be loaded is displayed, that is, the display size is changed in the process of loading the picture, the user experience is not influenced.
It should be noted that, in the ReactNative, the operation of modifying the data in the component is generally performed in the componentDidMount () method, and therefore, in this embodiment, the relevant instruction for implementing the step S102 and the step S103 may be called and executed in the componentDidMount () method.
Referring to fig. 3, optionally, the network picture loading method may further include step S105 and step S106.
Step S105: and judging the loading progress of the network picture to be loaded in the picture self-adaptive assembly.
In implementation, a period of time is required from the loading of the network picture to be loaded to the loading completion and the display of the picture, and in order to improve the user experience, the loading progress of the network picture to be loaded can be displayed in the period of time.
Optionally, in the ReactNative, the onLoadStart method is called when the network picture starts to be loaded, and thus, the setState () method may be called in the onLoadStart method to set the loading progress indication value isLoading, and the progress indication value isLoading may be set to true. In this embodiment, setting the progress indication value to true when the network picture starts to be loaded may be implemented by a code this.
When the network picture loading is completed, the onLoad method is called, and thus, the setState () method can be called in the onLoad method to set the loading progress indication value isLoading to false. In this embodiment, when the network picture is loaded, setting the progress indication value isLoading to false may pass through the code this.
Therefore, the loading progress of the network picture can be judged according to the isLoading value.
Step S106: and displaying or hiding the ActivityIndicator control according to the judgment result.
Optionally, as shown in fig. 4, in this embodiment, the step S106 may include two substeps, i.e., a step S201 and a step S202.
Step S201: and when the network picture to be loaded is being loaded, displaying the activindicator control.
Step S202: and hiding the activindicator control when the loading of the network picture to be loaded is finished.
In this embodiment, the steps S201 and S202 may be implemented by the following codes.
if(this.state.isLoading){return<ActivityIndicator/>}
That is, when the isLoading value is true, it indicates that the network picture to be loaded is being loaded, and at this time, the activindicator control is called to display a progress loading circle, and the loading progress continuously rotates all the time to prompt the user that the network picture to be loaded is currently being loaded.
When the isLoading value is false, the loading of the network picture to be loaded is completed, the activindicator control is hidden at the moment, and the loading progress circle is not displayed continuously so as to prompt a user that the loading of the network picture to be loaded is completed.
the render child () method is used to return a child control of a picture control, and therefore, in this embodiment, the relevant instruction for implementing the steps S201 and S202 may be called and executed in the render child () method, and thus, the activity indicator control may be returned when the isLoading value is false, so as to display a loading progress circle.
Referring to fig. 5, a network picture loading apparatus 110 according to a preferred embodiment of the invention is shown. The network picture loading apparatus 110 is applied to the electronic terminal 100 shown in fig. 1, and the electronic terminal 100 includes a picture adaptive component. In this embodiment, the electronic terminal 100 may be an electronic terminal 100 based on a ReactNative platform.
The network picture loading device 110 includes a display size obtaining module, an actual size obtaining module 112, a display size updating module 113 and a network picture loading module 114.
The display size setting module 111 is configured to set the display size of the network picture to be loaded to a preset size through the picture adaptive component. In this embodiment, the description of the display size setting module 111 may specifically refer to the detailed description of step S101 shown in fig. 2, that is, step S101 may be performed by the display size setting module 111.
The actual size obtaining module 112 is configured to obtain an actual size of the network picture to be loaded. In the present embodiment, the description of the actual size obtaining module 112 may specifically refer to the detailed description of step S102 shown in fig. 2, that is, step S102 may be executed by the actual size obtaining module 112.
Optionally, in this embodiment, the picture adaptive component includes an instruction for invoking a picture control. The actual size obtaining module 112 may include an actual size obtaining sub-module 1121.
The actual size obtaining sub-module 1121 is configured to invoke a size obtaining instruction of the picture control in the picture adaptive component, and obtain the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed.
In this embodiment, the description of the actual size obtaining sub-module 1121 may specifically refer to the detailed explanation of the related steps in the above.
The display size updating module 113 is configured to update the display size to the actual size. In this embodiment, the description of the display size update module 113 may specifically refer to the detailed description of step S103 shown in fig. 2, that is, step S103 may be executed by the display size update module 113.
Optionally, in this embodiment, the display size update module 113 may include a display size update sub-module 1131.
The display size updating sub-module 1131 is configured to update the display size to the actual size in the picture adaptive component, trigger the picture control to invoke a resizing instruction, and update the display size in the picture control to the actual size.
In this embodiment, the description of the display size update sub-module 1131 may refer to the detailed description of the related steps in the above.
The network picture loading module 114 is configured to load the network picture to be loaded according to the updated display size. In this embodiment, the description of the network picture loading module 114 may specifically refer to the detailed description of step S104 shown in fig. 2, that is, the step S104 may be executed by the network picture loading module 114.
Optionally, referring to fig. 6, in this embodiment, the network picture loading device 110 may further include a loading progress determining module 115 and a loading progress indicating module.
The loading progress determining module 115 is configured to determine the loading progress of the network picture to be loaded in the picture adaptive component. In this embodiment, the description of the loading progress judging module 115 may specifically refer to the detailed description of step S105 shown in fig. 3. That is, the step S105 may be executed by the loading progress judging module 115.
The loading progress indication module 116 is configured to display or hide an ActivityIndicator control according to the determination result. In this embodiment, the description of the loading progress indication module 116 may specifically refer to the detailed description of the step S106 shown in fig. 3, that is, the step S106 may be implemented by the loading progress indication module 116.
Optionally, in this embodiment, the loading progress indication module 116 may include a first indication submodule 1161 and a second indication submodule 1162.
The first indication sub-module 1161 is configured to display the ActivityIndicator control when the network picture to be loaded is being loaded. In this embodiment, the detailed description of the step S201 shown in fig. 4 may be referred to specifically for the description of the first indication sub-module 1161. That is, the step S201 may be performed by the first indication sub-module 1161.
The second indicating sub-module 1162 is configured to hide the ActivityIndicator control when the network picture to be loaded is loaded. In this embodiment, the detailed description of the step S202 shown in fig. 4 may be referred to specifically for the description of the second indication sub-module 1162. That is, the step S202 may be performed by the second indicating sub-module 1162.
In summary, according to the network picture loading method and device provided by the present invention, the actual size of the network picture to be loaded is obtained, and the preset display size is updated to the actual size, so that the network picture to be loaded is loaded according to the updated display size. Therefore, the problems of incomplete picture loading or picture display deformation caused by inaccurate appointed display size can be avoided.
In the embodiments provided in the present invention, it should be understood that the disclosed system and method can be implemented in other ways. The system and method embodiments described above are merely illustrative, for example, the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, the functional modules in the embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes. It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (6)
1. A network picture loading method is characterized by being applied to an electronic terminal based on a Reactnative platform, wherein the electronic terminal comprises a picture self-adaptive assembly, the picture self-adaptive assembly comprises a render method for calling an Image control, and the render method is used for configuring a method for component class layout; the method comprises the following steps:
setting the display size of the network picture to be loaded in the style attribute in the Image control to be a preset size by a render method in the picture self-adaptive assembly; the style attribute is used for specifying the style of the Image control;
calling a size obtaining instruction of the picture control in the picture self-adaptive assembly, and obtaining the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed;
triggering an Image control to call a resize method in an onLayout attribute, and updating the display size in the style attribute to the actual size;
and loading the network picture to be loaded according to the updated display size.
2. The method for loading network pictures according to claim 1, further comprising:
judging the loading progress of the network picture to be loaded in the picture self-adaptive component;
and displaying or hiding the ActivityIndicator control according to the judgment result.
3. The method according to claim 2, wherein the step of displaying or hiding an ActivityIndicator control according to the determination result comprises:
when the network picture to be loaded is being loaded, displaying the activindicator control;
and hiding the activindicator control when the loading of the network picture to be loaded is finished.
4. A network picture loading device is characterized by being applied to an electronic terminal based on a Reactnative platform, wherein the electronic terminal comprises a picture self-adaptive assembly, the picture self-adaptive assembly comprises a render method for calling an Image control, and the render method is used for configuring a method for component class layout; the device comprises:
the display size setting module is used for setting the display size of the network picture to be loaded in the style attribute in the Image control to be a preset size in the picture self-adaptive assembly through a render method; the style attribute is used for specifying the style of the Image control;
the actual size acquisition module is used for calling a size acquisition instruction of the picture control in the picture self-adaptive assembly and acquiring the actual size of the network picture to be loaded from the source address of the network picture to be loaded before the network picture to be loaded is displayed;
the display size updating module is used for triggering the Image control to call a resize method in the onLayout attribute and updating the display size in the style attribute to the actual size;
and the network picture loading module loads the network picture to be loaded according to the updated display size.
5. The device for loading network pictures according to claim 4, further comprising:
the loading progress judging module is used for judging the loading progress of the network picture to be loaded in the picture self-adaptive assembly;
and the loading progress indication module is used for displaying or hiding the ActivityIndicator control according to the judgment result.
6. The device for loading network pictures according to claim 5, wherein the loading progress indication module comprises:
the first indication sub-module is used for displaying the ActivityIndicator control when the network picture to be loaded is being loaded;
and the second indication sub-module is used for hiding the ActivityIndicator control when the network picture to be loaded is loaded.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710194113.3A CN106886419B (en) | 2017-03-28 | 2017-03-28 | Network picture loading method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710194113.3A CN106886419B (en) | 2017-03-28 | 2017-03-28 | Network picture loading method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106886419A CN106886419A (en) | 2017-06-23 |
| CN106886419B true CN106886419B (en) | 2021-04-27 |
Family
ID=59182226
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710194113.3A Active CN106886419B (en) | 2017-03-28 | 2017-03-28 | Network picture loading method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106886419B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109165049A (en) * | 2018-07-03 | 2019-01-08 | 北京辰森世纪科技股份有限公司 | Module data processing method and processing device |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105511712A (en) * | 2014-09-24 | 2016-04-20 | 阿里巴巴集团控股有限公司 | Method and device for showing picture |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101668255A (en) * | 2008-09-02 | 2010-03-10 | 杨明极 | Self-adaptive method for mobile terminal to display or download pictures through network |
| KR101221495B1 (en) * | 2011-02-28 | 2013-01-11 | 동국대학교 산학협력단 | Contents Adaptive MCTF Using RD Optimization |
| CN102970331B (en) * | 2012-10-26 | 2016-03-30 | 北京奇虎科技有限公司 | Picture provides system |
| CN104599078A (en) * | 2015-02-03 | 2015-05-06 | 浪潮(北京)电子信息产业有限公司 | Data stream processing method and system |
| CN105957014A (en) * | 2016-06-13 | 2016-09-21 | 天脉聚源(北京)传媒科技有限公司 | Picture adaptive display method and apparatus |
-
2017
- 2017-03-28 CN CN201710194113.3A patent/CN106886419B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105511712A (en) * | 2014-09-24 | 2016-04-20 | 阿里巴巴集团控股有限公司 | Method and device for showing picture |
Non-Patent Citations (1)
| Title |
|---|
| React Native - Image组件的使用详解（加载资源、网络、本地图片）;hangge;《https://www.hangge.com/blog/cache/detail_1542.html》;20170221;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106886419A (en) | 2017-06-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI700638B (en) | Display method and device of mixed view | |
| CN107818008B (en) | Page loading method and device | |
| CN109145238B (en) | Card display method and device and mobile device | |
| JP6755969B2 (en) | Payment information processing methods, devices, and user devices | |
| CN112433726A (en) | Echarts chart assembly packaging method and device | |
| CN106909393B (en) | Display adjustment method of input method panel and mobile terminal | |
| CN107479892B (en) | Popup frame view creating method and device and electronic equipment | |
| CN112068911B (en) | Electronic form generation method, device, system, equipment and medium | |
| US20170169599A1 (en) | Methods and electronic devices for displaying picture | |
| CN112800751A (en) | Method, device, equipment and storage medium for configuring and checking mobile terminal webpage form | |
| CN107704242A (en) | The horizontal application method and electronic equipment of a kind of vertically displaying screen | |
| US10061494B2 (en) | Method and device for webpage zooming on electronic apparatus | |
| CN110020371B (en) | Method and device for page layout linkage based on react-native | |
| CN110781425B (en) | Display method, device and equipment of mobile terminal H5 page and storage medium | |
| CN106886419B (en) | Network picture loading method and device | |
| CN109992188B (en) | Method and device for realizing scrolling display of iOS mobile terminal text | |
| CN103809858A (en) | Display method of application icon of terminal and terminal | |
| CN110069254B (en) | Text display method, text display device and server | |
| CN112765505A (en) | Data loading method and device and storage medium | |
| CN110688308A (en) | Memory storage redundancy detection method and device, electronic equipment and readable storage medium | |
| CN107085530B (en) | Method and device for refreshing application interface and mobile terminal | |
| Tang | Beginning Google glass development | |
| US20140157147A1 (en) | Feedback system, feedback method and recording media thereof | |
| CN105373370B (en) | Control display method and device | |
| CN112540817A (en) | Method, device and equipment for displaying startup logo picture and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231108 Address after: Room 606-609, Compound Office Complex Building, No. 757, Dongfeng East Road, Yuexiu District, Guangzhou, Guangdong Province, 510699 Patentee after: China Southern Power Grid Internet Service Co.,Ltd. Address before: 11 / F, building B1, software industry phase 4.1, No.1 Software Park East Road, Donghu Development Zone, Wuhan City, Hubei Province 430205 Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |