网络图片加载方法及装置与流程

本发明涉及计算机技术领域，具体而言，涉及一种网络图片加载方法及装置。

背景技术：

ReactNative是facebook公司提供的一套跨平台移动移动应用开发框架，是UI框架React在原生移动应用平台的衍生物。经发明人研究发现，在ReactNative中，加载网络图片时，必须提前指定图片尺寸，否则无法显示该网络图片。而提前指定图片尺寸要求预先知道图片的尺寸，如果在不清楚图片尺寸的情况下随意指定图片尺寸，会造成该图片加载不完全或者显示变形。即便预先知道图片尺寸，一旦该网络图片发生改变，仍会出现上述图片加载不完全或显示变形的问题。

技术实现要素：

有鉴于此，本发明的目的在于提供一种网络图片加载方法及装置，以改善上述问题。

为了达到上述目的，本发明较佳实施例提供一种网络图片加载方法，应用于基于ReactNative平台的电子终端，所述电子终端包括图片自适应组件，所述方法包括：

在所述图片自适应组件中将待加载网络图片的显示尺寸设置为预设尺寸；

获取所述待加载网络图片的实际尺寸；

将所述显示尺寸更新为所述实际尺寸；

根据更新后的显示尺寸加载所述待加载网络图片。

优选地，在上述网络图片加载方法中，所述图片自适应组件中包括调用图片控件的指令；获取所述待加载网络图片的实际尺寸的步骤，包括：

在所述图片自适应组件中调用所述图片控件的尺寸获取指令，在显示所述待加载网络图片之前从所述待加载网络图片的源地址获取所述待加载网络图片的实际尺寸。

优选地，在上述网络图片加载方法中，将所述显示尺寸更新为所述实际尺寸的步骤，包括：

在所述图片自适应组件中将所述显示尺寸更新为所述实际尺寸，触发所述图片控件调用尺寸重定义指令，将所述图片控件中的显示尺寸更新为所述实际尺寸。

优选地，在上述网络图片加载方法中，所述方法还包括：

在所述图片自适应组件中对所述待加载网络图片的加载进度进行判断；

根据判断结果显示或隐藏ActivityIndicator控件。

优选地，在上述网络图片加载方法中，根据判断结果显示或隐藏ActivityIndicator控件的步骤，包括：

在所述待加载网络图片正在加载时，显示所述ActivityIndicator控件；

在所述待加载网络图片加载完成时，隐藏所述ActivityIndicator控件。

本发明较佳实施例还提供一种网络图片加载装置，应用于基于ReactNative平台的电子终端，所述电子终端包括图片自适应组件的电子终端，所述装置包括：

显示尺寸设置模块，用于通过所述图片自适应组件将待加载网络图片的显示尺寸设置为预设尺寸；

实际尺寸获取模块，用于获取所述待加载网络图片的实际尺寸；

显示尺寸更新模块，用于将所述显示尺寸更新为所述实际尺寸；

网络图片加载模块，根据更新后的显示尺寸加载所述待加载网络图片。

优选地，在上述网络图片加载装置中，所述图片自适应组件中包括调用图片控件的指令；所述实际尺寸获取模块包括：

实际尺寸获取子模块，用于在所述图片自适应组件中调用所述图片控件的尺寸获取指令，在显示所述待加载网络图片之前从所述待加载网络图片的源地址获取所述待加载网络图片的实际尺寸。

优选地，在上述网络图片加载装置中，所述显示尺寸更新模块包括：

显示尺寸更新子模块，用于在所述图片自适应组件中将所述显示尺寸更新为所述实际尺寸，触发所述图片控件调用尺寸重定义指令，将所述图片控件中的显示尺寸更新为所述实际尺寸。

优选地，在上述网络图片加载装置中，所述装置还包括：

加载进度判断模块，用于在所述图片自适应组件中对所述待加载网络图片的加载进度进行判断；

加载进度指示模块，用于根据判断结果显示或隐藏ActivityIndicator控件。

优选地，在上述网络图片加载装置中，所述加载进度指示模块包括：

第一指示模块，用于在所述待加载网络图片正在加载时，显示所述ActivityIndicator控件；

第二指示模块，用于在所述待加载网络图片加载完成时，隐藏所述ActivityIndicator控件。

本发明提供的网络图片加载方法及装置，通过获取待加载网络图片的实际尺寸，并将预设的显示尺寸更新为所述实际尺寸，使得待加载网络图片按照更新后的显示尺寸进行加载。如此，能够避免指定的显示尺寸不准确所造成的图片加载不完全或图片显示变形的问题。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的一种电子终端的方框示意图。

图2为本发明实施例提供的一种网络图片加载方法的流程示意图。

图3为本发明实施例提供的网络图片加载方法的又一流程示意图。

图4为本发明实施例提供的网络图片加载方法的又一流程示意图。

图5为本发明实施例提供的一种网络图片加载装置的连接框图。

图6为本发明实施例提供的网络图片加载装置的又一连接框图。

图标：100-电子终端；110-网络图片加载装置；111-显示尺寸设置模块；112-实际尺寸获取模块；1121-实际尺寸获取子模块；113-显示尺寸更新模块；1131-显示尺寸更新子模块；114-网络图片加载模块；115-加载进度判断模块；116-加载进度指示模块；1161-第一指示子模块；1162-第二指示子模块；120-存储器；130-处理器。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

在本发明的描述中，需要说明的是，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本发明的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

如图1所示，是本发明较佳实施例提供的一种电子终端100的方框示意图。本发明实施例中的电子终端100可以是，但不限于，服务器、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobile Internet device，MID)、智能手机等。本发明实施例中提供的方法及装置用于在电子终端100上加载网络图片。

其中，所述电子终端100包括网络图片加载装置110、存储器120和处理器130。

所述存储器120、处理器130以及各元件之间直接或间接地电性连接，以实现数据传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述处理器130用于执行所述存储器120中存储的可执行模块，例如所述网络图片加载装置110中所包括的软件功能模块及计算机程序。

其中，所述存储器120可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。

所述处理器130可以是一种集成电路芯片，具有信号处理能力。所述处理器130可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

应当理解，图1所示的结构仅为示意，所述电子终端100可以包括比图1所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

如图2所示，是本发明较佳实施例提供的一种网络图片加载方法。所述网络图片加载方法应用于图1所示的电子终端100，所述电子终端100中包括图片自适应组件。本实施例中，所述电子终端100可以是基于ReactNative平台的电子终端100。

下面将对图2所示的方法步骤和具体流程进行详细阐述。

步骤S101：在所述图片自适应组件中将待加载网络图片的显示尺寸设置为预设尺寸。

在ReactNative中，加载网络图片需要调用图片控件Image。现有技术中，加载网络图片可以直接通过以下代码调用图片控件从而实现网络图片的加载。

<Image style＝{{width:100,height:100}}

source＝{{uri：’https://facebook.gitthub.io/react/ig/logo_og.png’}}/>

经发明人研究发现，ReactNative加载网络图片时，必须预先指定图片尺寸才能进行加载。如此，必须要预先知道待加载网络图片的实际尺寸，如果在不清楚待加载网络图片实际尺寸的情况下随意指定显示尺寸的值，会使得待加载网络图片加载不完全或者最终显示出的图片变形。即便知道待加载网络图片的实际尺寸，一旦该图片发生改变，已经获知的尺寸便不再适用，如果继续按照已经获知的实际尺寸进行加载，最终还是会造成图片加载不完全或者显示变形的问题。

在本实施例中，可以自定义一个图片自适应组件，所述图片自适应组件用于调用ReactNative的图片控件对待加载网络图片进行加载，也即，所述图片自适应组件中包括调用所述图片控件的指令。

可选地，所述图片自适应组件可以在render()方法中调用所述图片控件，也即，调用Image控件。例如，可以通过以下代码实现。

其中，render()方法是一个组件类布局方法，其形式为函数，返回值为该render()方法所在组件的具体布局。onLayout、onLoad、onLoadStart以及source是图片控件的默认属性。当图片控件的布局发生改变时，会调用onLayout属性里的resize方法修改图片控件中发生改变的相应属性的值。当网络图片加载完成时，会调用onLoad属性里的onLoad方法。当网络图片开始加载时，会调用onLoadStart属性里的onLoadStart方法。source属性里的this.props.source指的是父组件传递过来的source属性，表示网络图片的源地址，本实施例中，所述源地址可以为URL地址。

style是图片控件Image的样式，height指的是图片的高度，width指的是图片的宽度，this.state.height和this.state.width指的是全局变量。alignItem：’center’表示图片内部的子控件按水平方向居中排布，justifyContent：’center’表示图片内部的子控件按垂直方向居中排布。this..renderChildren()方法表示返回的是图片控件的子控件。

按照ReactNative的规定，图片控件加载网络图片时，需要预先指定待加载网络图片的显示尺寸，也即，需要在所述图片自适应组件中将待加载网络图片的显示尺寸设置为预设尺寸。其中，所述显示尺寸可以包括待加载网络图片的宽和高。

可选地，可以在所述图片自适应组件中定义待加载网络图片的宽和高，并将所述宽和高初始化为预设值。根据实际情况，所述宽和高的初始值可以相同，也可以不同，本实施例对其具体数值不做限制。例如，可以将所述this.state.height和this.state.width初始化为0。

如此，所述图片自适应组件可以对待加载网络图片进行加载。

本实施例中，所述图片自适应组件还用于在待加载网络图片的加载过程中，将所述图片控件中的显示尺寸的值更新为该待加载网络图片的实际尺寸，使该待加载网络图片按照正确的尺寸加载。

步骤S102：获取所述待加载网络图片的实际尺寸。

在ReactNative中，图片控件Image会先将待加载网络图片下载缓存，然后再进行显示。在本实施例中，可以在待加载网络图片的加载过程中获取所述待加载网络图片的实际尺寸，并将所述显示尺寸更新为所述实际尺寸，

可选地，所述步骤S102可以包括以下步骤。

在所述图片自适应组件中调用所述图片控件的尺寸获取指令，在显示所述待加载网络图片之前从所述待加载网络图片的源地址获取所述待加载网络图片的实际尺寸

其中，所述图片控件的尺寸获取指令可以为图片控件中的getSize()方法，所述getSize()方法用于在待加载网络图片显示之前获取所述待加载网络图片的实际尺寸。可选地，所述getSize()可以从所述待加载网络图片的源地址获取该待加载网络图片的实际尺寸。

步骤S103：将所述显示尺寸更新为所述实际尺寸。

在获取到所述待加载网络图片的实际尺寸后，所述图片自适应组件将图片控件对象中的显示尺寸修改为获取到的实际尺寸，使所述待加载网络图片按照更新后的显示尺寸进行加载。

可选地，所述步骤S103可以包括以下步骤。

在所述图片自适应组件中将所述显示尺寸更新为所述实际尺寸，触发所述图片控件调用尺寸重定义指令，将所述图片控件中的显示尺寸更新为所述实际尺寸。

在本实施例中，所述图片自适应组件可以调用this.setState()方法将组件内的所述待加载网络图片的显示尺寸更新为所述实际尺寸。

可选地，本实施例中，获取待加载网络图片的尺寸并队组件内待加载网络图片的显示尺寸进行修改的步骤可以通过以下代码实现。

Image.getSize(this.props.source.uri，(width，height)＝>{this.setState({height：height，width：width})})

其中，setState()方法的调用会触发图片控件Image调用onLayout属性中的resize()方法，对图片控件对象中的显示尺寸进行重定义。也即，this.state.height和this.state.width的值更新为所述实际尺寸。

步骤S104：根据更新后的显示尺寸加载所述待加载网络图片。

本实施例中，通过所述步骤S102和步骤S103可以在显示所述待加载网络图片之前，将预先指定的显示尺寸的值修改为所述待加载网络图片的实际尺寸，如此，在所述待加载图片加载完成后即可显示出正确完整的图片。并且，由于本实施例在显示所述待加载图片之前对显示尺寸进行更改，也即，在加载图片的过程中对显示尺寸进行更改，不会影响用户体验。

需要说明的是，在ReactNative中，对组件内数据进行修改的操作通常在componentDidMount()方法中进行，因此，本实施例中，实现所述步骤S102和步骤S103的相关指令可以在componentDidMount()方法中调用执行。

请参阅图3，可选地，所述网络图片加载方法还可以包括步骤S105和步骤S106。

步骤S105：在所述图片自适应组件中对所述待加载网络图片的加载进度进行判断。

实施时，从待加载网图片开始加载到加载完成并将图片显示出来需要一段时间，为了提高用户体验度，可以在这段时间内对待加载网络图片的加载进度进行显示。

可选地，在ReactNative中，当网络图片开始加载时会调用onLoadStart方法，如此，可以在onLoadStart方法中调用setState()方法设置加载进度指示值isLoading，将进度指示值isLoading设置为true。本实施例中，在网络图片开始加载时将进度指示值设置为true可以通过代码this.setState(isLoading：true)实现。

当网络图片加载完成时会调用onLoad方法，如此，可以在onLoad方法中调用setState()方法将加载进度指示值isLoading设置为false。本实施例中，在网络图片加载完成时将进度指示值isLoading设置为false可以通过代码this.setState(isLoading：false)。

如此，根据isLoading的值即可判断网络图片的加载进度。

步骤S106：根据判断结果显示或隐藏ActivityIndicator控件。

可选地，如图4所示，在本实施例中，所述步骤S106可以包括步骤S201和步骤S202两个子步骤。

步骤S201：在所述待加载网络图片正在加载时，显示所述ActivityIndicator控件。

步骤S202：在所述待加载网络图片加载完成时，隐藏所述ActivityIndicator控件。

在本实施例中，所述步骤S201和步骤S202可以通过以下代码实现。

if(this.state.isLoading){return<ActivityIndicator/>}

也即，当所述isLoading的值为true时，表示所述待加载网络图片正在加载，此时，调用所述ActivityIndicator控件显示一进度加载圈，所述加载进度全会不停地转动，以提示用户当前正在加载所述待加载网络图片。

当所述isLoading的值为false时，表示所述待加载网络图片已经加载完成，此时隐藏所述ActivityIndicator控件，不再继续显示所述加载进度圈，以提示用户所述待加载网络图片已经加载完成。

this.renderChildren()方法用于返回图片控件的子控件，因此，在本实施例中，实现所述步骤S201和步骤S202的相关指令可以在this.renderChildren()方法中调用执行，如此，可以在isLoading的值为false时返回ActivityIndicator控件，从而显示出加载进度圈。

请参阅图5，是本发明较佳实施例提供的一种网络图片加载装置110。所述网络图片加载装置110应用于图1所示的电子终端100，所述电子终端100中包括图片自适应组件。本实施例中，所述电子终端100可以是基于ReactNative平台的电子终端100。

所述网络图片加载装置110包括显示尺寸获取模块、实际尺寸获取模块112、显示尺寸更新模块113以及网络图片加载模块114。

其中，所述显示尺寸设置模块111用于通过所述图片自适应组件将待加载网络图片的显示尺寸设置为预设尺寸。在本实施例中，关于所述显示尺寸设置模块111的描述具体可参考对图2所示步骤S101的详细描述，也即，所述步骤S101可以由所述显示尺寸设置模块111执行。

所述实际尺寸获取模块112用于获取所述待加载网络图片的实际尺寸。在本实施例中，关于所述实际尺寸获取模块112的描述具体可参考对图2中所示步骤S102的详细描述，也即，所述步骤S102可以由所述实际尺寸获取模块112执行。

可选地，在本实施例中，所述图片自适应组件中包括调用图片控件的指令。所述实际尺寸获取模块112可以包括实际尺寸获取子模块1121。

所述实际尺寸获取子模块1121用于在所述图片自适应组件中调用所述图片控件的尺寸获取指令，在显示所述待加载网络图片之前从所述待加载网络图片的源地址获取所述待加载网络图片的实际尺寸。

在本实施例中，关于所述实际尺寸获取子模块1121的描述具体可参考上述内容中对有关步骤的详细阐述。

所述显示尺寸更新模块113用于将所述显示尺寸更新为所述实际尺寸。在本实施例中，关于所述显示尺寸更新模块113的描述具体可参考对图2中所示步骤S103的详细描述，也即，所述步骤S103可以由所述显示尺寸更新模块113执行。

可选地，在本实施例中，所述显示尺寸更新模块113可以包括显示尺寸更新子模块1131。

所述显示尺寸更新子模块1131用于在所述图片自适应组件中将所述显示尺寸更新为所述实际尺寸，触发所述图片控件调用尺寸重定义指令，将所述图片控件中的显示尺寸更新为所述实际尺寸。

在本实施例中，关于所述显示尺寸更新子模块1131的描述具体可参考上述内容中对有关步骤的详细阐述。

所述网络图片加载模块114用于根据更新后的显示尺寸加载所述待加载网络图片。在本实施例中，关于所述网络图片加载模块114的描述具体可参考对图2中所示步骤S104的详细描述，也即，所述步骤S104可以由所述网络图片加载模块114执行。

可选地，请参阅图6，本实施例中，所述网络图片加载装置110还可以包括加载进度判断模块115和加载进度只是模块。

其中，所述加载进度判断模块115用于在所述图片自适应组件中对所述待加载网络图片的加载进度进行判断。在本实施例中，关于所述加载进度判断模块115的描述具体可参考对图3中所示步骤S105的详细描述。也即，所述步骤S105可以由所述加载进度判断模块115执行。

所述加载进度指示模块116，用于根据判断结果显示或隐藏ActivityIndicator控件。在本实施例中，关于所述加载进度指示模块116的描述具体可参考对图3中所示的步骤S106的详细描述，也即，所述步骤S106可以由所述加载进度指示模块116实现。

可选地，在本实施例中，所述加载进度指示模块116可以包括第一指示子模块1161和第二指示子模块1162。

其中，所述第一指示子模块1161用于在所述待加载网络图片正在加载时，显示所述ActivityIndicator控件。在本实施例中，关于所述第一指示子模块1161的描述具体可参考对图4中所示的步骤S201的详细描述。也即，所述步骤S201可以由所述第一指示子模块1161执行。

所述第二指示子模块1162用于在所述待加载网络图片加载完成时，隐藏所述ActivityIndicator控件。在本实施例中，关于所述第二指示子模块1162的描述具体可参考对图4中所示的步骤S202的详细描述。也即，所述步骤S202可以由所述第二指示子模块1162执行。

综上所述，本发明提供的网络图片加载方法及装置，通过获取待加载网络图片的实际尺寸，并将预设的显示尺寸更新为所述实际尺寸，使得待加载网络图片按照更新后的显示尺寸进行加载。如此，能够避免指定的显示尺寸不准确所造成的图片加载不完全或图片显示变形的问题。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的系统和方法，也可以通过其它的方式实现。以上所描述的系统和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。