iOS7 UIWebview加载进度条实现
不同于WKWebview,wk是有自己的加载进度值的,我们可以直接通过kvo检测到,并显示到进度条内。
但如果我们为了适配ios7,只能使用UIWebview了,这里的加载进度,就比较尴尬了
所以我们的实现方式就是:模拟进度-俗称假进度。

实现原理:
自定义一个UIView的进度条,添加到Nav下方,给予两个方法:
1、startLoadingAnimation 开始加载
2、endLoadingAnimation 结束加载
开始加载,先动画模拟一个0.4s的加载,加载宽度为0.6倍屏幕宽度,动画结束,再0.4s实现,总共0.8倍的屏幕宽度。
结束动画,动画模拟1.0倍数的屏幕宽度,实现全部加载完成,并最后隐藏掉进度条。
代码:
.h文件
#import <UIKit/UIKit.h> @interface WebviewProgressLine : UIView //进度条颜色
@property (nonatomic,strong) UIColor *lineColor; //开始加载
-(void)startLoadingAnimation; //结束加载
-(void)endLoadingAnimation; @end
.m文件
#import "WebviewProgressLine.h"
@implementation WebviewProgressLine
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.hidden = YES;
self.backgroundColor = [UIColor whiteColor];
}
return self;
}
-(void)setLineColor:(UIColor *)lineColor{
_lineColor = lineColor;
self.backgroundColor = lineColor;
}
-(void)startLoadingAnimation{
self.hidden = NO;
self.width = 0.0;
__weak UIView *weakSelf = self;
[UIView animateWithDuration:0.4 animations:^{
weakSelf.width = KScreenWidth * 0.6;
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.4 animations:^{
weakSelf.width = KScreenWidth * 0.8;
}];
}];
}
-(void)endLoadingAnimation{
__weak UIView *weakSelf = self;
[UIView animateWithDuration:0.2 animations:^{
weakSelf.width = KScreenWidth;
} completion:^(BOOL finished) {
weakSelf.hidden = YES;
}];
}
@end
webview页面使用:
#import "webviewViewController.h"
#import "WebviewProgressLine.h" @interface webviewViewController ()<UIWebViewDelegate>
@property (nonatomic,strong) UIWebView *webview;
@property (nonatomic,strong) WebviewProgressLine *progressLine; @end @implementation webviewViewController - (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor]; self.webview = [[UIWebView alloc] initWithFrame:self.view.frame];
self.webview.delegate = self;
[self.view addSubview:self.webview]; self.progressLine = [[WebviewProgressLine alloc] initWithFrame:CGRectMake(, , KScreenWidth, )];
self.progressLine.lineColor = [UIColor redColor];
[self.view addSubview:self.progressLine]; NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
[self.webview loadRequest:[NSURLRequest requestWithURL:url]]; } -(void)webViewDidStartLoad:(UIWebView *)webView{
[self.progressLine startLoadingAnimation];
} -(void)webViewDidFinishLoad:(UIWebView *)webView{
[self.progressLine endLoadingAnimation];
} -(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
[self.progressLine endLoadingAnimation];
}
由于内容比较简单,就不放Demo了,直接贴代码,大家可以试一下~
iOS7 UIWebview加载进度条实现的更多相关文章
- iOS UIWebView 加载进度条的使用-WKWebView的使用,更新2017.6.26
1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...
- 一个KVO 实现WKWebView加载进度条的例子 (注意最后移除观察者)
// // OpenWebViewController.m // Treasure // // Created by 蓝蓝色信子 on 16/7/29. // Copyright © 2016年 GY ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- 仿UC浏览器图片加载进度条
前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 在oracle中查询已知表名的表中所有字段名,每个字段是否是主键,是否是外键,是否为空的sql语句
查询表的所有列及其属性:select t.*,c.COMMENTS from user_tab_columns t,user_col_comments c where t.table_name = c ...
- 《JavaScript编程实战》
<JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
- CVPR14 图像检索papers
CVPR14年关于图像检索方面的papers,汇总成一个list,方便阅读. 图像检索 Triangulation embedding and democratic aggregation for i ...
- python文章学习列表
1.https://home.cnblogs.com/u/darkpig/feed/blog/ 这篇博主的系列文章 2.
- SXH232摄像头使用示范
It occurred to me suddenly that I wanted to program the our camera sensor for PC desktop, just like ...
- 阿里的STORM——JSTORM
看介绍文档貌似挺好:https://github.com/alibaba/jstorm 阿里拥有自己的实时计算引擎 类似于hadoop 中的MR 开源storm响应太慢 开源社区的速度完全跟不上A ...
- linux centos7 安装git
1.下载git wget https://github.com/git/git/archive/v2.14.1.zip 2.安装依赖 yum -y install zlib-devel openssl ...
- Java--解压缩zip包
Test.java import java.io.IOException; public class Test { public static void main(String[] args) thr ...
- Andrew Ng Machine Learning 专题【Linear Regression】
此文是斯坦福大学,机器学习界 superstar - Andrew Ng 所开设的 Coursera 课程:Machine Learning 的课程笔记. 力求简洁,仅代表本人观点,不足之处希望大家探 ...
- Caused by: com.alibaba.dubbo.remoting.TimeoutException: Waiting server-side response timeout by scan timer. start time: 2016-07-20 16:27:34.873, end time: 2016-07-20 16:27:39.895, client elapsed: 0 ms
方案一: 重启dubbo连接 zookeeper 方案二: 经压测,greys跟踪得知,是dubbo的monitor的问题.主要超时的方法是dubbo的getIP方法,monitor每次收集数据的时候 ...