当前位置: 首页 > 编程笔记 >

使用Timer实现网页匀速加载的进度条样式

空英逸
2023-03-14
本文向大家介绍使用Timer实现网页匀速加载的进度条样式,包括了使用Timer实现网页匀速加载的进度条样式的使用技巧和注意事项,需要的朋友参考一下

在使用WebView加载网页时有时候网速等原因加载比较慢时,为了避免在加载网页的时候出现一片空白的区域,给用户很不好的体验感,我们往往在加载的时候添加一个进度条,使用户直观的感受到网页加载的进度,通常我们可以通过WebChromeClient里面的onProgressChanged()方法获取到当前的网页加载进度,但是当我们使用时会发现他的网页加载进度不是一点一点加载的,也许一下就加载到50%下一秒直接加载到80%,如果我们将其设置给progressBar看起来就很快而且很不顺畅,体验感较差,如下图所示加载的网页进度:

假如这样将其进度设置到progressBar的体验感就相当的差,如下图所示:

现在我们希望想要其在加载网页的时候希望给用户一种匀速加载的感觉,尽管他不是网页真正加载的进度,但我们只需要在网页刚开始加载后和网页加载结束前模拟一个匀速加载的效果,也就是重写WebViewClient的onPageStarted()方法,在其中开启一个定时器,重写onPageFinished(),将定时器关闭掉,达到匀速加载网页的效果,提到定时器,就不得不说一下相关的东西了。

简单来说就分成两个东西,一个Timer,另外一个就是timer的所要执行的计划或者说是任务(Task),将这个任务(task)设置给定时器(timer),告诉定时器(timer)什么时候执行任务(Task),而任务就是我们要要干的事,可以这样说定时器想一个闹钟(Timer),任务相当于我们起床(任务Task),当闹钟执行到我们设置的时间时(schedule),就提醒我们该起床了

Timer执行指定的任务可以有一下几种方法

//在指定的时间执行指定的任务。
 public void schedule(TimerTask task, Date when) {}
 //延迟指定时间后执行指定的任务
 public void schedule(TimerTask task, long delay) {}
 //按设置延迟时间和时间间隔重复执行指定的任务
 public void schedule(TimerTask task, long delay, long period) {}
 //在指定的时间和时间间隔重复执行指定的任务
 public void schedule(TimerTask task, Date when, long period) {}

在onPageStarted()我们通过开启一个定时器,每隔50ms开始progress+1,直到onPageFinished()取消定时器
package com.example.timerdemo;

import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
 private ProgressBar progressbar;
 private Activity _rootActivity;
 private WebView webView;
 private WebClient webClient;
 private Timer timer = new Timer();
 private int currentProgress = 0;
 String url = "http://appagent.gyfc.net.cn/NewHouse/index";
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  progressbar = (ProgressBar) findViewById(R.id.web_progressbar);
  webView = (WebView) findViewById(R.id.webView);
  webClient = new WebClient();
  webView.setWebViewClient(webClient);
  webView.setWebChromeClient(new WebChromeClient(){
   @Override
   public void onProgressChanged(WebView view, int newProgress) {
    super.onProgressChanged(view, newProgress);
    if (newProgress == 100) {
     stopTimeTask();
     progressbar.setVisibility(View.GONE);
    } else {
     if (newProgress > currentProgress) {
      progressbar.setProgress(newProgress);
      currentProgress = newProgress;
     }
    }
   }
  });
  findViewById(R.id.btn).setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    webView.loadUrl(url);
   }
  });
 }
 class WebClient extends WebViewClient{
  @Override
  public void onPageStarted(WebView view, String url, Bitmap favicon) {   super.onPageStarted(view, url, favicon);
   startTimeTask();
  }
  @Override
  public void onPageFinished(WebView view, String url) {
   // TODO Auto-generated method stub
   super.onPageFinished(view, url);
   stopTimeTask();
  }
 }
 /**
  * 启动定时器
  */
 private void startTimeTask() {
  stopTimeTask();
  timer = new Timer();
  timer.schedule(new TimerTask() {
   @Override
   public void run() {
    runOnUiThread(new Runnable() {
     @Override
     public void run() {
      // TODO Auto-generated method stub
      if (currentProgress < 90) {
       currentProgress += 1;
       progressbar.setProgress(currentProgress);
      } else {
       stopTimeTask();
      }
     }
    });
   }
  }, 0, 50);
 }
 /**
  * 关闭定时器
  */
 private void stopTimeTask() {
  if (timer != null) {
   timer.cancel();
   timer = null;
  }
 }
}
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
  <ProgressBar
   android:id="@+id/web_progressbar"
   style="?android:attr/progressBarStyleHorizontal"
   android:layout_width="match_parent"
   android:layout_height="3dp"
   android:progressDrawable="@drawable/progressbar_bg_style" />
  <WebView
   android:id="@+id/webView"
   android:layout_below="@id/web_progressbar"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  <Button 
   android:id="@+id/btn"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:text="加载网页"
   android:layout_alignParentBottom="true"
   android:background="#e5e5e5"/>
</RelativeLayout>

执行效果如下所示:

以上所述是小编给大家介绍的使用Timer实现网页匀速加载的进度条样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍JavaScript实现网页加载进度条代码超简单,包括了JavaScript实现网页加载进度条代码超简单的使用技巧和注意事项,需要的朋友参考一下 网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQu

  • 本文向大家介绍Ajax 实现加载进度条,包括了Ajax 实现加载进度条的使用技巧和注意事项,需要的朋友参考一下 ajax beforeSend: 先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户有没有登录 ,如果没有登录就停止请求 并提示。 $.ajax有一个参数是complete:function(){} 是在 请求完成之后执行的 ,配合beforeSend可以用来展示进

  • 本文向大家介绍Android Webview添加网页加载进度条实例详解,包括了Android Webview添加网页加载进度条实例详解的使用技巧和注意事项,需要的朋友参考一下 推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打

  • 本文向大家介绍Android中WebView加载网页设置进度条,包括了Android中WebView加载网页设置进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: pg.xml Java文件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现网页图片延时加载 提升网页打开速度,包括了js实现网页图片延时加载 提升网页打开速度的使用技巧和注意事项,需要的朋友参考一下 提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法。代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网

  • 本文向大家介绍vue 页面加载进度条组件实例,包括了vue 页面加载进度条组件实例的使用技巧和注意事项,需要的朋友参考一下 页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度