使用GCD实现对UIImageView异步加载网络图片的简单封装

创建category文件给UIImageView扩充方法

将图片的数据的处理放置在低优先级的Global Dispatch Queue的Block中执行

#import "UIImageView+Web.h"

@implementation UIImageView (Web)
-(void)jx_setImageWithURL:(NSURL *)url
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
        //并行执行图片的数据处理
        NSData *data = [NSData new];
        data = [NSData dataWithContentsOfURL:url];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //主线程
            self.image = [UIImage imageWithData:data];
        });
    });
}
@end


复制代码

接下来，到ViewController.m进行测试。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSMutableArray *dataAry = [NSMutableArray new];
    NSURL *u1 = [NSURL URLWithString:@"http://www.windows7en.com/uploads/140829/2009120309142160.jpg"];
    NSURL *u2 = [NSURL URLWithString:@"https://tse3-mm.cn.bing.net/th?id=OIP.dhB7nSlblzW7T3sfNeeTLAHaEK&p=0&o=5&pid=1.1"];
    NSURL *u3 = [NSURL URLWithString:@"https://tse2-mm.cn.bing.net/th?id=OIP.C6uUnA27enUzMpNmgyQTdwHaEK&pid=15.1"];
    NSURL *u4 = [NSURL URLWithString:@"http://pic1.win4000.com/wallpaper/e/508518a4ae8e1.jpg"];
    [dataAry addObject:u1];
    [dataAry addObject:u2];
    [dataAry addObject:u3];
    [dataAry addObject:u4];
    
    //遍历数组的同时完成对UIImageView的创建
    [dataAry enumerateObjectsUsingBlock:
     ^(NSURL *url, NSUInteger idx, BOOL * _Nonnull stop) {
         CGFloat width = self.view.frame.size.width - 40;
         CGFloat height = (self.view.frame.size.height - 5 * 20) /4;
         UIImageView *imageView = [UIImageView new];
         [imageView setFrame:CGRectMake(20, 20*(idx+1) + height* idx, width, height)];
         [imageView jx_setImageWithURL:url]; //异步加载
//         [imageView setImage:[UIImage imageWithData:[NSData dataWithContentsOfURL:url]]];//系统自带方法
         [imageView setBackgroundColor:[UIColor orangeColor]];
         [self.view addSubview:imageView];
     }];
    
    // Do any additional setup after loading the view, typically from a nib.
}

复制代码

我设置了四个UIImageView并在网上找了体积较大的四张图片来显示。 我将这四个UIImageView的背景色设置为[UIColor orangeColor]。

如果使用系统自带的[UIImage imageWithData]方法会在app进行数据处理时阻塞主线程，因此这四个UIImageView只有在完成数据处理后才会添加到主视图中，也就是说在数据处理完成前在主视图中是看不见四个背景为orange的UIImageView的。

但使用刚刚写的[UIImageView jx_setImageWithURL]方法，会在另一条线程中处理数据，主线程中的UI渲染可以继续进行，因此会先看到四个orange背景的UIImageView，然后这四个View各自显示出图片。