iOS开发之加载、滑动翻阅大量图片优化解决方案_Michael.Ke的博客-程序员宅基地

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

AD:

今天分享一下私人相册中,读取加载、滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制。

我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清大图全屏浏览界面的这短暂的1秒内(和后续的几秒),都发生了什么。

常规思路流程

点击任意小图后,

1.首先制作scrollview框架:大小2个scrollview,小的用于手势缩放单一图片,大的横向依次加载全部照片

2.制作好scrollview框架后,加载照片

3.一切准备就绪跳转页面呈现给用户选择的大图

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

scrollview框架需要了解下API,然后动动脑子了,这里有个小窍门,很多人都问我照片与照片间的黑边间距怎么实现,呵呵,贴下代码:

   
    
  1. #define PADDING  20   
  2. - (NSInteger)loadPhotos   
  3. {   
  4.     //清理之前照片   
  5.     for (UIView *v in [_scrollView subviews]) {   
  6.         [v removeFromSuperview];   
  7.     }   
  8.    
  9.     workingFrame = [[UIScreen mainScreen]bounds];   
  10.     workingFrame.origin.x = PADDING;   
  11.        
  12.     for (int i = 0; i < int_total; i++) {   
  13.         CGRect frame = workingFrame;   
  14.         WQPhoto *photoView = [[WQPhoto alloc] initWithFrame:frame];   
  15.         [photoView setScroller:self];   
  16.         [photoView setIndex:i];   
  17.    
  18.         WQAlbumPhoto *photo = [albumObject._photos objectAtIndex:i];   
  19.         [photo cleanThumbnail];   
  20.         if (i == int_current) {   
  21.     //加载原图   
  22.             [photoView setImage:photo.oriImage];   
  23.             [photoView setIsLoad:YES];   
  24.         }else if (int_current - 10 < i && i < int_current + 10){   
  25.     //加载左右临近的缩略图   
  26.             [photoView setImage:photo.thumbnail4view];   
  27.         }   
  28.    
  29.         [_scrollView addSubview:photoView];   
  30.         workingFrame.origin.x = workingFrame.origin.x + 2 * PADDING    
  31. + workingFrame.size.width;   
  32.     }   
  33.        
  34.     //实现可滚动   
  35.     [_scrollView setContentSize:CGSizeMake(workingFrame.origin.x, workingFrame.size.height / 2)];   
  36.     [_scrollView setContentOffset:CGPointMake(360 * int_current, 0)];   
  37.     //加载其余缩略图   
  38.     loadThread = [[NSThread alloc]initWithTarget:self selector:@selector(loadImages) object:nil];   
  39.     return 0;   
  40. }   

使用低分辨率图

仔细想想,其实没有必要第一时间加载全部图片的高清原图,事先存好每张图配套的低分辨率图,用空间换时间。

先加载所有的图片的低分辨率图, 当用户翻阅到某一张图片时, 即时的加载原始尺寸的高清无码大图. 过程优化为:

多线程任务

即使是这样,当照片数量达到一定量时,需要消耗的时间也并非毫秒级,体验无法领人满意,  页面跳转时仍然会出现卡顿现象。

于是考虑使用多线程来进一步拆分任务, 执行跳转的同时再后台执行加载低分辨率图的步骤.

优化快速翻阅体验

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

如何加载其余的低分辨率图?

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

   
    
  1. -(BOOL)loadImages   
  2. {   
  3.     for (int i = int_current - 10, j = int_current + 10 ; !( i < 0 &&  int_total - 1 < j); --i, ++j) {   
  4.         if (!(i < 0)) {   
  5.             WQPhoto *photo_pre = [_scrollView.subviews objectAtIndex:i];   
  6.             WQAlbumPhoto *photoPre = [albumObject._photos objectAtIndex:i];   
  7.             [photo_pre setImage:photoPre.thumbnail4view];   
  8.         }   
  9.         if (!(int_total - 1 < j)) {   
  10.             WQPhoto *photo_next = [_scrollView.subviews objectAtIndex:j];   
  11.             WQAlbumPhoto *photoNext = [albumObject._photos objectAtIndex:j];   
  12.             [photo_next setImage:photoNext.thumbnail4view];   
  13.         }   
  14.     }   
  15.     return YES;   
  16. }   

最后还一个砍儿

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

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


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/michaelKiven/article/details/49129655

智能推荐

一重指针、二重指针做函数参数的深刻分析(虽然很基础,但要深刻理解)_ShenHang_的博客-程序员宅基地

一重指针做函数参数#include&lt;iostream&gt;using namespace std;void change(int *p){ *p = 20; p++; cout &lt;&lt; p &lt;&lt; endl;}int main() { int a = 10; change(&amp;a); cout &lt;&lt; &amp;a &lt;&lt...

java设置图片点击渐变透明,图片实现渐变/透明效果_weixin_39569753的博客-程序员宅基地

众所周知,图片等一些盒子都可以利用opacity属性来设置不透明度,但是前两天我朋友忽然给我一个截图,截图效果如下图中红框圈住的位置图片或者说摄像头采集的画面出现了渐变到透明,可以清楚的看到可以看到后面小哥的胳膊,然后问我如何实现这种效果,这下把我难住了(呵 天天给我出难题),我开始在个大论坛开始寻找解决方案;忽然在前天,日常逛论坛时看到一个文字投影的效果,而后忽然灵机一动就想,能不能变相的实现前...

java笔记_笑容温暖城寨的博客-程序员宅基地

安卓课的Java扩展笔记包类命名规范总结输出换行与不换行mian方法中的args参数Math类快捷输出语句static关键字定义无参方法定义带返回值方法包package com.eoe.basic.day01;//包名 在java当中用.表示windos中的/,一般格式:com.公司名.项目名.业务模块名称例如:com.sina.crm.user类命名规范总结1、java中可以有多个类2、java中可以有多个类,但是最多只有一个类的类名和文件名相同3、如果一个类被public修饰,那该类

一、网络游戏架构的前世今生(2)_王元恺David的博客-程序员宅基地

网络游戏架构演进史,优化游戏网络,自定义网络协议

在Chrome 浏览器上滚动截屏_ianly梁炎的博客-程序员宅基地_横向滚动截图

浏览器滚动截屏,截取整个页面 在Chrome 浏览器上滚动截屏,不需要插件和任何 app,利用 chrome 浏览器原生功能即可实现。打开 Chrome 浏览器,进入需要截图的网站页面打开开发者工具:在页面任何地方点击鼠标右键,在弹出菜单中选择「检查」选项。或者使用快捷键组合:option + command + i。打开命令行(command palette):command + s...

微信小程序 获取用户网络状态和设备的信息_东边的小山的博客-程序员宅基地

var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, netWorkType: '', phoneType: '', phoneSystemType: '', }, //事件处理函数 bindViewTap: function() { wx.nav...

随便推点

部署虚拟机做服务器_大萌萌德的博客-程序员宅基地

其实很简单 就是接上篇文章   今天想着如果把虚拟机的apache和tomcat整合之后作为服务器让主系统来访问会怎么样 于是做了下测试首先必须保证虚拟机和主系统在同一个ip段中 然后用ping命令可以ping通  ping不通试着关闭防火墙然后就是关键的地方在hosts下添加要访问的域名  可以有些地方重复了虚拟机设置 本机IP    

大神博客地址_骏马传奇的博客-程序员宅基地

骏马金龙 http://www.cnblogs.com/f-ck-need-u/ 散尽浮华 http://www.cnblogs.com/kevingrace/ kris12 https://www.cnblogs.com/shengyang17/default.html?page=11 Edison Zhou https://www.cnblogs.com/...

圆排列问题_小张的java日记的博客-程序员宅基地_圆排列java

问题给定n个圆的半径序列,将它们放到矩形框中,各圆与矩形底边相切,求具有最小排列长度的圆排列。解析圆排列问题的解空间是一棵排列树。按照回溯法搜索排列树的算法框架,设开始时a=[r1,r2,……rn]是所给的n个元的半径,则相应的排列树由a[1:n]的所有排列构成。 首先计算圆在当前圆排列中的横坐标,由x^2 = sqrt((r1+r2)^2-(r1-r2)^2)推导出x = 2 * sqrt(r1 * r2)。然后计算当前圆排列的长度。变量lenmin记录当前最小圆排列长度...

获取颜色编码_Java_Hello_World.的博客-程序员宅基地

1,使用截屏功能2,正在截屏的时候按下shit,然后看到一个#c92027(red/红色)3,按下字母C4,到需要颜色代码的地方Ctrl+V

python 函数进阶_weixin_30951231的博客-程序员宅基地

三元运算a = 1b = 5c = a if a&gt;b else bprint(c)构成变量 = 条件返回True的结果 if 条件 else 条件返回False的结果必须要有返回的结果必须要有if和else只能是简单的情况def func(a,b): return a if a&gt;b else bc = func(3,5)...

rqt_graph提示b‘Format: “dot“ not recognized. Use one of:\n‘_qq_46145354的博客-程序员宅基地

在终端运行roscore,分别运行rosrun turtlesim turtle和rosrun turtlesim turtle_teleop_key,再输入rqt_graph,提示如下错误"dot" with args ['-Tdot', '/tmp/tmp145cvdav'] returned code: 1stdout, stderr:b''b'Format: "dot" not recognized. Use one of:\n'PluginHandlerDirect._resto.