常用的网页加载进度条

最新推荐文章于 2024-04-25 10:56:26 发布

djjj123456789

最新推荐文章于 2024-04-25 10:56:26 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签：进度条

本文链接：https://blog.csdn.net/djjj123456789/article/details/82755584

版权

关于进度条的图片，有几个专门的网站可以下载

https://icons8.com/preloaders/，

可以在这里直接下载需要使用的进度条类型图片

1.使用定时器来做一个固定时间的进度条

好处是比较简单，容易实现，缺点是当页面在电脑中已经有缓存了，本来可以快速加载页面的，但是每次仍然需要加载定时器的进度条，等待一个固定的时间

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

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

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

readyState：

1.uninitilized - 还未开始载入

2.loading - 载入中

3.interactive - 已加载，文档与用户可以开始交互

4.complete - 载入完成

document.onreadystatechange=function(){
if(document.readyState=="complete"){
   $(".loading").fadeOut();        //填写进度条实现方法
  }
}

3.定义在头部的进度条

原理是在<body></body>不同的位置设置进度条的width的百分比

	<script>
         $(".pic").animate({width:'10%'},100)
	</script>
	<script>
         $(".pic").animate({width:'80%'},100)
	</script>
	<script>
        $(".pic").animate({width:'100%'},100,function(){
        	$(".pic").fadeOut();
        })
	</script>

4.实时获得加载数据的进度条

建立图像对象：图像对象名称=new Image()

属性：border complete height...

事件：onload onerror onkeydown onkeypress...

src属性一定要写到onload的后面，否则程序在IE中会出错

               var img = $("img");
               var num=0;
               img.each(function(i){
                   var oImg=new Image();
                   oImg.onload=function(){
                   	oImg.onload=null;
                   	num++;
                   	$(".loading b").html(parseInt(num/$("img").length*100)+"%");
                   	if(num>=i){
                   		$(".loading").fadeOut();
                   	}

最低0.47元/天解锁文章

djjj123456789

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
常用的网页加载进度条

关于进度条的图片，有几个专门的网站可以下载https://icons8.com/preloaders/，可以在这里直接下载需要使用的进度条类型图片 1.使用定时器来做一个固定时间的进度条好处是比较简单，容易实现，缺点是当页面在电脑中已经有缓存了，本来可以快速加载页面的，但是每次仍然需要加载定时器的进度条，等待一个固定的时间2.通过加载状态事件制作进度条doc...
复制链接

扫一扫