本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)絡(luò)圖片加載方法及裝置。

背景技術(shù)：

ReactNative是facebook公司提供的一套跨平臺(tái)移動(dòng)移動(dòng)應(yīng)用開(kāi)發(fā)框架，是UI框架React在原生移動(dòng)應(yīng)用平臺(tái)的衍生物。經(jīng)發(fā)明人研究發(fā)現(xiàn)，在ReactNative中，加載網(wǎng)絡(luò)圖片時(shí)，必須提前指定圖片尺寸，否則無(wú)法顯示該網(wǎng)絡(luò)圖片。而提前指定圖片尺寸要求預(yù)先知道圖片的尺寸，如果在不清楚圖片尺寸的情況下隨意指定圖片尺寸，會(huì)造成該圖片加載不完全或者顯示變形。即便預(yù)先知道圖片尺寸，一旦該網(wǎng)絡(luò)圖片發(fā)生改變，仍會(huì)出現(xiàn)上述圖片加載不完全或顯示變形的問(wèn)題。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明的目的在于提供一種網(wǎng)絡(luò)圖片加載方法及裝置，以改善上述問(wèn)題。

為了達(dá)到上述目的，本發(fā)明較佳實(shí)施例提供一種網(wǎng)絡(luò)圖片加載方法，應(yīng)用于基于ReactNative平臺(tái)的電子終端，所述電子終端包括圖片自適應(yīng)組件，所述方法包括：

在所述圖片自適應(yīng)組件中將待加載網(wǎng)絡(luò)圖片的顯示尺寸設(shè)置為預(yù)設(shè)尺寸；

獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸；

將所述顯示尺寸更新為所述實(shí)際尺寸；

根據(jù)更新后的顯示尺寸加載所述待加載網(wǎng)絡(luò)圖片。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載方法中，所述圖片自適應(yīng)組件中包括調(diào)用圖片控件的指令；獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸的步驟，包括：

在所述圖片自適應(yīng)組件中調(diào)用所述圖片控件的尺寸獲取指令，在顯示所述待加載網(wǎng)絡(luò)圖片之前從所述待加載網(wǎng)絡(luò)圖片的源地址獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載方法中，將所述顯示尺寸更新為所述實(shí)際尺寸的步驟，包括：

在所述圖片自適應(yīng)組件中將所述顯示尺寸更新為所述實(shí)際尺寸，觸發(fā)所述圖片控件調(diào)用尺寸重定義指令，將所述圖片控件中的顯示尺寸更新為所述實(shí)際尺寸。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載方法中，所述方法還包括：

在所述圖片自適應(yīng)組件中對(duì)所述待加載網(wǎng)絡(luò)圖片的加載進(jìn)度進(jìn)行判斷；

根據(jù)判斷結(jié)果顯示或隱藏ActivityIndicator控件。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載方法中，根據(jù)判斷結(jié)果顯示或隱藏ActivityIndicator控件的步驟，包括：

在所述待加載網(wǎng)絡(luò)圖片正在加載時(shí)，顯示所述ActivityIndicator控件；

在所述待加載網(wǎng)絡(luò)圖片加載完成時(shí)，隱藏所述ActivityIndicator控件。

本發(fā)明較佳實(shí)施例還提供一種網(wǎng)絡(luò)圖片加載裝置，應(yīng)用于基于ReactNative平臺(tái)的電子終端，所述電子終端包括圖片自適應(yīng)組件的電子終端，所述裝置包括：

顯示尺寸設(shè)置模塊，用于通過(guò)所述圖片自適應(yīng)組件將待加載網(wǎng)絡(luò)圖片的顯示尺寸設(shè)置為預(yù)設(shè)尺寸；

實(shí)際尺寸獲取模塊，用于獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸；

顯示尺寸更新模塊，用于將所述顯示尺寸更新為所述實(shí)際尺寸；

網(wǎng)絡(luò)圖片加載模塊，根據(jù)更新后的顯示尺寸加載所述待加載網(wǎng)絡(luò)圖片。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載裝置中，所述圖片自適應(yīng)組件中包括調(diào)用圖片控件的指令；所述實(shí)際尺寸獲取模塊包括：

實(shí)際尺寸獲取子模塊，用于在所述圖片自適應(yīng)組件中調(diào)用所述圖片控件的尺寸獲取指令，在顯示所述待加載網(wǎng)絡(luò)圖片之前從所述待加載網(wǎng)絡(luò)圖片的源地址獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載裝置中，所述顯示尺寸更新模塊包括：

顯示尺寸更新子模塊，用于在所述圖片自適應(yīng)組件中將所述顯示尺寸更新為所述實(shí)際尺寸，觸發(fā)所述圖片控件調(diào)用尺寸重定義指令，將所述圖片控件中的顯示尺寸更新為所述實(shí)際尺寸。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載裝置中，所述裝置還包括：

加載進(jìn)度判斷模塊，用于在所述圖片自適應(yīng)組件中對(duì)所述待加載網(wǎng)絡(luò)圖片的加載進(jìn)度進(jìn)行判斷；

加載進(jìn)度指示模塊，用于根據(jù)判斷結(jié)果顯示或隱藏ActivityIndicator控件。

優(yōu)選地，在上述網(wǎng)絡(luò)圖片加載裝置中，所述加載進(jìn)度指示模塊包括：

第一指示模塊，用于在所述待加載網(wǎng)絡(luò)圖片正在加載時(shí)，顯示所述ActivityIndicator控件；

第二指示模塊，用于在所述待加載網(wǎng)絡(luò)圖片加載完成時(shí)，隱藏所述ActivityIndicator控件。

本發(fā)明提供的網(wǎng)絡(luò)圖片加載方法及裝置，通過(guò)獲取待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，并將預(yù)設(shè)的顯示尺寸更新為所述實(shí)際尺寸，使得待加載網(wǎng)絡(luò)圖片按照更新后的顯示尺寸進(jìn)行加載。如此，能夠避免指定的顯示尺寸不準(zhǔn)確所造成的圖片加載不完全或圖片顯示變形的問(wèn)題。

附圖說(shuō)明

為了更清楚地說(shuō)明本發(fā)明實(shí)施例的技術(shù)方案，下面將對(duì)實(shí)施例中所需要使用的附圖作簡(jiǎn)單地介紹，應(yīng)當(dāng)理解，以下附圖僅示出了本發(fā)明的某些實(shí)施例，因此不應(yīng)被看作是對(duì)范圍的限定，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1為本發(fā)明實(shí)施例提供的一種電子終端的方框示意圖。

圖2為本發(fā)明實(shí)施例提供的一種網(wǎng)絡(luò)圖片加載方法的流程示意圖。

圖3為本發(fā)明實(shí)施例提供的網(wǎng)絡(luò)圖片加載方法的又一流程示意圖。

圖4為本發(fā)明實(shí)施例提供的網(wǎng)絡(luò)圖片加載方法的又一流程示意圖。

圖5為本發(fā)明實(shí)施例提供的一種網(wǎng)絡(luò)圖片加載裝置的連接框圖。

圖6為本發(fā)明實(shí)施例提供的網(wǎng)絡(luò)圖片加載裝置的又一連接框圖。

圖標(biāo)：100-電子終端；110-網(wǎng)絡(luò)圖片加載裝置；111-顯示尺寸設(shè)置模塊；112-實(shí)際尺寸獲取模塊；1121-實(shí)際尺寸獲取子模塊；113-顯示尺寸更新模塊；1131-顯示尺寸更新子模塊；114-網(wǎng)絡(luò)圖片加載模塊；115-加載進(jìn)度判斷模塊；116-加載進(jìn)度指示模塊；1161-第一指示子模塊；1162-第二指示子模塊；120-存儲(chǔ)器；130-處理器。

具體實(shí)施方式

為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。通常在此處附圖中描述和示出的本發(fā)明實(shí)施例的組件可以以各種不同的配置來(lái)布置和設(shè)計(jì)。

因此，以下對(duì)在附圖中提供的本發(fā)明的實(shí)施例的詳細(xì)描述并非旨在限制要求保護(hù)的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

應(yīng)注意到：相似的標(biāo)號(hào)和字母在下面的附圖中表示類似項(xiàng)，因此，一旦某一項(xiàng)在一個(gè)附圖中被定義，則在隨后的附圖中不需要對(duì)其進(jìn)行進(jìn)一步定義和解釋。

在本發(fā)明的描述中，需要說(shuō)明的是，術(shù)語(yǔ)“第一”、“第二”、“第三”等僅用于區(qū)分描述，而不能理解為指示或暗示相對(duì)重要性。

在本發(fā)明的描述中，還需要說(shuō)明的是，除非另有明確的規(guī)定和限定，術(shù)語(yǔ)“設(shè)置”、“安裝”、“相連”、“連接”應(yīng)做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機(jī)械連接，也可以是電連接；可以是直接相連，也可以通過(guò)中間媒介間接相連，可以是兩個(gè)元件內(nèi)部的連通。對(duì)于本領(lǐng)域的普通技術(shù)人員而言，可以具體情況理解上述術(shù)語(yǔ)在本發(fā)明中的具體含義。

如圖1所示，是本發(fā)明較佳實(shí)施例提供的一種電子終端100的方框示意圖。本發(fā)明實(shí)施例中的電子終端100可以是，但不限于，服務(wù)器、個(gè)人電腦(personal computer，PC)、平板電腦、個(gè)人數(shù)字助理(personal digital assistant，PDA)、移動(dòng)上網(wǎng)設(shè)備(mobile Internet device，MID)、智能手機(jī)等。本發(fā)明實(shí)施例中提供的方法及裝置用于在電子終端100上加載網(wǎng)絡(luò)圖片。

其中，所述電子終端100包括網(wǎng)絡(luò)圖片加載裝置110、存儲(chǔ)器120和處理器130。

所述存儲(chǔ)器120、處理器130以及各元件之間直接或間接地電性連接，以實(shí)現(xiàn)數(shù)據(jù)傳輸或交互。例如，這些元件相互之間可通過(guò)一條或多條通訊總線或信號(hào)線實(shí)現(xiàn)電性連接。所述處理器130用于執(zhí)行所述存儲(chǔ)器120中存儲(chǔ)的可執(zhí)行模塊，例如所述網(wǎng)絡(luò)圖片加載裝置110中所包括的軟件功能模塊及計(jì)算機(jī)程序。

其中，所述存儲(chǔ)器120可以是，但不限于，隨機(jī)存取存儲(chǔ)器(Random Access Memory，RAM)，只讀存儲(chǔ)器(Read Only Memory，ROM)，可編程只讀存儲(chǔ)器(Programmable Read-Only Memory，PROM)，可擦除只讀存儲(chǔ)器(Erasable Programmable Read-Only Memory，EPROM)，電可擦除只讀存儲(chǔ)器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存儲(chǔ)器120用于存儲(chǔ)程序，所述處理器130在接收到執(zhí)行指令后，執(zhí)行所述程序。

所述處理器130可以是一種集成電路芯片，具有信號(hào)處理能力。所述處理器130可以是通用處理器，包括中央處理器(Central Processing Unit，CPU)、網(wǎng)絡(luò)處理器(Network Processor，NP)等；還可以是數(shù)字信號(hào)處理器(DSP)、專用集成電路(ASIC)、現(xiàn)場(chǎng)可編程門陣列(FPGA)或者其他可編程邏輯器件、分立門或者晶體管邏輯器件、分立硬件組件?？梢詫?shí)現(xiàn)或者執(zhí)行本發(fā)明實(shí)施例中的公開(kāi)的各方法、步驟及邏輯框圖。通用處理器可以是微處理器或者該處理器也可以是任何常規(guī)的處理器等。

應(yīng)當(dāng)理解，圖1所示的結(jié)構(gòu)僅為示意，所述電子終端100可以包括比圖1所示更多或者更少的組件，或者具有與圖1所示不同的配置。圖1中所示的各組件可以采用硬件、軟件或其組合實(shí)現(xiàn)。

如圖2所示，是本發(fā)明較佳實(shí)施例提供的一種網(wǎng)絡(luò)圖片加載方法。所述網(wǎng)絡(luò)圖片加載方法應(yīng)用于圖1所示的電子終端100，所述電子終端100中包括圖片自適應(yīng)組件。本實(shí)施例中，所述電子終端100可以是基于ReactNative平臺(tái)的電子終端100。

下面將對(duì)圖2所示的方法步驟和具體流程進(jìn)行詳細(xì)闡述。

步驟S101：在所述圖片自適應(yīng)組件中將待加載網(wǎng)絡(luò)圖片的顯示尺寸設(shè)置為預(yù)設(shè)尺寸。

在ReactNative中，加載網(wǎng)絡(luò)圖片需要調(diào)用圖片控件Image。現(xiàn)有技術(shù)中，加載網(wǎng)絡(luò)圖片可以直接通過(guò)以下代碼調(diào)用圖片控件從而實(shí)現(xiàn)網(wǎng)絡(luò)圖片的加載。

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

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

經(jīng)發(fā)明人研究發(fā)現(xiàn)，ReactNative加載網(wǎng)絡(luò)圖片時(shí)，必須預(yù)先指定圖片尺寸才能進(jìn)行加載。如此，必須要預(yù)先知道待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，如果在不清楚待加載網(wǎng)絡(luò)圖片實(shí)際尺寸的情況下隨意指定顯示尺寸的值，會(huì)使得待加載網(wǎng)絡(luò)圖片加載不完全或者最終顯示出的圖片變形。即便知道待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，一旦該圖片發(fā)生改變，已經(jīng)獲知的尺寸便不再適用，如果繼續(xù)按照已經(jīng)獲知的實(shí)際尺寸進(jìn)行加載，最終還是會(huì)造成圖片加載不完全或者顯示變形的問(wèn)題。

在本實(shí)施例中，可以自定義一個(gè)圖片自適應(yīng)組件，所述圖片自適應(yīng)組件用于調(diào)用ReactNative的圖片控件對(duì)待加載網(wǎng)絡(luò)圖片進(jìn)行加載，也即，所述圖片自適應(yīng)組件中包括調(diào)用所述圖片控件的指令。

可選地，所述圖片自適應(yīng)組件可以在render()方法中調(diào)用所述圖片控件，也即，調(diào)用Image控件。例如，可以通過(guò)以下代碼實(shí)現(xiàn)。

其中，render()方法是一個(gè)組件類布局方法，其形式為函數(shù)，返回值為該render()方法所在組件的具體布局。onLayout、onLoad、onLoadStart以及source是圖片控件的默認(rèn)屬性。當(dāng)圖片控件的布局發(fā)生改變時(shí)，會(huì)調(diào)用onLayout屬性里的resize方法修改圖片控件中發(fā)生改變的相應(yīng)屬性的值。當(dāng)網(wǎng)絡(luò)圖片加載完成時(shí)，會(huì)調(diào)用onLoad屬性里的onLoad方法。當(dāng)網(wǎng)絡(luò)圖片開(kāi)始加載時(shí)，會(huì)調(diào)用onLoadStart屬性里的onLoadStart方法。source屬性里的this.props.source指的是父組件傳遞過(guò)來(lái)的source屬性，表示網(wǎng)絡(luò)圖片的源地址，本實(shí)施例中，所述源地址可以為URL地址。

style是圖片控件Image的樣式，height指的是圖片的高度，width指的是圖片的寬度，this.state.height和this.state.width指的是全局變量。alignItem：’center’表示圖片內(nèi)部的子控件按水平方向居中排布，justifyContent：’center’表示圖片內(nèi)部的子控件按垂直方向居中排布。this..renderChildren()方法表示返回的是圖片控件的子控件。

按照ReactNative的規(guī)定，圖片控件加載網(wǎng)絡(luò)圖片時(shí)，需要預(yù)先指定待加載網(wǎng)絡(luò)圖片的顯示尺寸，也即，需要在所述圖片自適應(yīng)組件中將待加載網(wǎng)絡(luò)圖片的顯示尺寸設(shè)置為預(yù)設(shè)尺寸。其中，所述顯示尺寸可以包括待加載網(wǎng)絡(luò)圖片的寬和高。

可選地，可以在所述圖片自適應(yīng)組件中定義待加載網(wǎng)絡(luò)圖片的寬和高，并將所述寬和高初始化為預(yù)設(shè)值。根據(jù)實(shí)際情況，所述寬和高的初始值可以相同，也可以不同，本實(shí)施例對(duì)其具體數(shù)值不做限制。例如，可以將所述this.state.height和this.state.width初始化為0。

如此，所述圖片自適應(yīng)組件可以對(duì)待加載網(wǎng)絡(luò)圖片進(jìn)行加載。

本實(shí)施例中，所述圖片自適應(yīng)組件還用于在待加載網(wǎng)絡(luò)圖片的加載過(guò)程中，將所述圖片控件中的顯示尺寸的值更新為該待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，使該待加載網(wǎng)絡(luò)圖片按照正確的尺寸加載。

步驟S102：獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。

在ReactNative中，圖片控件Image會(huì)先將待加載網(wǎng)絡(luò)圖片下載緩存，然后再進(jìn)行顯示。在本實(shí)施例中，可以在待加載網(wǎng)絡(luò)圖片的加載過(guò)程中獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，并將所述顯示尺寸更新為所述實(shí)際尺寸，

可選地，所述步驟S102可以包括以下步驟。

在所述圖片自適應(yīng)組件中調(diào)用所述圖片控件的尺寸獲取指令，在顯示所述待加載網(wǎng)絡(luò)圖片之前從所述待加載網(wǎng)絡(luò)圖片的源地址獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸

其中，所述圖片控件的尺寸獲取指令可以為圖片控件中的getSize()方法，所述getSize()方法用于在待加載網(wǎng)絡(luò)圖片顯示之前獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。可選地，所述getSize()可以從所述待加載網(wǎng)絡(luò)圖片的源地址獲取該待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。

步驟S103：將所述顯示尺寸更新為所述實(shí)際尺寸。

在獲取到所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸后，所述圖片自適應(yīng)組件將圖片控件對(duì)象中的顯示尺寸修改為獲取到的實(shí)際尺寸，使所述待加載網(wǎng)絡(luò)圖片按照更新后的顯示尺寸進(jìn)行加載。

可選地，所述步驟S103可以包括以下步驟。

在所述圖片自適應(yīng)組件中將所述顯示尺寸更新為所述實(shí)際尺寸，觸發(fā)所述圖片控件調(diào)用尺寸重定義指令，將所述圖片控件中的顯示尺寸更新為所述實(shí)際尺寸。

在本實(shí)施例中，所述圖片自適應(yīng)組件可以調(diào)用this.setState()方法將組件內(nèi)的所述待加載網(wǎng)絡(luò)圖片的顯示尺寸更新為所述實(shí)際尺寸。

可選地，本實(shí)施例中，獲取待加載網(wǎng)絡(luò)圖片的尺寸并隊(duì)組件內(nèi)待加載網(wǎng)絡(luò)圖片的顯示尺寸進(jìn)行修改的步驟可以通過(guò)以下代碼實(shí)現(xiàn)。

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

其中，setState()方法的調(diào)用會(huì)觸發(fā)圖片控件Image調(diào)用onLayout屬性中的resize()方法，對(duì)圖片控件對(duì)象中的顯示尺寸進(jìn)行重定義。也即，this.state.height和this.state.width的值更新為所述實(shí)際尺寸。

步驟S104：根據(jù)更新后的顯示尺寸加載所述待加載網(wǎng)絡(luò)圖片。

本實(shí)施例中，通過(guò)所述步驟S102和步驟S103可以在顯示所述待加載網(wǎng)絡(luò)圖片之前，將預(yù)先指定的顯示尺寸的值修改為所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，如此，在所述待加載圖片加載完成后即可顯示出正確完整的圖片。并且，由于本實(shí)施例在顯示所述待加載圖片之前對(duì)顯示尺寸進(jìn)行更改，也即，在加載圖片的過(guò)程中對(duì)顯示尺寸進(jìn)行更改，不會(huì)影響用戶體驗(yàn)。

需要說(shuō)明的是，在ReactNative中，對(duì)組件內(nèi)數(shù)據(jù)進(jìn)行修改的操作通常在componentDidMount()方法中進(jìn)行，因此，本實(shí)施例中，實(shí)現(xiàn)所述步驟S102和步驟S103的相關(guān)指令可以在componentDidMount()方法中調(diào)用執(zhí)行。

請(qǐng)參閱圖3，可選地，所述網(wǎng)絡(luò)圖片加載方法還可以包括步驟S105和步驟S106。

步驟S105：在所述圖片自適應(yīng)組件中對(duì)所述待加載網(wǎng)絡(luò)圖片的加載進(jìn)度進(jìn)行判斷。

實(shí)施時(shí)，從待加載網(wǎng)圖片開(kāi)始加載到加載完成并將圖片顯示出來(lái)需要一段時(shí)間，為了提高用戶體驗(yàn)度，可以在這段時(shí)間內(nèi)對(duì)待加載網(wǎng)絡(luò)圖片的加載進(jìn)度進(jìn)行顯示。

可選地，在ReactNative中，當(dāng)網(wǎng)絡(luò)圖片開(kāi)始加載時(shí)會(huì)調(diào)用onLoadStart方法，如此，可以在onLoadStart方法中調(diào)用setState()方法設(shè)置加載進(jìn)度指示值isLoading，將進(jìn)度指示值isLoading設(shè)置為true。本實(shí)施例中，在網(wǎng)絡(luò)圖片開(kāi)始加載時(shí)將進(jìn)度指示值設(shè)置為true可以通過(guò)代碼this.setState(isLoading：true)實(shí)現(xiàn)。

當(dāng)網(wǎng)絡(luò)圖片加載完成時(shí)會(huì)調(diào)用onLoad方法，如此，可以在onLoad方法中調(diào)用setState()方法將加載進(jìn)度指示值isLoading設(shè)置為false。本實(shí)施例中，在網(wǎng)絡(luò)圖片加載完成時(shí)將進(jìn)度指示值isLoading設(shè)置為false可以通過(guò)代碼this.setState(isLoading：false)。

如此，根據(jù)isLoading的值即可判斷網(wǎng)絡(luò)圖片的加載進(jìn)度。

步驟S106：根據(jù)判斷結(jié)果顯示或隱藏ActivityIndicator控件。

可選地，如圖4所示，在本實(shí)施例中，所述步驟S106可以包括步驟S201和步驟S202兩個(gè)子步驟。

步驟S201：在所述待加載網(wǎng)絡(luò)圖片正在加載時(shí)，顯示所述ActivityIndicator控件。

步驟S202：在所述待加載網(wǎng)絡(luò)圖片加載完成時(shí)，隱藏所述ActivityIndicator控件。

在本實(shí)施例中，所述步驟S201和步驟S202可以通過(guò)以下代碼實(shí)現(xiàn)。

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

也即，當(dāng)所述isLoading的值為true時(shí)，表示所述待加載網(wǎng)絡(luò)圖片正在加載，此時(shí)，調(diào)用所述ActivityIndicator控件顯示一進(jìn)度加載圈，所述加載進(jìn)度全會(huì)不停地轉(zhuǎn)動(dòng)，以提示用戶當(dāng)前正在加載所述待加載網(wǎng)絡(luò)圖片。

當(dāng)所述isLoading的值為false時(shí)，表示所述待加載網(wǎng)絡(luò)圖片已經(jīng)加載完成，此時(shí)隱藏所述ActivityIndicator控件，不再繼續(xù)顯示所述加載進(jìn)度圈，以提示用戶所述待加載網(wǎng)絡(luò)圖片已經(jīng)加載完成。

this.renderChildren()方法用于返回圖片控件的子控件，因此，在本實(shí)施例中，實(shí)現(xiàn)所述步驟S201和步驟S202的相關(guān)指令可以在this.renderChildren()方法中調(diào)用執(zhí)行，如此，可以在isLoading的值為false時(shí)返回ActivityIndicator控件，從而顯示出加載進(jìn)度圈。

請(qǐng)參閱圖5，是本發(fā)明較佳實(shí)施例提供的一種網(wǎng)絡(luò)圖片加載裝置110。所述網(wǎng)絡(luò)圖片加載裝置110應(yīng)用于圖1所示的電子終端100，所述電子終端100中包括圖片自適應(yīng)組件。本實(shí)施例中，所述電子終端100可以是基于ReactNative平臺(tái)的電子終端100。

所述網(wǎng)絡(luò)圖片加載裝置110包括顯示尺寸獲取模塊、實(shí)際尺寸獲取模塊112、顯示尺寸更新模塊113以及網(wǎng)絡(luò)圖片加載模塊114。

其中，所述顯示尺寸設(shè)置模塊111用于通過(guò)所述圖片自適應(yīng)組件將待加載網(wǎng)絡(luò)圖片的顯示尺寸設(shè)置為預(yù)設(shè)尺寸。在本實(shí)施例中，關(guān)于所述顯示尺寸設(shè)置模塊111的描述具體可參考對(duì)圖2所示步驟S101的詳細(xì)描述，也即，所述步驟S101可以由所述顯示尺寸設(shè)置模塊111執(zhí)行。

所述實(shí)際尺寸獲取模塊112用于獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。在本實(shí)施例中，關(guān)于所述實(shí)際尺寸獲取模塊112的描述具體可參考對(duì)圖2中所示步驟S102的詳細(xì)描述，也即，所述步驟S102可以由所述實(shí)際尺寸獲取模塊112執(zhí)行。

可選地，在本實(shí)施例中，所述圖片自適應(yīng)組件中包括調(diào)用圖片控件的指令。所述實(shí)際尺寸獲取模塊112可以包括實(shí)際尺寸獲取子模塊1121。

所述實(shí)際尺寸獲取子模塊1121用于在所述圖片自適應(yīng)組件中調(diào)用所述圖片控件的尺寸獲取指令，在顯示所述待加載網(wǎng)絡(luò)圖片之前從所述待加載網(wǎng)絡(luò)圖片的源地址獲取所述待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸。

在本實(shí)施例中，關(guān)于所述實(shí)際尺寸獲取子模塊1121的描述具體可參考上述內(nèi)容中對(duì)有關(guān)步驟的詳細(xì)闡述。

所述顯示尺寸更新模塊113用于將所述顯示尺寸更新為所述實(shí)際尺寸。在本實(shí)施例中，關(guān)于所述顯示尺寸更新模塊113的描述具體可參考對(duì)圖2中所示步驟S103的詳細(xì)描述，也即，所述步驟S103可以由所述顯示尺寸更新模塊113執(zhí)行。

可選地，在本實(shí)施例中，所述顯示尺寸更新模塊113可以包括顯示尺寸更新子模塊1131。

所述顯示尺寸更新子模塊1131用于在所述圖片自適應(yīng)組件中將所述顯示尺寸更新為所述實(shí)際尺寸，觸發(fā)所述圖片控件調(diào)用尺寸重定義指令，將所述圖片控件中的顯示尺寸更新為所述實(shí)際尺寸。

在本實(shí)施例中，關(guān)于所述顯示尺寸更新子模塊1131的描述具體可參考上述內(nèi)容中對(duì)有關(guān)步驟的詳細(xì)闡述。

所述網(wǎng)絡(luò)圖片加載模塊114用于根據(jù)更新后的顯示尺寸加載所述待加載網(wǎng)絡(luò)圖片。在本實(shí)施例中，關(guān)于所述網(wǎng)絡(luò)圖片加載模塊114的描述具體可參考對(duì)圖2中所示步驟S104的詳細(xì)描述，也即，所述步驟S104可以由所述網(wǎng)絡(luò)圖片加載模塊114執(zhí)行。

可選地，請(qǐng)參閱圖6，本實(shí)施例中，所述網(wǎng)絡(luò)圖片加載裝置110還可以包括加載進(jìn)度判斷模塊115和加載進(jìn)度只是模塊。

其中，所述加載進(jìn)度判斷模塊115用于在所述圖片自適應(yīng)組件中對(duì)所述待加載網(wǎng)絡(luò)圖片的加載進(jìn)度進(jìn)行判斷。在本實(shí)施例中，關(guān)于所述加載進(jìn)度判斷模塊115的描述具體可參考對(duì)圖3中所示步驟S105的詳細(xì)描述。也即，所述步驟S105可以由所述加載進(jìn)度判斷模塊115執(zhí)行。

所述加載進(jìn)度指示模塊116，用于根據(jù)判斷結(jié)果顯示或隱藏ActivityIndicator控件。在本實(shí)施例中，關(guān)于所述加載進(jìn)度指示模塊116的描述具體可參考對(duì)圖3中所示的步驟S106的詳細(xì)描述，也即，所述步驟S106可以由所述加載進(jìn)度指示模塊116實(shí)現(xiàn)。

可選地，在本實(shí)施例中，所述加載進(jìn)度指示模塊116可以包括第一指示子模塊1161和第二指示子模塊1162。

其中，所述第一指示子模塊1161用于在所述待加載網(wǎng)絡(luò)圖片正在加載時(shí)，顯示所述ActivityIndicator控件。在本實(shí)施例中，關(guān)于所述第一指示子模塊1161的描述具體可參考對(duì)圖4中所示的步驟S201的詳細(xì)描述。也即，所述步驟S201可以由所述第一指示子模塊1161執(zhí)行。

所述第二指示子模塊1162用于在所述待加載網(wǎng)絡(luò)圖片加載完成時(shí)，隱藏所述ActivityIndicator控件。在本實(shí)施例中，關(guān)于所述第二指示子模塊1162的描述具體可參考對(duì)圖4中所示的步驟S202的詳細(xì)描述。也即，所述步驟S202可以由所述第二指示子模塊1162執(zhí)行。

綜上所述，本發(fā)明提供的網(wǎng)絡(luò)圖片加載方法及裝置，通過(guò)獲取待加載網(wǎng)絡(luò)圖片的實(shí)際尺寸，并將預(yù)設(shè)的顯示尺寸更新為所述實(shí)際尺寸，使得待加載網(wǎng)絡(luò)圖片按照更新后的顯示尺寸進(jìn)行加載。如此，能夠避免指定的顯示尺寸不準(zhǔn)確所造成的圖片加載不完全或圖片顯示變形的問(wèn)題。

在本發(fā)明實(shí)施例所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所揭露的系統(tǒng)和方法，也可以通過(guò)其它的方式實(shí)現(xiàn)。以上所描述的系統(tǒng)和方法實(shí)施例僅僅是示意性的，例如，附圖中的流程圖和框圖顯示了根據(jù)本發(fā)明的多個(gè)實(shí)施例的系統(tǒng)、方法和計(jì)算機(jī)程序產(chǎn)品的可能實(shí)現(xiàn)的體系架構(gòu)、功能和操作。在這點(diǎn)上，流程圖或框圖中的每個(gè)方框可以代表一個(gè)模塊、程序段或代碼的一部分，所述模塊、程序段或代碼的一部分包含一個(gè)或多個(gè)用于實(shí)現(xiàn)規(guī)定的邏輯功能的可執(zhí)行指令。也應(yīng)當(dāng)注意，在有些作為替換的實(shí)現(xiàn)方式中，方框中所標(biāo)注的功能也可以以不同于附圖中所標(biāo)注的順序發(fā)生。例如，兩個(gè)連續(xù)的方框?qū)嶋H上可以基本并行地執(zhí)行，它們有時(shí)也可以按相反的順序執(zhí)行，這依所涉及的功能而定。也要注意的是，框圖和/或流程圖中的每個(gè)方框、以及框圖和/或流程圖中的方框的組合，可以用執(zhí)行規(guī)定的功能或動(dòng)作的專用的基于硬件的系統(tǒng)來(lái)實(shí)現(xiàn)，或者可以用專用硬件與計(jì)算機(jī)指令的組合來(lái)實(shí)現(xiàn)。

另外，在本發(fā)明各個(gè)實(shí)施例中的各功能模塊可以集成在一起形成一個(gè)獨(dú)立的部分，也可以是各個(gè)模塊單獨(dú)存在，也可以兩個(gè)或兩個(gè)以上模塊集成形成一個(gè)獨(dú)立的部分。

所述功能如果以軟件功能模塊的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說(shuō)對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，電子設(shè)備，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、移動(dòng)硬盤、只讀存儲(chǔ)器(ROM，Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM，Random Access Memory)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。需要說(shuō)明的是，在本文中，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、物品或者設(shè)備所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)……”限定的要素，并不排除在包括所述要素的過(guò)程、方法、物品或者設(shè)備中還存在另外的相同要素。

以上所述，僅為本發(fā)明的具體實(shí)施方式，但本發(fā)明的保護(hù)范圍并不局限于此，任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到變化或替換，都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)所述以權(quán)利要求的保護(hù)范圍為準(zhǔn)。