iOS异步下载图片实例代码

写在前面

在iOS开发中,无论是在UITableView还是在UICollectionView中,通过网络获取图片设置到cell上是较为常见的需求。尽管有很多现存的第三方库可以将下载和缓存功能都封装好了供开发者使用,但从学习的角度出发,看懂源码,理解其中的原理,结合自身的实际需求写出自己的代码是很必要的。在刚结束的Demo中,有用到异步图片下载功能,这篇笔记就是对整个实现的简单整理。

基本思路

•cell中添加一个UIImageView

•cell拥有url,发起下载请求,注册下次完成通告,在通告处理时间中获取下载图片并设置

•下载管理类负责开启下载线程和各种缓存(内存+文件),下载完成后发送下载完成通告

•为避免cell重用和异步下载造成的图片错位,cell在发起下载前为自身imageView设置默认图片,同时为imageView设置tag

整体框架

关键代码

cell初始化,并注册下载完成通告

@interface SQPhotoCell ()
@property (strong, nonatomic) UIImageView *photoView;
//Tag指向当前可见图片的url,可过滤掉已经滑出屏幕的图片的url
@property (strong, nonatomic) NSString *imageViewTag;
@end
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
_photoView = [[UIImageView alloc] initWithFrame:CGRectZero];
_photoView.userInteractionEnabled = YES;
[self.contentView addSubview:_photoView];
_imageViewTag = @"";
//注册下载完成通知
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(downloadCallback:)
name:NOTIFICATION_DOWNLOAD_CALLBACK
object:nil];
}
return self;
}

cell通知处理事件

//通知处理事件
- (void)downloadCallback:(NSNotification *)noti
{
NSDictionary *notiDic = noti.userInfo;
NSString *urlStr = [notiDic objectForKey:@"urlStr"];
UIImage *image = [notiDic objectForKey:@"image"];
if ([self.imageViewTag isEqualToString:urlStr])
{
self.photoView.image = image;
}
}

cell发起下载请求

- (void)setImageWithURL:(NSString *)urlStr placeholder:(UIImage *)placeholder
{
self.imageViewTag = urlStr;
//预设图片,用于清除复用以前可能存在的图片
self.photoView.image = placeholder;
if (urlStr)
{
SQWebImageManager *manager = [SQWebImageManager sharedManager];
[manager downloadImageWithURLString:urlStr];
}
[self setNeedsDisplay];
}

下载管理类下载函数

- (void)downloadImageWithURLString:(NSString *)urlStr
{
// 1.判断内存缓存 {urlStr: image}
UIImage *cacheImage = [self.imageCache objectForKey:urlStr];
if (cacheImage != nil)
{
//发出下载完成的通知,并传回urlStr和图片
[self postDownloadCompleteNotification:urlStr withImage:cacheImage];
return;
}
// 2.判断沙盒缓存
NSString *cacheImagePath = [self cacheImagePathWithURLString:urlStr];
cacheImage = [UIImage imageWithContentsOfFile:cacheImagePath];
if (cacheImage != nil)
{
// 从沙盒中读取到了图片,设置到内存缓存中,方便下次可以直接从内存中读取
[self.imageCache setObject:cacheImage forKey:urlStr];
// 返回图片
[self postDownloadCompleteNotification:urlStr withImage:cacheImage];
return;
}
// 3.判断操作缓存,防止图片多次下载 {urlStr: operation}
if (self.operationCache[urlStr] != nil)
{
// 有操作正在下载这张图片
NSLog(@"有操作正在下载这张图片");
return;
}
// 1.定义下载图片操作
SQDownloadOperation *downloadOperation = [SQDownloadOperation downloadOperationWithURLString:urlStr cacheImagePath:cacheImagePath];
// 设置操作下载完成的回调,当 downloadOperation 的 main 方法执行完成的时候回调用
__weak typeof(downloadOperation) weakDownloadOperation = downloadOperation;
downloadOperation.completionBlock = ^() {
// 1. 获取下载完成的图像
UIImage *image = [weakDownloadOperation getDownloadImage];
// 2. 从操作缓冲池中删除操作
[self.operationCache removeObjectForKey:urlStr];
// 3. 判断图像是否为空(缩略图)
if (image != nil)
{
// 设置下载的图片到图片内存缓存中
[self.imageCache setObject:image forKey:urlStr];
// 4. 主线程回调
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
//发出下载完成通告
[self postDownloadCompleteNotification:urlStr withImage:image];
}];
}
else
{
//如果图片为空,返回下载失败时的默认图片
image = [UIImage imageNamed:@"default.jpg"];
// 4. 主线程回调
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
//发出下载完成通告
[self postDownloadCompleteNotification:urlStr withImage:image];
}];
}
};
// 2.将下载图片操作添加到队列中
[self.downloadQueue addOperation:downloadOperation];
// 3.将下载图片操作添加到下载操作缓存中
[self.operationCache setObject:downloadOperation forKey:urlStr];
}
- (void)postDownloadCompleteNotification:(NSString *)urlStr withImage:(UIImage *)image
{
NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:urlStr, @"urlStr", image, @"image",nil];
[[NSNotificationCenter defaultCenter]postNotificationName:NOTIFICATION_DOWNLOAD_CALLBACK
object:nil
userInfo:dic];
}

控制器中使用

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
SQPhotoCell *cell = (SQPhotoCell *)[collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier
forIndexPath:indexPath];
UIImage *placeholder = [UIImage imageNamed:@"gray.jpg"];
NSString *imageUrl = @"http://www.taopic.com/uploads/allimg/110925/9117-11092509545328.jpg";
[cell setImageWithURL:imageUrl placeholder:placeholder];
return cell;
}

写在后面

这个异步下载图片的思路是仿照SDWebImage的,虽然可以直接看到源码,也有一些文章和博客讲解思路,但自己在没有接触过多线程编程的情况下学习这个下载思路还是花了挺多时间的。前期一直都有些着急,想要赶紧做出来,在对好多东西都是懵懵懂懂的情况下就去做了,后来才慢慢意识到,其实慢就是快,慢下来,把问题想清楚了再去实施虽然前期感觉是不太好的,但到越到后面就越能发现这种慢的好处。

(0)

相关推荐

  • iOS开发中文件的上传和下载功能的基本实现

    文件的上传 说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代码. 主控制器的关键代码: 复制代码 代码如下: YYViewController.m #import "YYViewController.h" #define YYEncode(str) [str dataUsingEncoding:NSUTF8StringEncoding] @interface YYV

  • IOS多线程实现多图片下载(二)

    上篇文章给大家介绍了IOS多线程实现多图片下载1,本文继续给大家介绍ios多线程下载图片. 这次是用多线程进行图片的下载与存储,而且考虑到下载失败,占位图片的问题(第一张就是下载失败的图片) 闲话少说,上代码吧,因为有一部分和上次的一样,所以这里只上传不一样的 先给大家展示下效果图: 依旧都是在ViewController.m中 1. @interface ViewController () //所有数据 @property (nonatomic,strong)NSArray *apps; //

  • iOS开发实现下载器的基本功能(1)

    今天,做了一个下载器的Demo,即从本地配置的Apache服务器上,下载指定的文件.这次,我们下载服务器根目录下的html.mp4文件. 按照惯例,我们先创建一个URL对象和请求.  NSURL *url = [NSURL URLWithString:@"http://127.0.0.1/html.mp4"]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; 这里有两点需要注意,第一,这个url的字符串是全英文的,如

  • IOS多线程实现多图片下载(一)

    在没有步入正文之前先给大家展示下效果图,如果大家觉得很满意请继续往下阅读全文. 大家可以看到这个界面很简单,其实就是UITableView的布局,但是难点是在于如何从网上下载这些图片,下载之后应如何进行存储! 我们一步一步进行解析,先从单线程(主线程)进行多图片下载我们布局上的文字及图片的地址从plist文件中进行读取 根据结构,我们自定义一个数据模型文件 DDZApp.h #import <Foundation/Foundation.h> @interface DDZApp : NSObje

  • iOS异步下载图片实例代码

    写在前面 在iOS开发中,无论是在UITableView还是在UICollectionView中,通过网络获取图片设置到cell上是较为常见的需求.尽管有很多现存的第三方库可以将下载和缓存功能都封装好了供开发者使用,但从学习的角度出发,看懂源码,理解其中的原理,结合自身的实际需求写出自己的代码是很必要的.在刚结束的Demo中,有用到异步图片下载功能,这篇笔记就是对整个实现的简单整理. 基本思路 •cell中添加一个UIImageView •cell拥有url,发起下载请求,注册下次完成通告,在通

  • Python利用requests模块下载图片实例代码

    本文主要介绍的是关于Python利用requests模块下载图片的相关,下面话不多说了,来一起看看详细的介绍吧 MySQL中事先保存好爬取到的图片链接地址. 然后使用多线程把图片下载到本地. 示例代码: # coding: utf-8 import MySQLdb import requests import os import re from threading import Thread import datetime header = {'User-Agent': 'Mozilla/5.0

  • Android中使用七牛云存储进行图片上传下载的实例代码

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了. 可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端

  • JavaWeb中上传和下载文件实例代码

    一丶先引入上传下载的lib 二丶上传的的servlet package com.test.action; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.List; import javax.servlet.ServletExcepti

  • Android异步下载图片并且缓存图片到本地DEMO详解

    在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML资源,其中包括图片,我们要做的解析XML里面的数据,并且把图片缓存到本地一个cache目录里面,并且用一个自定义的Adapter去填充到LIstView,demo运行效果见下图: 通过这个demo,要学会有一下几点 1.怎么解析一个XML 2.demo中用到的缓存图片到本地一个临时目录的思想是怎样的? 3.AsyncTask类的使用,因为要去异

  • Struts2 控制文件上传下载功能实例代码

    之前介绍servlet3.0新特性的时候有提到过servlet API提供了一个part类来实现对文件的上传和保存,Struts其实是在其基础上做了进一步的封装,更加简单易用.至于文件下载,Struts贯彻AOP 思想,在下载之前提供对用户权限控制的API. 下面我们将详细介绍上传和下载的相关内容. 一.Struts文件上传机制 想要实现文件上传功能,页面的表单的method属性必须被指定为post,还有enctype属性必须为multipart/form-data,该值表示上传的内容将会以二进

  • Apache POI将PPT转换成图片实例代码

    本文主要分享的是关于Apache POI将PPT转换成图片的相关内容,简单介绍了Apache POI,具体内容如下. 1.Apache POI 简介 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能. 可以查看官方文档 Apache POI官网 Apache POI操作PPT文档有两种方式: 1.POI-HSLF 对应的 Powerpoint '97(-2007) 的文

  • 微信语音上传 下载功能实例代码

    假如现在有一个按钮 <div class="inp_btn voice_btn active" id="record"> 按住 说话 </div> 下面就是调用微信jssdk的方法 var recorder; var btnRecord = $('#record'); var startTime = 0; var recordTimer = 300; // 发语音 $.ajax({ url: 'url请求需要微信的一些东西 下面success

  • php多文件打包下载的实例代码

    最近整理文档,搜刮出一个php多文件打包下载的实例代码,稍微整理精简一下做下分享. 需要同时下载多个文件时,大部分浏览器都不支持多文件同时下载,可以采用JavaScript脚本动态生成多个链接,但是需要用户多次点击下载对话框,用户体验不好,并且有些浏览器还不兼容.此时多文件打包下载帮你解决这个问题. $filename = "test.zip"; $datalist=array('./pubfile/1.jpg','./pubfile/2.jpg'); if(!file_exists(

  • Android 手势 正则匹配图片实例代码

    为没有手势的控件(ViewFlipper) 添加手势 xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools

随机推荐