最近项目需要实现一个图片浏览器的功能，要求也很常规，如下：
1、具有弹出、收起动画
2、在第N张图片收起图片浏览器时，容器内容要求定位在该图片的显示位置
3、流畅
最终实现效果如下：
2016-12-29 14_37_37.gif
由于项目中的文章页面使用H5渲染，所以解决思路如下：
1、js通知native所需要显示的图片url数组、index（当前点击的图片索引）、rect（当前点击图片的区域位置）
2、native在关闭图片浏览器时，通知js当前查看的图片index（js根据index跳转到网页对应位置），js回调native通知当前图片的rect（用于native播放收起动画）
期间遇到一个问题：
native并没有webview中已加载的图片资源，所以弹出动画难免出现加载过程，影响体验
解决方案如下：
注册NSURLProtocol，监听webview中所有的图片请求，并用SDWebImage缓存，以url为key，搞定。
- (void)startLoading {
NSURLSession *session = [NSURLSession sharedSession];
NSMutableURLRequest *request = [self.request mutableCopy];
[NSURLProtocol setProperty:@(YES) forKey:kProtocolHandledKey inRequest:request];
__weak typeof(self) weakSelf = self;
self.sessionTask = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if (error) {
return;
}
NSString *mimeType = response.MIMEType;
if ([mimeType hasPrefix:@"image"]) {
NSString *url = weakSelf.request.URL.absoluteString;
SDImageCache *cache = [SDImageCache sharedImageCache];
[cache storeImage:[UIImage imageWithData:data] forKey:url toDisk:NO];
}
[weakSelf.client URLProtocol:weakSelf didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowedInMemoryOnly];
[weakSelf.client URLProtocol:weakSelf didLoadData:data];
[weakSelf.client URLProtocolDidFinishLoading:weakSelf];
}];
[self.sessionTask resume];
}
