码迷，mamicode.com
首页 > 其他好文 > 详细

UIImageView异步加载网络图片

时间：2015-06-19 14:53:31      阅读：147      评论：0      收藏：0      [点我收藏+]

标签：

在iOS开发过程中，经常会遇到使用UIImageView展现来自网络的图片的情况，最简单的做法如下：

去下载https://github.com/rs/SDWebImage放进你的工程里，加入头文件#import "UIImageView+WebCache.h"
加载网路图片就一句话[imageView setImageWithURL:url  placeholderImage:[UIImage imageNamed:@"defaultImage.png"]];
imageView为要显示的UIImageView，url为图片url地址（如果是NSString,就转换成NSUrl--[NSURL URLWithString:string]），
defaultImage.png为占位图片！ 

另一篇：

共享一个自己写的动态加载网络图片并自动剪裁的类   

  做开发这么长时间,加载网络图片时大部分是用EGOImageView,但是发现它不能根据自己的想法去剪裁：有时需要填充整个区域，有时又需要按比例显示。在网上也没找到
相关类库,小弟不才基于EGOImageView自己写了一个私有协议，自己感觉效果不错，之前在论坛一直用别人的代码，今天也共享下。
  有需要的朋友可以看看，可能不是最好,有问题请多多指教。


AutoCutPicSimple_New.zip做了点修改，防止多次seturl导致crash。


也可以直接:https://github.com/hfqf/AutoCutWebPic.git

 另一篇：

[cpp] view plaincopy
 
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     self.imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)] autorelease];  
  6.     self.imageView.layer.masksToBounds = YES;  
  7.     self.imageView.layer.cornerRadius = 5.0f;  
  8.     [self.imageView setBackgroundColor:[UIColor grayColor]];  
  9.     [self.view addSubview:self.imageView];  
  10.       
  11.     NSURL *imageUrl = [NSURL URLWithString:IMAGE_URL];  
  12.     UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];  
  13.     self.imageView.image = image;  
  14. }  


这么做，最直接的问题就是阻塞UI线程了。

 

于是考虑利用NSOperationQueue来异步加载图片：

 

[cpp] view plaincopy
 
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     operationQueue = [[NSOperationQueue alloc] init];  
  6.       
  7.     self.imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(110, 50, 100, 100)] autorelease];  
  8.     self.imageView.layer.masksToBounds = YES;  
  9.     self.imageView.layer.cornerRadius = 5.0f;  
  10.     [self.imageView setBackgroundColor:[UIColor grayColor]];  
  11.     [self.view addSubview:self.imageView];  
  12.       
  13.     NSInvocationOperation *op = [[NSInvocationOperation alloc] initWithTarget:self selector:@selector(downloadImage) object:nil];  
  14.     [operationQueue addOperation:op];  
  15. }  
  16.   
  17. - (void)downloadImage  
  18. {  
  19.     NSURL *imageUrl = [NSURL URLWithString:IMAGE_URL];  
  20.     UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];  
  21.     self.imageView.image = image;  
  22. }  


这么做的话，就可以避免阻塞UI线程了。当图片异步加载完成后，就会展现出来。

 

但是，第二次进入该界面，还是要重新下载图片，用户体验不好，且浪费资源（比如耗电）。

于是，考虑缓存已经下载的图片。

模仿操作系统（Cache - Memory - Disk），缓存图片也可以采取两层模型：内存和磁盘。

保存到内存中比较简单，只需要用NSDictionary来维护即可。而保存到磁盘，涉及到本地文件读写，可以参考“文件和数据管理”。

首先需要创建一个缓存目录：

 

[cpp] view plaincopy
 
  1. NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);  
  2.         diskCachePath = [[[paths objectAtIndex:0] stringByAppendingPathComponent:@"ImageCache"] retain];  
  3.           
  4.         if (![[NSFileManager defaultManager] fileExistsAtPath:diskCachePath]) {  
  5.             NSError *error = nil;  
  6.             [[NSFileManager defaultManager] createDirectoryAtPath:diskCachePath  
  7.                                       withIntermediateDirectories:YES  
  8.                                                        attributes:nil  
  9.                                                             error:&error];  
  10.         }  


接着可以用图片名称或者URL或者hash过后的值作为key（本地文件名），写入到本地：

 

 

[cpp] view plaincopy
 
  1. if (![[NSFileManager defaultManager] fileExistsAtPath:localPath]) {  
  2.         [[NSFileManager defaultManager] createFileAtPath:localPath contents:localData attributes:nil];  
  3.     }  


这样，在每次下载图片之前，先判断是否已经有缓存了，可以优化体验和性能。

 

我把完整的源代码写成Category以重用，放在GitHub上：https://github.com/siqin/OnlineImageView 。

 

Jason Lee @ Hangzhou

Blog: http://blog.csdn.net/jasonblog

第二篇：

方法1：在UI线程中同步加载网络图片

 

[cpp] view plaincopy
 
  1. UIImageView *headview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];  
  2.   
  3. NSURL *photourl = [NSURL URLWithString:@"http://www.exampleforphoto.com/pabb/test32.png"];  
  4. //url请求实在UI主线程中进行的  
  5. UIImage *images = [UIImage imageWithData:[NSData dataWithContentsOfURL:photourl]];//通过网络url获取uiimage  
  6. headview.image = images;  

 

 

这是最简单的，但是由于在主线程中加载，会阻塞UI主线程。所以可以试试NSOperationQueue，一个NSOperationQueue 操作队列，就相当于一个线程管理器，而非一个线程。因为你可以设置这个线程管理器内可以并行运行的的线程数量等等。

 

------------------------------------------------------------------------------------------------

 

方法2：使用NSOperationQueue异步加载

 

[cpp] view plaincopy
 
  1. 下面就是使用NSOperationQueue实现子线程加载图片：  
  2. - (void)viewDidLoad  
  3. {  
  4.     [super viewDidLoad];  
  5.       
  6.     NSOperationQueue *operationQueue = [[NSOperationQueue alloc] init];  
  7.       
  8.     self.imageview  = [[[UIImageView alloc] initWithFrame:CGRectMake(110, 50, 100, 100)] autorelease];  
  9.     [self.imageview setBackgroundColor:[UIColor grayColor]];  
  10.     [self.view addSubview:self.imageview];  
  11.       
  12.     NSInvocationOperation *op = [[NSInvocationOperation alloc] initWithTarget:self selector:@selector(downloadImage) object:nil];  
  13.     [operationQueue addOperation:op];  
  14. }  
  15.   
  16. - (void)downloadImage  
  17. {  
  18.     NSURL *imageUrl = [NSURL URLWithString:HEADIMAGE_URL];  
  19.     UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];  
  20.     self.imageview.image = image;  
  21. }  

不过这这样的设计，虽然是异步加载，但是没有缓存图片。重新加载时又要重新从网络读取图片，重复请求，实在不科学，所以可以考虑第一次请求时保存图片。

 

 

------------------------------------------------------------------------------------------------

 

方法3：异步加载，保存到cache里，下次再请求时读取cache里的缓存图片

 

3-1，首先在http请求时，建立一个缓存目录

 

[cpp] view plaincopy
 
  1. NSArray *paths =NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);  
  2. NSLog(@"the paths:%@",paths);  
  3. NSString * diskCachePath = [[paths objectAtIndex:0] stringByAppendingPathComponent:@"imageCache"];  
  4. NSLog(@"diskCachePath:%@",diskCachePath);  
  5.   
  6. //如果目录imageCache不存在，创建目录  
  7. if (![[NSFileManager defaultManager] fileExistsAtPath:diskCachePath]) {  
  8.     NSError *error=nil;  
  9.     [[NSFileManager defaultManager] createDirectoryAtPath:diskCachePath withIntermediateDirectories:YES attributes:nil error:&error];  
  10.       
  11. }  


3-2创建好目录后，第一次时，url请求网络图片，然后把得到的data保存到本地cache里。

 

 

[cpp] view plaincopy
 
    1.        <span style="white-space:pre">   </span>   NSURL *headurl = [NSURL URLWithString:<pre name="code" class="cpp">@"http://hiweibo-common.stor.sinaapp.com/user_photo_34.png"<span style="font-family: Arial, Helvetica, sans-serif;">]; </span></pre>// UIImage *headimg = [UIImage imageWithData:[NSData dataWithContentsOfURL:headurl]]; NSData *imagedata = [NSData dataWithContentsOfURL:headurl]; //如果本地缓存没有，保存图片 NSString *localPath = [NSString stringWithFormat:@"%@/headimage.png",diskCachePath];//  
    2.  NSLog(@"localpaht:%@",localPath); if (imagedata) { if (![[NSFileManager defaultManager] fileExistsAtPath:localPath]) { [[NSFileManager defaultManager] createFileAtPath:localPath contents:imagedata attributes:nil]; //[imagedata writeToFile:localPath atomically:YES];//也可以data  
    3.  write到file里 } UIImage *headimg = [[UIImage alloc] initWithData:imagedata]; self.headimage = headimg; [headimg release]; [meTableView reloadData]; }<p></p>  
    4. <pre></pre>  
    5. 3-3然后在下一次打开，初始化设置图片的地方，判断cache里有没有缓存图片，有的话直接加载。  
    6. <p></p>  
    7. <p><span style="font-size:18px"></span></p><pre name="code" class="cpp">    NSArray *paths =NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);  
    8.       
    9.     NSString *localpath = [[paths objectAtIndex:0] stringByAppendingPathComponent:@"/imageCache/headimage.png"];  
    10.       
    11.     //如果有缓存图片，直接读取cache内的缓存图片  
    12.     if ([[NSFileManager defaultManager] fileExistsAtPath:localpath]) {  
    13.         NSData *data = [NSData dataWithContentsOfFile:localpath];  
    14.   
    15.           
    16.         self.headimage = [UIImage imageWithData:data];  
    17.         [meTableView reloadData];  
    18.           
    19.     }  
    20.     else{  
    21.         //如果没有缓存图片，请求  
    22.         NSMutableDictionary *headdict =[NSMutableDictionary dictionaryWithObjectsAndKeys:tokenString,@"token",uidString,@"userid",nil];  
    23.         [self handlerPostFormDataWithParams:headdict withURL:APPROVAL_URL_GETPHOTO];  
    24.     }</pre><br>  
    25. 方法3是最科学的，只需要一次读取，以后就可以直接用了。<p></p>  
    26. <p><span style="font-size:18px"><br>  
    27. </span></p>  
    28. <p><span style="font-size:18px">目前总结到这里，以后有更深入研究时再补充</span></p>  
    29. <p><span style="font-size:18px">20130314<br>  
    30. <br>  
    31. <br>  
    32. </span><br>  
    33. </p>  

UIImageView异步加载网络图片

标签：

原文地址：http://www.cnblogs.com/worldtraveler/p/4588434.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！