精华内容
下载资源
问答
  • 页面加载进度条
    2021-08-15 19:42:25

    一:安装插件
    npm install --save nprogress
    二:在main.js中写以下代码
    import NProgress from ‘nprogress’
    import ‘nprogress/nprogress.css’
    //在main.js文件配置插件的功能
    NProgress.configure({
    easing: ‘ease’, // 动画方式
    speed: 500, // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3 // 初始化时的最小百分比
    })
    //监听路由跳转,进入页面执行插件动画。
    router.beforeEach((to, from , next) => {
    // 每次切换页面时,调用进度条
    NProgress.start();
    // 没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
    next();
    });
    //跳转结束了
    router.afterEach(() => {
    // 在即将进入新的页面组件前,关闭掉进度条
    NProgress.done()
    })

    在app.vue中:
    //更改进度条颜色
    #nprogress .bar {
    background:orangered !important; //自定义颜色
    }

    更多相关内容
  • 但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取...
  • 相信很多同仁做的系统后到都是用frameset或iframe来加载不同页面的,不可不知道大家有没有注意到,当frame框架中的页面已经加载完成后,可是ie浏览器的状态栏还会一直显示一个正在加载的状态。
  • javascript 实现页面加载进度条代码,需要的朋友可以参考下。
  • 主要介绍了网页加载进度条,文中解释了属性和应用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • 页面加载进度条

    2019-03-16 01:18:42
    NULL 博文链接:https://dabei0.iteye.com/blog/397699
  • 网页加载进度条实现方案

    千次阅读 2021-06-11 12:30:00
    原标题:网页加载进度条实现方案这次源码时代H5学科老师跟大家一起来总结下在web应用中常见的加载进度条实现方案。随着html5的普及,各种css3动画及js特效在网页中也是层出不穷,PC端加载数据的速度还是比较快的,...

    原标题:网页加载进度条实现方案

    这次源码时代H5学科老师跟大家一起来总结下在web应用中常见的加载进度条实现方案。

    随着html5的普及,各种css3动画及js特效在网页中也是层出不穷,PC端加载数据的速度还是比较快的,但是对于移动端设备而言则相对要慢不少,如果图片或者脚本没有加载完,用户在操作中就可能发生各种问题,因此我们需要对数据加载进行侦测,以更加人性化的方法将网页程序内容展现给用户,实现更佳的用户体验。

    先说一下整体的实现思路吧,常见的效果是将进度条的dom结构显示在页面最“前”(使用fixed定位 + 高z-index,提高优先级),主体内容相当于是被“隐藏”(实际是被遮盖)了,所以进度条一打开网页就有了,当网页内容全部加载完成后,触发js相关事件,执行回调函数:隐藏进度条的同时显示页面主体内容。

    【1. 定时器模拟制作进度条】

    很多同学会使用定时器的方式实现网页进度条,通常可以设置延迟3到5秒钟的时间后来显示网页内容,这样的确可以模拟出进度条的加载效果,不过这种方式会有一些问题,比如当前页面已经打开过了,浏览器中会有缓存数据,再次开启页面定时器依然会执行,反而会影响加载性能,原本可以“瞬间”完成的内容加载,现在由于定时器的原因也需要等待。还有一个就是在网络情况比较糟糕的情况下,很有可能3到5秒钟的时间也未必能够加载完成网页内容,这个时候定时器加载又显得比较鸡肋了。

    示例代码参考:load1.html

    样式:

    *{

    margin: 0;

    padding: 0;

    }

    #Loading{

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: orange;

    color: #fff;

    font-size: 40px;

    text-align: center;

    line-height: 10;

    }

    结构:

    loading...
    Hello world

    交互:

    <>

    var load_page = document.querySelector("#Loading");

    setTimeout(function(){

    load_page.style.display = "none";

    }, 3000)

    >

    小结:

    1. 定时器模拟制作进度条只能是视觉表现上的实现,而非真正意义上的解决方案。

    【2. 通过加载状态事件制作进度条】

    javascrip提供了相关事件机制可以监控页面的加载情况,我们可以通过加载状态事件实现进度条的制作,可以使用window.事件,等到页面中全部内容包括图片加载完成后才会被触发,或者使用document.onReadyStateChange事件,在ReadyStateChange事件中可通过自变量事件参数获取到页面加载的当前状态,分为5项内容:

    Uninitialized:未初始化

    Loading:载入

    Loaded:载入完成

    Interactive:交互

    Completed:完成

    而js通过ReadyStateChange事件可以获取到的仅为后2项状态,不过对于我们的代码实现而言仅仅只需要最后一个完成状态即可。

    示例代码参考:load2.html(样式代码同load1.html)

    结构:

    loading...

    Hello world

    d08e36dab9644c1fc0e8ad65136afe8d.png

    2fa0b3a8902e261b42e8992733bef70a.png

    24b349fb50f8bac4bd819f8d547aa76e.png

    交互:

    <>

    var load_page = document.querySelector("#Loading");

    document.onreadystatechange = function(e){

    if(e.target.readyState === "complete"){

    load_page.style.display = "none";

    }

    }

    >

    小结:

    1. 通过加载状态事件(window.或document.onreadystatechange)制作进度条,可真正意义上实现页面加载效果。

    【3. 实时获取加载数据制作进度条】

    通过加载状态事件制作进度条,可真正意义上实现页面加载效果,但是无法显示当前加载进度,当内容加载完成后直接就显示出了落地页,过程中缺少了加载进度提示,实际上对于网页而言加载图片之类的二进制资源文件是最大的加载开销,所以通常来讲图片资源往往是最后加载完成的,其加载行为本身又是异步的,所以我们可以通过图片自身的load事件判定其是否加载完成,执行回调函数实时计算加载进度,模拟实时获取加载数据进度条效果。

    示例代码参考:load3.html(样式代码同load1.html)

    结构:

    loading...

    0%

    Hello world

    d08e36dab9644c1fc0e8ad65136afe8d.png

    2fa0b3a8902e261b42e8992733bef70a.png

    24b349fb50f8bac4bd819f8d547aa76e.png

    05485b43f44f446e0cc078df02ab7391.png

    01c191190c688b7ef6bcbe07e2015826.png

    1547182a910e532ef8ced3d83a6e7846.png

    edc160efc0f6b14e3ec7f08a6ac55236.png

    d70767b5e8b5561c26f6b90697c28663.png

    785e495ff2edffed0527570431f6b16e.png

    4280dbefaa5c58527b87e60b83df8916.png

    交互:

    <>

    var load_page = document.querySelector("#Loading"),

    h2 = document.querySelector("h2"),

    imgs = document.querySelectorAll("img"),

    imgs_len = imgs.length,

    loaded = 0,

    load_callback = function(){

    loaded++;

    h2.innerHTML = parseInt(loaded/imgs_len*100) + "%";

    if(loaded === imgs_len) load_page.style.display = "none";

    };

    for(var i=0; i

    if(imgs[i].complete == true){//图片已加载完成

    load_callback();

    }else{

    imgs[i]. = function(){//图片动态加载完成触发

    load_callback();

    }

    }

    }

    >

    网站资源扩展:

    1. 动画图标资源:www.loading.io

    2. GIF预加载图标资源:www.preloaders.net

    感谢源码时代H5学科讲师提供此文章!

    本文为原创文章,转载请注明出处(http://www.itsource.cn)!返回搜狐,查看更多

    责任编辑:

    展开全文
  • 本篇文章主要介绍了HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例,具有一定的参考价值,有兴趣的可以了解一下。
  • 但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。 首先我们要知道的是,目前没有任何浏览器可以直接获取正在...
  • 作者keanlove,源码YJWebProgressLayer,模仿微信web页面加载进度条的读取,为了项目的敏捷性和简单性,现在的app常常会嵌入不少的H5页面,而如何优雅的显示这些web页面呢,我这里参照微信显示web页面的方式,做了一个...
  • html页面加载进度条

    2021-06-08 17:07:11
    程序代码#loader_container {filter:alpha...// 进度条透明度text-align:center;position:absolute;top:50%;width:100%;left: 0;}#loader {font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#97dee1;bac...

    程序代码

    #loader_container {

    filter:alpha(opacity=70);

    // 进度条透明度

    text-align:center;

    position:absolute;

    top:50%;

    width:100%;

    left: 0;

    }

    #loader {

    font-family:Tahoma, Helvetica, sans;

    font-size:11.5px;

    color:#97dee1;

    background-color:#FFFFFF;

    padding:10px 0 16px 0;

    margin:0 auto;

    display:block;

    width:230px;

    border:1px solid #ffffff;

    text-align:left;

    z-index:2;

    }

    #loader_bg {background-color:#fdfdfd;

    position:relative;

    top:8px;

    left:8px;

    height:7px;

    width:213px;

    font-size:1px}

    #progress {

    height:5px;

    font-size:1px;

    width:1px;

    position:relative;

    top:1px;

    left:0px;

    background-color:#97dee1

    }

    //读取框

    var t_id = setInterval(animate,20);

    var pos=0;

    var dir=2;

    var len=0;

    function animate()

    {

    var elem = document.getElementByIdx('progress');

    if(elem != null) {

    if (pos==0) len += dir;

    if (len>32 || pos>179) pos +=

    dir;

    if (pos>179) len -= dir;

    if (pos>179 &&

    len==0) pos=0;

    elem.style.left = pos;

    elem.style.width = len;

    }

    }

    function remove_loading() {

    this.clearInterval(t_id);

    var targelem = document.getElementByIdx('loader_container');

    targelem.style.display='none';

    targelem.style.visibility='hidden';

    initJS();

    }

    展开全文
  • 使用此插件,顶部出现一个横向进度条,可以显示你的整个网页加载情况,并附带loading效果
  • 后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之….其实还是比轻松要复杂点… 1、首先自定义一个WebView控件 /** * 带进度条的Webivew * @author ...
  • 网页加载页面显示进度条(加载完成时显示网页内容),这种效果在浏览网页很常见,本文也介绍一种实现方法,需要了解的朋友可以参考下
  • js页面加载进度条

    2013-05-07 16:33:06
    js页面加载进度条 虽然有些简单 但是可以用 有那个动态效果在
  • 仿微信网页加载进度条仿微信网页加载进度条仿微信网页加载进度条
  • Loading网页加载进度条动画效果是一款基于jquery+CSS3 animation属性实现的酷炫的Loading网页加载进度条动画效果。
  • AngularJS Omni 栏 可用于显示进度、完成、百分比等的原生 AngularJS 栏。 演示和操作方法 转到 当前版本 1.0.1 更改日志 参见 错误报告 首先在问题部分搜索。 有人可能报告了相同的错误和/或提出了类似的问题。...
  • 网页加载进度条插件MProgress.js是一款通过纯JS和CSS3实现的,没有外部依赖库。总共有4种不同类型的Material Design风格进度条效果。
  • 网页加载进度条

    2018-03-29 14:16:22
    1、使用定时器来做网页加载定时器(先由一个加载的div覆盖住网页,过几秒钟消失),不切合实际好用的加载图片,给大家推荐一个网站:https://icons8.com/preloaders/en/free&lt;style type="text/css"...

    1、使用定时器来做网页加载定时器(先由一个加载的div覆盖住网页,过几秒钟消失),不切合实际

    好用的加载图片,给大家推荐一个网站:https://icons8.com/preloaders/en/free

    <style type="text/css">
        * { margin: 0; padding: 0; }
        .loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }    // 加载的图片盖住页面内容
        // left: 0; right: 0; top: 0; bottom: 0; margin: auto;可以居中
        .pic { position: absolute; background: url('./images/1.gif') no-repeat; width: 64px; height: 64px; background-size: 64px 64px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}</style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function () {
    		setInterval(function () {
    			$('.loading').fadeOut();        // 过三秒之后,加载的图片消失
    		}, 3000);
    	})		
    </script>
    <div class="loading"><div class="pic"></div></div>

    2、通过加载事件制作进度条

    document.onreadystatechange:页面加载状态改变时的事件

    document.readyState:返回当前文档的状态包括:

    (1)uninitialized:还未开始载入(2)loading:载入中

    (3)interactive:已加载,文档与用户可以开始交互 (4)complete:载入完成

    <script type="text/javascript">
    	document.onreadystatechange = function () {          // 当文档加载状态改变时
    	    if (document.readyState == 'complete') {         // 当文档状态完成时
    		$('.loading').fadeOut();
    	    }
            }	
    </script>

    3、不使用图片,使用css动画

    可以在线生成css动画的网站:https://loading.io/

    在线补全css兼容的网站:http://autoprefixer.github.io/

    4、定位在头部的加载条:根据文档是从上而下加载的

    <style type="text/css">
    	* { margin: 0; padding: 0; }
    	.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
    	.pic { position: absolute; width: 0; height: 5px; top: 0; background: red;}
    </style>
    <div class="loading"><div class="pic"></div></div>
    
    <header></header>
    <script type="text/javascript">
    	$('.pic').animate({ width: "30%" }, 100)              // 当加载完头的时候,长度。。。
    </script>
    <section></section>
    <script type="text/javascript">
    	$('.pic').animate({ width: "60%" }, 100)             // 当加载完section时,长度。。。。
    </script>
    <section></section>
    <script type="text/javascript">
    	$('.pic').animate({ width: "90%" }, 100)
    </script>
    <footer></footer>
    <script type="text/javascript">
    	$('.pic').animate({ width: "100%" }, 100, function () {       // 当加载完底部时,长度100%,隐藏
    		$('.loading').fadeOut();
    	})
    </script>

    5、实时获取加载进度条:根据网页中的图片,当图片都加载完后

    实现半圆转动:其实半圆是垂直阴影

    <style type="text/css">
    	* { margin: 0; padding: 0; }
    	.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }
    	.pic { position: absolute;width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; line-height: 100px; font-size:25px;}
    	.pic span { position: absolute;top: 10px;left:10px;display: block;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #ccc; animation: round 1s infinite linear;}
    	@keyframes round { 0% { transform: rotate(0); }  100% { transform: rotate(360deg); }}
    </style>
    <script type="text/javascript">
    	$(function () {
    		var img = $('img');                // 获取所有图片
    		var num = 0;
    		img.each(function (i) {
    			var oImg = new Image();
    			oImg.src = img[i].src;
    			oImg.onload = function () {   // 当图片加载好后
    				oImg.onload = null;   // 清除重复请求
    				num++;
    				$(".loading b").html(parseInt(num/($('img').length) * 100) + '%');  // 实时百分比
    				if (num >= $('img').length) { 
    					$(".loading").fadeOut();
    				}
    			}
    		})
    	});
    </script>
    <div class="loading">
    	<div class="pic">
    		<span></span>
    		<b>0%</b>
    	</div>	
    </div>

    效果:











    展开全文
  • 下面小编就为大家分享一篇vue 页面加载进度条组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 常用网页加载进度条

    2019-06-03 21:15:21
    素材工具: https://icons8.com/preloaders/ ... ... 思路:使用一个空白div 固定定位到页面上(z-index设置大一点),内容加载完后隐藏该div <div class="loading"> <div class="pic"> &...
  • 安装: cnpm install --save nprogress nprogress.js //引⼊nprogress import NProgress from 'nprogress' ...import 'nprogress/nprogress... speed: 500, // 递增进度条的速度 showSpinner: false, // 是否显⽰...
  • nprogress进度条一、安装二、方法三、全局引入四、配置五、路由中添加nprogress 一、安装 npm install --save nprogress 二、方法 NProgress.start() // 进度条开始 NProgress.set() // 将进度设置到具体的百分比...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,064
精华内容 13,225
关键字:

页面加载进度条

友情链接: Storage-problem.rar