最近項(xiàng)目需要實(shí)現(xiàn)一個(gè)圖片瀏覽器的功能，要求也很常規(guī)戴质，如下：
1、具有彈出踢匣、收起動(dòng)畫
2告匠、在第N張圖片收起圖片瀏覽器時(shí)，容器內(nèi)容要求定位在該圖片的顯示位置
3离唬、流暢
最終實(shí)現(xiàn)效果如下：
2016-12-29 14_37_37.gif
由于項(xiàng)目中的文章頁面使用H5渲染后专，所以解決思路如下：
1、js通知native所需要顯示的圖片url數(shù)組输莺、index（當(dāng)前點(diǎn)擊的圖片索引）戚哎、rect（當(dāng)前點(diǎn)擊圖片的區(qū)域位置）
2、native在關(guān)閉圖片瀏覽器時(shí)嫂用，通知js當(dāng)前查看的圖片index（js根據(jù)index跳轉(zhuǎn)到網(wǎng)頁對(duì)應(yīng)位置）型凳，js回調(diào)native通知當(dāng)前圖片的rect（用于native播放收起動(dòng)畫）
期間遇到一個(gè)問題：
native并沒有webview中已加載的圖片資源，所以彈出動(dòng)畫難免出現(xiàn)加載過程嘱函，影響體驗(yàn)
解決方案如下：
注冊(cè)NSURLProtocol甘畅，監(jiān)聽webview中所有的圖片請(qǐng)求，并用SDWebImage緩存往弓，以u(píng)rl為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];
}
