ios wkweb设置图片_ios·WKWebView\UIWebView加载HTMLString,实现图片懒加载

背景：

项目中开发商品类型数据，数据可变性较大，所以商品详情数据存在文案和图片富文本显示，后台返回了html格式的数据供前端展示。

如果用webView直接显示的话，需要等html内容完全展示才能获取webView需要展示的高度。但是我们需要做到的是，先展示文字和在有图片的地方展示占位图，等待图片加载完成再显示出图片。

场景：将WKWebView放在TableView的cell中进行展示，就需要计算内容的展示高度以刷新cell的高度。

实现思路：拿到后台返回的html字符串 - 加入jquery.js - 将拿到的html嵌入到自己创建的html内容 - loadWebViewWithHtmlString

上代码：

从服务端拿到的html如下：

• 品牌: 鼠绘动漫

• 型号: 碗

• 适用年龄: 14周岁以上

• 周边产品: 碗碟

• 出售状态: 现货

• 动漫地区: 日本

• 大小: 现货 微瑕

• ACG作品名: 海贼王/onepiece

• ACG角色名: 路

如果直接显示上面的html加载图片过程需要等待很长时间，才能加载出页面内容。

开始懒加载处理：

1、将上方下载的懒加载包，导入工程中：

image.png

2、在加载HTMLString前，先组装html数据，让html具有懒加载功能：

///实现html图片懒加载

- (void)lazyloadHTMLImagesWithHTMLString:(NSString *)htmlString complete:(void(^)(NSString *tempHtml, NSURL *baseURL))complete{

//替换标签

NSString *originalStr = [htmlString stringByReplacingOccurrencesOfString:@"src" withString:@"data-original"];

//获取temp文件的路径

NSString *tempPath = [[NSBundle mainBundle]pathForResource:@"temp" ofType:@"html"];

//加载temp内容为字符串

NSString *tempHtml = [NSString stringWithContentsOfFile:tempPath encoding:NSUTF8StringEncoding error:nil];

//替换temp内的占位符{{Content_holder}}为需要加载的HTML代码

tempHtml = [tempHtml stringByReplacingOccurrencesOfString:@"{{Content_holder}}" withString:originalStr];

//LazyloadImage目录下的js文件在根路径，因此需要在加载HTMLString时指定根路径

NSString *basePath = [[NSBundle mainBundle] bundlePath];

NSURL *baseURL = [NSURL fileURLWithPath:basePath];

if (complete) {

complete(tempHtml,baseURL);

}

}

3、组装好新的html之后，开始加载html内容：

///图片懒加载处理

[self lazyloadHTMLImagesWithHTMLString:model.htmlDesc complete:^(NSString *tempHtml, NSURL *baseURL) {

//加载html

[self.webView loadHTMLString:tempHtml baseURL:baseURL];

//添加观察者

[self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];

}];

4、给webview添加观察者，监听图片加载情况。等待图片加载完成，重新计算@"document.body.offsetHeight"高度，刷新展示控件的高度

#pragma mark - 观察者监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{

if([keyPath isEqualToString:@"contentSize"]) {//由于图片在实时加载，监听到内容高度变化，需要实时刷新您的控件展示高度 等

//设置展示元素样式

[self setWebViewFontStyle];

//刷新控件高度

[self refreshWebViewHeight:self.webView];

}

}

#pragma mark - webview加载 delegate

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

self.isLoaded = YES;

[self refreshWebViewHeight:webView];

}

//计算webView渲染高度并刷新视图

- (void)refreshWebViewHeight:(WKWebView *)webView{

[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result,NSError * _Nullable error){

CGFloat height = [result floatValue] + 20;//这里+20

[self.webView mas_remakeConstraints:^(MASConstraintMaker *make) {

make.top.mas_equalTo(self.titleLabel.mas_bottom).offset(5);

make.left.mas_equalTo(self.mas_left).offset(Interval_Size_8);

make.right.mas_equalTo(self.mas_right).offset(-Interval_Size_8);

make.height.mas_equalTo(@(height));

}];

if (self.contentHeight != height+1) {

self.contentHeight = height+1;

if (self.contentHeight > 0) {

if (self.loadedBlock) {

//这里获取到高度之后，根据具体逻辑进行处理

self.loadedBlock(self.contentHeight);//高度确定了，回调刷新详情页高度和tableView

}

}

}

}];

}

这样就可以实现加载HTMLString 先展示文字和占位符，图片等待加载完成再展示了。

懒加载效果：

未加入懒加载之前，等待webview加载需要耗时太久了，体验效果极差。

加入懒加载后就能完美加载富文本的html啦，管它图片有多大，管它网速有多慢~~

效果：

图片加载中.PNG

图片加载完成.PNG

其他：

可以往html中注入JS，修改展示样式等等：

//设置webView 样式

- (void)setWebViewFontStyle{

//字体颜色

[self.webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#666666'" completionHandler:nil];

//修改字体大小

[self.webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '90%'"completionHandler:nil];

//禁止用户选择

[self.webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none';" completionHandler:nil];

[self.webView evaluateJavaScript:@"document.activeElement.blur();" completionHandler:nil];

// 改变网页内容背景颜色

// [self.webView evaluateJavaScript:@"document.body.style.backgroundColor=\"#616465\"" completionHandler:nil];

}

//处理WKWebView 图片展示超出边界问题

- (void)processingBeyondTheBorder{

NSString *js = @"function imgAutoFit() { \

var imgs = document.getElementsByTagName('img'); \

for (var i = 0; i < imgs.length; ++i) {\

var img = imgs[i]; \

img.style.maxWidth = %f; \

} \

}";

js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width-Interval_Size_8*2];

//注入JS

[self.webView evaluateJavaScript:js completionHandler:nil];

[self.webView evaluateJavaScript:@"imgAutoFit()" completionHandler:nil];

}

//禁止缩放

- (void)setWebViewUserUnScalable{

NSString *js = @"var script = document.createElement('meta');"

"script.name = 'viewport';"

"script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"

"document.getElementsByTagName('head')[0].appendChild(script);";

//注入JS

[self.webView evaluateJavaScript:js completionHandler:nil];

}