iOS开发——加载、滑动翻阅大量图片解决方案详解

原创 2012年12月03日 17:35:49
加载、滑动翻阅大量图片解决方案详解


今天分享一下私人相册中,读取加载、滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制。
我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清大图全屏浏览界面的这短暂的1秒内(和后续的几秒),都发生了什么。


常规思路流程

点击任意小图后,
1.首先制作scrollview框架:大小2个scrollview,小的用于手势缩放单一图片,大的横向依次加载全部照片
2.制作好scrollview框架后,加载照片
3.一切准备就绪跳转页面呈现给用户选择的大图

加载图片这一步,若相册内就10几张照片,那么毫无技术挑战,但是如果是300张照片呢?直接崩溃?还是让用户等待加载? 时间紧任务重,这一步需要拆分和优化.



scrollview框架需要了解下API,然后动动脑子了,这里有个小窍门,很多人都问我照片与照片间的黑边间距怎么实现,呵呵,贴下代码:
#define PADDING  20
- (NSInteger)loadPhotos
{
    //清理之前照片
    for (UIView *v in [_scrollView subviews]) {
        [v removeFromSuperview];
    }

    workingFrame = [[UIScreen mainScreen]bounds];
    workingFrame.origin.x = PADDING;
    
    for (int i = 0; i < int_total; i++) {
        CGRect frame = workingFrame;
        WQPhoto *photoView = [[WQPhoto alloc] initWithFrame:frame];
        [photoView setScroller:self];
        [photoView setIndex:i];

        WQAlbumPhoto *photo = [albumObject._photos objectAtIndex:i];
        [photo cleanThumbnail];
        if (i == int_current) {
	//加载原图
            [photoView setImage:photo.oriImage];
            [photoView setIsLoad:YES];
        }else if (int_current - 10 < i && i < int_current + 10){
	//加载左右临近的缩略图
            [photoView setImage:photo.thumbnail4view];
        }

        [_scrollView addSubview:photoView];
        workingFrame.origin.x = workingFrame.origin.x + 2 * PADDING 
+ workingFrame.size.width;
    }
    
    //实现可滚动
    [_scrollView setContentSize:CGSizeMake(workingFrame.origin.x, workingFrame.size.height / 2)];
    [_scrollView setContentOffset:CGPointMake(360 * int_current, 0)];
    //加载其余缩略图
    loadThread = [[NSThread alloc]initWithTarget:self selector:@selector(loadImages) object:nil];
    return 0;
}




使用低分辨率图

仔细想想,其实没有必要第一时间加载全部图片的高清原图,事先存好每张图配套的低分辨率图,用空间换时间。
先加载所有的图片的低分辨率图, 当用户翻阅到某一张图片时, 即时的加载原始尺寸的高清无码大图. 过程优化为:


多线程任务

即使是这样,当照片数量达到一定量时,需要消耗的时间也并非毫秒级,体验无法领人满意,  页面跳转时仍然会出现卡顿现象。
于是考虑使用多线程来进一步拆分任务, 执行跳转的同时再后台执行加载低分辨率图的步骤.




优化快速翻阅体验

通过这样的拆分,可以实现立即跳转,体验满意。但是翻阅浏览时,当用户很快左右滑动时, 出现黑屏的几率很高, 因为加载低分辨率图任务的线程可能还在进行大量IO操作,不能及时跟上。 为了完善它,要把加载低分辨率图的步骤再次分解,精益求精。 
在页面跳转时间允许的范围内,加载用户选定的那张图片的高清原图的同时,尽可能多的加载几张左右临近的图片的低分辨率图。






如何加载其余的低分辨率图?
以用户点击选定的那张图为中心向两边加载, 直接想应该是两个线程一左一右的加载,再想想左右一起加载其实可以是一个循环, 免了再开线程的那些耗费了。


-(BOOL)loadImages
{
    for (int i = int_current - 10, j = int_current + 10 ; !( i < 0 &&  int_total - 1 < j); --i, ++j) {
        if (!(i < 0)) {
            WQPhoto *photo_pre = [_scrollView.subviews objectAtIndex:i];
            WQAlbumPhoto *photoPre = [albumObject._photos objectAtIndex:i];
            [photo_pre setImage:photoPre.thumbnail4view];
        }
        if (!(int_total - 1 < j)) {
            WQPhoto *photo_next = [_scrollView.subviews objectAtIndex:j];
            WQAlbumPhoto *photoNext = [albumObject._photos objectAtIndex:j];
            [photo_next setImage:photoNext.thumbnail4view];
        }
    }
    return YES;
}


最后还一个砍儿

尽量减少内存占用.  因为原始图片要比低分辨率图大很多, 所以当用户从一张图片翻阅到另一张图片时,  当前图片加载为原始尺寸的高清大图, 而原来那张就被替换为低分辨率图了。 虽然读写次数增多了, 但内存确实省了不少。

实话说,市场上不少相册类的app, 翻阅时都会有卡顿的跳跃感,呵呵……



P.S.  下次总结讨论下,独立开发者如何不花一分钱的推广,最终实现盈利:




欢迎交流



版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS图片查看滚动放大缩小

简介 效果显示 在显示的图片中,最中间的图片为我们要查看图片,是最大的,然后两边的图片比较小,随着我们的拖动,越靠近中间位置,图片越大 实现思路 使用UICollectionView来显示图片,采...
  • helloiamclh
  • helloiamclh
  • 2017年03月06日 21:35
  • 918

iOS-CollectionView自定义相册功能_性能优化

大多数项目中都会用到相册浏览和选择功能,如果需要使用到自定义相册浏览器,那么,性能优化将是一个很重要的课题。毕竟操作对象是图片这样相对较大写数据单位。今天就针自定义相册浏览选择器四个优化点进行剖析: ...
  • JackJia2015
  • JackJia2015
  • 2016年01月25日 12:23
  • 2321

iOS常见问题之异步加载图片在UITableView里显示时的奇异的现象

今天在研究SDWebImage和ASIHTTPRequest实现网络图片异步加载和本地缓存的时候,在UITableView显示图片的时候,出现了一些奇异的现象,比如:   1、TableVi...
  • wanglei9876
  • wanglei9876
  • 2014年08月27日 17:45
  • 1077

TableView滑动不加载

滑动不加载,在ios中非常常用,是优化界面的一种方法,今天给大家分享一下,废话不多说,直接上代码!! 第一步,先在controller中添加一个tableView 并实现其代理方法。 第二步,...
  • liyingbin0923
  • liyingbin0923
  • 2016年01月14日 11:22
  • 349

滑动 CollectionView 图片混乱问题

在开发中我遇到一个问题就是滑动 CollectionView 图片混乱问题 项目首页我用一个 Collectionview 实现三个分组,并且实现 cell 大小不一致的分配,但是在我滑动 Coll...
  • qq_22080737
  • qq_22080737
  • 2017年01月09日 11:48
  • 737

iOS开发使用tableView从服务器加载图片时的卡顿现象解决方案

新手做开发的时候一般都会遇到使用tableView从网上加载图片并显示图文的时候会有卡顿现象,而这种卡顿现象也是因为多种原因造成的。一般可以分为两种:一种是由于网上加载图片需要动态定义cell的高度(...
  • u014640208
  • u014640208
  • 2016年01月03日 22:03
  • 2059

IOS自定义图片浏览器,支持浏览多张图片,点击,双击,两手指缩放操作,并显示加载进度条

图片浏览器Controller的主要思路是:新建一个 JZAlbumViewController,在这个controller里主要显示一个UIScrollView,这个UIScrollView用来显示...
  • l863784757
  • l863784757
  • 2015年04月30日 17:36
  • 22166

iOS滑动解锁/滑动获取验证码效果实现

iOS滑动解锁、滑动获取校验码效果实现
  • huxinguang_ios
  • huxinguang_ios
  • 2016年05月06日 11:40
  • 2560

iOS开发,图片太多占内存太大如何解决

写在前面加载图片的方式在ios中,为了方便都这样加载图片 myImage = [UIImage imageNamed:@"icon.png"]; 如果你也这样加载的话,要小心了,这种方法在一些图片很少...
  • imkakaxi
  • imkakaxi
  • 2016年03月22日 10:35
  • 2593

iOS---tableview加载图片的时候的优化之lazy(懒加载)模式and异步加载模式

举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体验就不太好...
  • haogaoming123
  • haogaoming123
  • 2015年04月20日 00:29
  • 3176
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS开发——加载、滑动翻阅大量图片解决方案详解
举报原因:
原因补充:

(最多只允许输入30个字)