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];
}
ios wkweb设置图片_ios·WKWebView\UIWebView加载HTMLString,实现图片懒加载相关推荐
- 图片懒加载和Vue路由懒加载
图片懒加载 什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
- 懒加载和预加载的区别_类的动态创建(ro,rw)amp; 懒加载类和非懒加载类底层加载的区别 amp; 类和分类的搭配分析...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨OSMin链接:https://juejin.im/post/5 ...
- mysql 懒加载数据_jpa如何懒加载大字段,懒加载之后又如何获取懒加载字段
前言:对于大字段,我们在查询列表的时候不需要查询,但是修改的时候有需要展示大字段内容,怎么办 问1.jpa如何懒加载大字段?即查询列表的时候不查询出来 问2.懒加载之后又如何获取懒加载字段.比如,在后 ...
- ios wkweb设置图片_iOS 之 WKWebView自适应高度获取网络图片
WKWebView是iOS8中引入的新组建,苹果将 UIWebViewDelegate 与 UIWebView 重构成了14个类和3个协议并引入了不少新的功能和接口,它代替了UIKit 中的 UIWe ...
- ios wkweb设置图片_iOS WKWebView的使用
WKWebView的使用 前言 最近项目中的UIWebView被替换为了WKWebView,因此来总结一下. 示例Demo:WKWebView的使用 本文将从以下几方面介绍WKWebView: 1.W ...
- selenium截图模糊_Selenium截屏 图片未加载的问题解决--【懒加载】
需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载 如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...
- 图片懒加载, Vue-Lazyload实现懒加载
1.图片懒加载 1.1.什么是图片懒加载 图片懒加载 图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页 ...
- ios wkweb设置图片_iOS wkwebview和 uiwebview 内容图片自适应大小
- (void)webViewDidFinishLoad:(UIWebView *)webView { // 2.都有效果 NSString *js=@"var script = docum ...
- ios wkweb设置图片_iOS WKWebView (NSURLProtocol)拦截js、css,图片资源
项目地址github:HybirdWKWebVIew HybridNSURLProtocol 一个基于WKWebView的hybirde的容器.能拦截所有WKWKWebView的的css,js,png ...
最新文章
- 网站路径及文件路径问题
- jquery.treeview.js树控件的应用
- 图像处理之基于NCC模板匹配识别
- 5.jsp中动态include与静态include的区别
- 源自Google、Facebook、Netflix和Cisco的10款开源安全工具很值得回味
- MongoDB数据库(了解MongoDB及基础命令,备份数据库)
- sqlyog怎么设置默认值_物联网卡三网APN设置
- Repeater的嵌套
- python程序跨平台桌面_Python中的跨平台桌面通知程序
- Java教程:Java程序的运行过程(执行流程)分析
- MFC工作笔记0001---认识MFC
- vue组件双向绑定.sync修饰符的一个坑
- PAT (Basic Level) Practice1025 反转链表
- 腾讯的KDD competition
- 向量组A可以由一个向量组B表出,并且A的秩小于B的秩,那么A线性相关
- 微信公众号迁移公证需要哪些材料?账号迁移流程来了
- 大于一千的最小质数c语言,c语言找出大于m的最小素数
- VMware workstations安装黑苹果系统
- 三点运算符(...)的使用
- CSS3正方体图片轮换
热门文章
- SpringBoot + Element UI 楠橘星后台管理系统一键打包部署教程文档
- Kubernetes监控:Dashbaord 2.0.0部署方式
- PD快充DRP-TypeC连接状态机详解
- iOS 本地打包工具 自动化
- [译] Architecture Components 之 Room Persistence Library
- CodeForces Canada Cup 2016 A、B水题 _(:з」∠)_
- 文人教你说祝福——古语祝福
- python str center_Python str方法总结
- 图文讲解 WiFi 驱动移植过程,很肝~
- 计算机考完试后感想,期中考试后的感想(精选10篇)