进度条核心方法，通常j不考虑判断到100，根据项目中的图片数量可能有所差异所以到95就可以了

//根据图片load进度条

function loadingAsImgLength(){

        var precent= 1;

        var imglen = $('img').length;

        for(var i = 0; i < imglen; i++){

            var imgs = new Image();

            imgs.src = $('img').eq(i).attr("src");

            imgs.onload = function () {

                precent= precent+=1;

                var num = parseInt((precent/(imglen-1))*100);

                var j  = num;

                j = isNaN(j)?100:j;

                (function (j) {

                    setTimeout(function () {

                        //开始加载

                        $(".load_tips font").html(j+"%");

                        if(j>=95){

                            j = 100;

                            $(".load_tips font").html("100%");

                            setTimeout(function(){

                                console.log("加载完成后的操作");

                            },200)

                            return;

                        }

                    },j*15)

                })(j)

            }

        }

}

下面是用canvas画的一个进度实现。

创建HTML文件，CSS文件和JavaScript文件，并引入jquery。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta name="full-screen" content="yes">

		<meta name="browsermode" content="application">

    	<meta name="x5-orientation" content="portrait">

		<title>圆形进度条加载</title>

	</head>

		<link rel="stylesheet" href="css/circle.css">

	<body>

		<div class="periphery">

			<canvas id="circleCanvas" width="200" height="200"></canvas>

			<!--请用img标签添加图片资源进行测试，越多越好，为避免看不到效果请把canvas层级调高-->

			<img src='a.jpg'/>

			<img src='a.jpg'/>

			<img src='a.jpg'/>

			<img src='a.jpg'/>

		</div>

		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

		<script type="text/javascript" src="js/circle.js" ></script>

	</body>

</html>

　　css样式，自行调整大小或位置

/*初始化页面*/

*{

	padding:0;

	margin:0;

	border:0;

}

body,html{

	width:100%;

	height:100%;

	overflow: hidden;

}

.periphery{

	width:100%;

	height:100%;

	position: relative;

	background: #ccc;

}

#circleCanvas{

	position: absolute;

	top:50%;

	left:50%;

	transform: translate(-50%,-50%);

}

.periphery img{

	opacity: 0;

}

　　接下来是核心功能实现，采用js绘制并渲染canvas

function drawCircleLoading(ctx,progress){

	ctx.clearRect(0,0,200,200);

	ctx.beginPath();

	ctx.lineWidth=10;

	ctx.strokeStyle='rgba(50,207,224,1)';

	ctx.arc(100,100,40,0,2 * Math.PI,false);

	ctx.stroke();

	ctx.beginPath();

	ctx.lineWidth=4;

	ctx.strokeStyle='rgba(50,207,224,1)';

	ctx.arc(100,100,50,0,2 * Math.PI,false);

	ctx.stroke();

	ctx.beginPath();

	ctx.lineWidth=4;

	ctx.strokeStyle='rgba(0,0,0,0.2)';

	ctx.arc(100,100,50,0,2 * Math.PI,false);

	ctx.stroke();

	ctx.beginPath();

	ctx.save()

	ctx.translate(0,200);

	ctx.rotate(270 * Math.PI/180);

	ctx.lineWidth=10;

	ctx.strokeStyle='rgba(0,0,0,0.2)';

	ctx.arc(100,100,40,0,1.9999 * Math.PI * (progress * 0.01),true);

	ctx.stroke();

	ctx.restore();

	ctx.beginPath();

	ctx.font="18px Arial";

	ctx.fillStyle="#0000ff";

	ctx.fillText(progress+"%",100 - (ctx.measureText(progress+"%").width) / 2,100 + 6);

	ctx.fill();

	ctx.closePath();

}

//根据图片load进度条

function loadingAsImgLength(){

		//创建Canvas

		var c=document.getElementById("circleCanvas");

		var ctx=c.getContext("2d");

	    var precent= -1;

    	var imglen = $('img').length;

        for(var i = 0; i < imglen; i++){

            var imgs = new Image();

            imgs.src = $('img').eq(i).attr("src");

            imgs.onload = function () {

            	precent= precent+=1;

            	var num = parseInt((precent/(imglen-1))*100);

            	var j  = num;

				(function (j) {

					setTimeout(function () {

						//开始加载

						drawCircleLoading(ctx,j);

						console.log(j)

		    			if(j>=100){

		    				j = 100;

		    				drawCircleLoading(ctx,j);

		    				setTimeout(function(){

		    					//这里放加载结束后的操作代码

//		    					alert("over");

		    				},600)

		    				return;

		    			}

		    		},j*20)

				})(j)

            }

        }

}

$(function(){

	loadingAsImgLength();

})

　　注意事项：请保证图片路径正确，并尽可能添加多的img标签来确保看到效果。

　　最终实现的效果图：

　　　　

web前端js实现资源加载进度条的更多相关文章

  1. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  2. prelaod场景，用来显示资源加载进度

    phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...

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

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

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

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

  5. js页面加载进度条

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

  6. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  7. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

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

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

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

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

随机推荐

  1. Docker与Ceph的分与合

    前言 docker是一个管理工具,在操作系统之上提供了一个新的独立轻环境,好处是本地提供了一个基础镜像,然后基于镜像再运行环境,也可以把环境重新打包为镜像,管理起来类似于git,感觉非常的方便,并且能 ...

  2. ubuntu配置简单的DNS服务器

    之所以说是简单的服务器,实现的功能很简单,通过这个dns server 查询制定域名的时候,能够根据设置的值来返回IP,当前的需求是需要轮询的返回IP DNS 轮询机制会受到多方面的影响,如:A记录的 ...

  3. Java并发编程 - Runnbale、Future、Callable 你不知道的那点事（一）

    从事Java开发已经快两年了,都说Java并发编程比较难,比较重要,关键面试必问,但是在我的日常开发过程中,还真的没有过多的用到过并发编程:这不疫情嘛,周末不能瞎逛,就看看师傅们常说的 Runnabl ...

  4. JPA、Hibernate、Spring-Data-Jpa的本质区别

    什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支持 ...

  5. 整理了 15 道 Spring Boot 高频面试题，看完当面霸！

    转载:https://mp.weixin.qq.com/s/fj-DeDfGcIAs8jQbs6bbPA 什么是面霸?就是在面试中,神挡杀神佛挡杀佛,见招拆招,面到面试官自惭形秽自叹不如!松哥希望本文 ...

  6. scala的异常处理try catch

    object Test { def main(args: Array[String]) { try { val f = new FileReader("input.txt") } ...

  7. PDF文档工具：pdfFactory快照功能详解

    pdfFactory的快照功能,是通过一种类似截图的方式,将文档中的内容,如标题.图片.段落.文字等进行剪切的功能.剪切后的内容会转化为文本框的形式,我们可以对其进行加边框.旋转等编辑处理,但不能对其 ...

  8. 【PUPPETEER】初探之执行JavaScript方法（六）

    一.知识点 page.evaluate() document.querySelector().value = ''; 二.解析知识点 page.evaluate(),查看puppeteer 的api ...

  9. Java蓝桥杯——递归练习题：走台阶（偶数版）

    递归练习题:走台阶(偶数版) 小明刚刚看完电影<第39级台阶>.离开电影院的时候,他数了数礼堂前的台阶数,恰好是39级! 站在台阶前,他突然又想着一个问题: 如果我每一步只能迈上1个或2个 ...

  10. Java基础教程——变量

    变量 变量(variable)可以理解为一个"有名称的容器",用于装各种不同类型的数据.编程人员通过对变量的访问和修改,操作内存中的数据. 对变量的理解:https://www.c ...