天天看點

開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔

     EGOImageLoading 是一個用的比較多的異步加載圖檔的第三方類庫,簡化開發過程,我們直接傳入圖檔的url,這個類庫就會自動幫我們異步加載和緩存工作;當從網上擷取圖檔時,如果網速慢圖檔短時間内不能下載下傳下來,可以先用一張本地的圖檔代替顯示,還可以進行其他操作,讓圖檔下載下傳完成後自動替換占位圖檔而不影響使用者體驗;

     首先還是來分析一下開源中國iOS用戶端如何使用這個第三方類庫

在我搜尋用戶端中哪些類使用了這個類庫的時候和預期的并不一樣,在工程中有很多地方需要使用到圖檔的異步加載,而使用EGOImageLoading類庫加載隻有三個地方,也可以說是兩個地方

一是在顯示個人資料加載個人圖檔,顯示個人資訊時候使用的。

二個是顯示你的粉絲或者你關注的人,想檢視TA的資料的時候

開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔
開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔

在MyView類和UserView2類中,使用方法一樣

聲明一個 EGOImageView管理圖檔的異步加載

1

<code>@property (strong,nonatomic) EGOImageView * egoImgView;</code>

在ViewDidLoad方法中

2

3

4

5

6

7

<code>//    初始化</code>

<code>    </code><code>self.egoImgView = [[EGOImageView alloc] initWithFrame:CGRectMake(15, 4, 70, 70)];</code>

<code>//    占位圖檔</code>

<code>    </code><code>self.egoImgView.image = [UIImage imageNamed:@</code><code>"big_avatar_loading.png"</code><code>];</code>

<code>//    設定圖檔圓角弧度</code>

<code>    </code><code>egoImgView.layer.cornerRadius = 10.0f;</code>

<code>    </code><code>[self.view addSubview:self.egoImgView];</code>

然後就是在reload()方法中圖檔加載處理,先從網絡解析擷取圖檔的url資源,如果未擷取到圖檔url仍然顯示占位圖檔,如果擷取到了就将占位圖檔更換為解析擷取的圖檔

8

9

10

<code>//頭像</code>

<code>NSString *portrait_str = [TBXML textForElement:portrait];</code>

<code>if</code> <code>([portrait_str isEqualToString:@</code><code>""</code><code>])</code>

<code>{</code>

<code>    </code><code>self.egoImgView.image = [UIImage imageNamed:@</code><code>"big_avatar.png"</code><code>];</code>

<code>}</code>

<code>else</code>

<code>    </code><code>self.egoImgView.imageURL = [NSURL URLWithString:portrait_str];</code>

以上就是使用EGOImageLoading 類庫進行圖檔的異步加載;

以下是一個使用EGOImageLoading 類庫進行圖檔異步加載的示例Demo,下載下傳見附件

開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔

在開源中國iOS 用戶端的問答、動彈、我的三個視圖也涉及到圖檔的顯示加載問題,剛開始誤以為使用EGOImageLoading 類庫異步加載圖檔,而實際上是一個延遲加載,先用占位圖檔顯示,然後使用IconDownloader類庫從伺服器端将圖檔下載下傳到本地緩存,在進行加載顯示;

開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔
開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔
開源中國iOS用戶端學習——(十四)使用EGOImageLoading異步加載圖檔

     本文轉自新風作浪 51CTO部落格,原文連結:http://blog.51cto.com/duxinfeng/1214170,如需轉載請自行聯系原作者

繼續閱讀