进度条核心方法，通常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. 自动化翻译ceph文档

    需求很简单,翻译官网的操作文档 下载ceph代码luminous版本 这个只用来编译doc的,我们只需要最新的这个分支即可,拉最少的代码 git clone -b v12.2.13 --single- ...

  2. 练习启动各种浏览器的同时加载插件：Firefox， Chrome， IE

    # -*- coding:utf-8 -*-import osimport seleniumfrom selenium import webdriverfrom selenium.webdriver. ...

  3. SQL Server 批量生成数据库内多个表的表结构

    在遇到大型数据库的时候,一个数据库内存在大量的数据表,如果要生成多个表的表结构,一个表的检索,然后右键Create出来,太麻烦了. 下面我介绍下批量选择并生成多个表的表结构快捷方式,仅供参考. 第一步 ...

  4. Netty源码解析 -- 内存对齐类SizeClasses

    在学习Netty内存池之前,我们先了解一下Netty的内存对齐类SizeClasses,它为Netty内存池中的内存块提供大小对齐,索引计算等服务方法. 源码分析基于Netty 4.1.52 Nett ...

  5. PHP一些不一样的思路

    大多数来自p牛 SQL注入(left join) 源代码 <?php $link = mysqli_connect('localhost', 'root', 'root'); mysqli_se ...

  6. python-网络安全编程第二天（文件操作）

    前言 才吃完火锅嘿嘿,吃完把今天所学的内容写个博客当做笔记用哈哈! 文件操作 f=open("test.txt",w)直接打开一个文件,如果文件不存在则创建文件open模式w:以写 ...

  7. Python自动玩"别再踩白块了"小游戏

    开发工具 Python版本:3.6.4 相关模块: numpy模块: CV2模块: pyautogui模块: pyscreenshot模块: 以及一些Python自带的模块. 环境搭建 安装Pytho ...

  8. 又陷入知识盲区了，面试被问SpringBoot集成dubbo，我当时就懵了

    前言 前两天在和粉丝聊天的时候,粉丝跟我说之前在面试的时候被问到SpringBoot这一块的知识被问的有点懵,和我问了不少这方面的东西.事后我想了想不如把这些东西分享出来吧,让更多的人看到,这样不管是 ...

  9. [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作

    [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作 目录 [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作 0x00 摘要 0x01 业务领域 1.1 SOFARegis ...

  10. 在IDM上设置防止过度抓取网站信息

    在使用Internet Download Manager(IDM)下载器时,有时会发现IDM自带的抓取功能过于强大,以至于有时会抓取一些无效的链接.那么,该如何避免IDM的过度抓取呢? 图1:IDM的 ...