UIWebview仿微信进度条

一、实现：
myViewController.h :

@interface myViewController : UIViewController {
     BOOL theBool;
     //IBOutlet means you can place the progressView in Interface Builder and connect it to your code
     IBOutlet UIProgressView* myProgressView;
     NSTimer *myTimer;
}
@end

myViewController.m:

#import "myViewController.h"

@implementation myViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    // 仿微信进度条
    CGFloat progressBarHeight = 2.f;
    CGRect navigationBarBounds = self.navigationController.navigationBar.bounds;
    CGRect barFrame = CGRectMake(0, navigationBarBounds.size.height - progressBarHeight, navigationBarBounds.size.width, progressBarHeight);
    myProgressView = [[UIProgressView alloc] initWithFrame:barFrame];
    myProgressView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
    myProgressView.progressTintColor = [UIColor colorWithRed:43.0/255.0 green:186.0/255.0  blue:0.0/255.0  alpha:1.0];
    [self.navigationController.navigationBar addSubview:myProgressView];
   
    // 设置网络请求失败情况页面显示   
    [self loadFailViewSetting];
    // 请求网络
    [self reRequesrtUrl];
}

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
  
    // 移除 progress view
    // because UINavigationBar is shared with other ViewControllers
    [myProgressView removeFromSuperview];  
}

- (void)webViewDidStartLoad:(UIWebView *)webView{
     myProgressView.progress = 0;
     theBool = false;
     //0.01667 is roughly 1/60, so it will update at 60 FPS
     myTimer = [NSTimer scheduledTimerWithTimeInterval:0.01667 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
     theBool = true;
}
-(void)timerCallback {
    if (theBool) {
         if (myProgressView.progress >= 1) {
              myProgressView.hidden = true;
              [myTimer invalidate];
              myTimer = nil;
         }
         else {
              myProgressView.progress += 0.1;
         }
    }
    else {
         myProgressView.progress += 0.05;
         if (myProgressView.progress >= 0.95) {
              myProgressView.progress = 0.95;
             // 注：这里关闭时间计时器，不然如果网页加载非常慢，计时器会一直执行，因为刷新比较迅速，会导致页面卡顿。这里关闭，在网页请求结束代理里面，再执行隐藏进度条动画
             [myTimer invalidate];
              myTimer = nil;
         }
    }
}
@end

二、原理：

It's difficult (if even possible), since you would have to track all resources loaded by the site, but …
I have one idea. It's more of a **trick** than a real solution, but I think even Apple uses this in Messages app :)

1. When you start loading the page, **begin an animation to 90%** of the progress (let's say with duration of 1.5 seconds, maybe be different for Wi-Fi, LTE, 3G, …).
2. When page loads in meantime, **quickly animate the progress to 100%**. Done!
3. If the page takes more time to load, the progress bar **will stop at 90% and will wait there**. Frustrating moment when the user watches slow spinning indicator in status bar! And then finally, the page finish loading and (as in bullet 2.) you play **quick animation to 100%**. Done!

I think we all know, that this is how Messages app works, since I don't believe sending SMS can be tracked with such accurate progress :)

大致意思，就是这个进度条是个假象，先进度到90%，然后等待加载完毕，完毕后瞬间进度到100%。

仿微信进度条，暂时是这样处理的。如您有更好的方法，欢迎给予指点。

三、补充（2016.11.02）：

iOS 8 之后可以使用WKWebView替换UIWebView,性能各方面有很大提高。学习期间写了个小demo，点击下载 下载地址 。

参考链接：

1. http://www.jianshu.com/p/318e774d82fe
2. http://www.jianshu.com/p/6ba2507445e4
3. https://github.com/wangyangcc/IMYWebView
4. http://blog.csdn.net/y550918116j/article/details/49684127