背景:
项目中开发商品类型数据,数据可变性较大,所以商品详情数据存在文案和图片富文本显示,后台返回了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];
}