? ? ? ? 本文章只針對iOS初級開發(fā)者，如果大家有更好的意見歡迎在下方留言。
? ? ? ? 不知道大家有沒有遇到這樣的問題，就是后臺返回的數(shù)據(jù)里面有一段html格式的數(shù)據(jù)里面包含文字和眾多的圖片，然后在客戶端通過webView加載這段數(shù)據(jù)，但是當圖片太多的時候輕則會特別慢重則會導(dǎo)致占用太多內(nèi)存導(dǎo)致手機內(nèi)存不足退出app，顯然不能滿足公司產(chǎn)品的要求。
? ? ? ? 為了解決這個問題真是搓破了腦瓜最后還是沒有解決，無意中看到了一個帖子關(guān)于懶加載html數(shù)據(jù)中的圖片，但是眾說紛紜好多關(guān)于這種問題的描述，沒有個能參考的帖子，所以今天在這里坐下來寫這個帖子希望能幫助和我一樣遇到此類問題的程序員。
關(guān)于解決這個問題需要準備一下一些東西：
1. jquery-3.1.1.js? -- 官網(wǎng)下載地址( jquery庫官方下載?)
2. jquery.lazyload.js? -- 官網(wǎng)下載地址( ?jquery.lazyload官方下載 )
3. 基本掌握js語法（當然不會也沒關(guān)系）
廢話不多說了，接下來上代碼?
//添加到約束的html字符串(為了簡單約束已去掉)，content為返回的html格式字符串
NSString*str = [NSStringstringWithFormat:@"%@"content];
//將html字符串中的src替換為data-original否則jquery不會實現(xiàn)懶加載******
NSString*htmlReplaceString = [strstringByReplacingOccurrencesOfString:@"src"withString:@"data-original"];
//獲取temp文件的路徑（temp文件為實現(xiàn)懶加載的js核心代碼）
NSString*tempPath = [[NSBundlemainBundle]pathForResource:@"temp"ofType:@"html"];
//加載temp內(nèi)容為字符串
NSString*tempHtml = [NSStringstringWithContentsOfFile:tempPathencoding:NSUTF8StringEncodingerror:nil];
//替換temp內(nèi)的占位符{{Content_holder}}為需要加載的HTML代碼
tempHtml = [tempHtmlstringByReplacingOccurrencesOfString:@"{{Content_holder}}"withString:htmlReplaceString];
//Temp目錄下的js文件(temp文件和jquery庫)在根路徑，因此需要在加載HTMLString時指定根路徑
NSString*basePath = [[NSBundlemainBundle]bundlePath];
NSURL*baseURL = [NSURLfileURLWithPath:basePath];
//加載HTMLString
[_webViewloadHTMLString:tempHtmlbaseURL:baseURL];
以上代碼加上本地的temp文件就可以實現(xiàn)一個html數(shù)據(jù)的懶加載，但是有時候我們不單單是在一個界面只加載一個webview，比如說在tableview的頭視圖上加載一個webview，但是webview懶加載時通過?
[webViewstringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"]
計算出來的高度是不包含懶加載的圖片的高度的，如果圖片有占位圖那么這里計算出來的高度只是文字的高度與占位圖的高度的和，因此就需要在圖片動態(tài)加載的過程中動態(tài)的來計算webview的高度。
在這里通過給webview里面的scrollview的contentSize設(shè)置一個監(jiān)聽
[_webView.scrollViewaddObserver:selfforKeyPath:@"contentSize"options:NSKeyValueObservingOptionNewcontext:nil];
當圖片動態(tài)的加載出來以后contentSize就會改變因此就會被監(jiān)聽到來重新給webview設(shè)置高度。
- (void)observeValueForKeyPath:(NSString*)keyPath ofObject:(id)object change:(NSDictionary*)change context:(void*)context
{
if([keyPathisEqualToString:@"contentSize"]) {
//檢測contentSize的實時的高度
webViewHeight=_webView.scrollView.contentSize.height;
if(_webView.height==webViewHeight) {//實時高度和上次webView的高度作比較，如果相等了說明圖片全部加載完成，否則沒有則需要重新給webview高度賦值并且刷新tableview
return;
}
dispatch_async(dispatch_get_main_queue(), ^{
//重新將webview的高度設(shè)置為scrollview的內(nèi)容高度
_webView.frame=CGRectMake(10,60,MainScreenWidth-10,webViewHeight+30);
//重新給headerView的frame賦值
_upView.frame=CGRectMake(0,0,UI_SCREEN_WIDTH,60+webViewHeight+90+70);
_tableView.tableHeaderView=_upView;
[_tableViewreloadData];
});
}
}
這里遇到一個小坑：當占位圖的高度比實際圖片的高度高的時候webview的高度還是文字和占位圖的高度的和，就會在底部留出一個空白區(qū)域，目前還沒有好的方法解決只能用高度比較小的占位圖?? ? ?如果大家有好的解決辦法歡迎積極分享。
demo下載地址 ?demo傳送門
