不同于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加载进度条实现的更多相关文章

  1. iOS UIWebView 加载进度条的使用-WKWebView的使用,更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

  2. 一个KVO 实现WKWebView加载进度条的例子 (注意最后移除观察者)

    // // OpenWebViewController.m // Treasure // // Created by 蓝蓝色信子 on 16/7/29. // Copyright © 2016年 GY ...

  3. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  4. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  5. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  6. 仿UC浏览器图片加载进度条

    前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

  7. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  8. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  9. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Derby安装,创建数据库,在Java程序中使用Derby

    1,下载并安装Derby: 下载地址:http://db.apache.org/derby /derby_downloads.html,下载最新版本. 我用的是10.5.3.0. 解压缩到任意文件夹, ...

  2. 【BZOJ】【3053】The Closest M Points

    KD-Tree 题目大意:K维空间内,与给定点欧几里得距离最近的 m 个点. KD树啊……还能怎样啊……然而扩展到k维其实并没多么复杂?除了我已经脑补不出建树过程……不过代码好像变化不大>_&g ...

  3. TRIZ理论的进化法则分析(TRIZ学习笔记)

    人们在创新和完好系统的过程能够遵循一定的规律(或者叫法则).从而降低创新和完好系统过程中的试错成本,以下就TRIZ的八大进化原则来进行说明(这个八大法则是前人们的总结,我这里当然会增加我的理解). 我 ...

  4. Java集合框架2

    8. 枚举(Enum)使用示例 声明一个枚举类型的简单形式如下: 访问类型 enum 枚举类名{值1[,值2,......]}; 例8. 为枚举类添加辅助方法. package set; public ...

  5. C++ Jsoncpp源代码编译与解析Json

    1.Json 数据表示方式介绍 这个可以看之前的一个文章里面有说明:Java解析(读取)Json数据 2.C++ Jsoncpp 2.1 Jsoncpp介绍 (1)JsonCpp主要包含三种类型的cl ...

  6. 使用Spring Security和OAuth2实现RESTful服务安全认证

    这篇教程是展示如何设置一个OAuth2服务来保护REST资源. 源代码下载github. (https://github.com/iainporter/oauth2-provider)你能下载这个源码 ...

  7. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  8. 怎样在Ubuntu中修改默认程序

    这个新手指南会向你展示如何在 Ubuntu Linux 中修改默认程序.对于我来说,安装 VLC 多媒体播放器是安装完 Ubuntu 16.04 该做的事中最先做的几件事之一.为了能够使我双击一个视频 ...

  9. CentOS 7.0 安装 ZCS 8.6.0

    简介 Zimbra的核心产品是Zimbra协作套件(Zimbra Collaboration Suite,简称ZCS).除了它的核心功能是电子邮件和日程安排服务器,当然还包括许多其它的功能,就象是下一 ...

  10. 在Fedora10上安装MySQL5.0.18,告捷!

    又一次安MySQL了,为什么又呢,因为前面成功那次算配置,即配置Fedora10自带的MySQL,这个还不算自己安装的,所以有必要再安装一次,以后还装也有可能,换操作系统,换MySql版本都可能这样做 ...