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/ ...
随机推荐
- Derby安装,创建数据库,在Java程序中使用Derby
1,下载并安装Derby: 下载地址:http://db.apache.org/derby /derby_downloads.html,下载最新版本. 我用的是10.5.3.0. 解压缩到任意文件夹, ...
- 【BZOJ】【3053】The Closest M Points
KD-Tree 题目大意:K维空间内,与给定点欧几里得距离最近的 m 个点. KD树啊……还能怎样啊……然而扩展到k维其实并没多么复杂?除了我已经脑补不出建树过程……不过代码好像变化不大>_&g ...
- TRIZ理论的进化法则分析(TRIZ学习笔记)
人们在创新和完好系统的过程能够遵循一定的规律(或者叫法则).从而降低创新和完好系统过程中的试错成本,以下就TRIZ的八大进化原则来进行说明(这个八大法则是前人们的总结,我这里当然会增加我的理解). 我 ...
- Java集合框架2
8. 枚举(Enum)使用示例 声明一个枚举类型的简单形式如下: 访问类型 enum 枚举类名{值1[,值2,......]}; 例8. 为枚举类添加辅助方法. package set; public ...
- C++ Jsoncpp源代码编译与解析Json
1.Json 数据表示方式介绍 这个可以看之前的一个文章里面有说明:Java解析(读取)Json数据 2.C++ Jsoncpp 2.1 Jsoncpp介绍 (1)JsonCpp主要包含三种类型的cl ...
- 使用Spring Security和OAuth2实现RESTful服务安全认证
这篇教程是展示如何设置一个OAuth2服务来保护REST资源. 源代码下载github. (https://github.com/iainporter/oauth2-provider)你能下载这个源码 ...
- 简单使用CSS3实现炫酷读者墙效果
读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...
- 怎样在Ubuntu中修改默认程序
这个新手指南会向你展示如何在 Ubuntu Linux 中修改默认程序.对于我来说,安装 VLC 多媒体播放器是安装完 Ubuntu 16.04 该做的事中最先做的几件事之一.为了能够使我双击一个视频 ...
- CentOS 7.0 安装 ZCS 8.6.0
简介 Zimbra的核心产品是Zimbra协作套件(Zimbra Collaboration Suite,简称ZCS).除了它的核心功能是电子邮件和日程安排服务器,当然还包括许多其它的功能,就象是下一 ...
- 在Fedora10上安装MySQL5.0.18,告捷!
又一次安MySQL了,为什么又呢,因为前面成功那次算配置,即配置Fedora10自带的MySQL,这个还不算自己安装的,所以有必要再安装一次,以后还装也有可能,换操作系统,换MySql版本都可能这样做 ...