web前端js实现资源加载进度条
进度条核心方法，通常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实现资源加载进度条的更多相关文章
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- prelaod场景，用来显示资源加载进度
phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26
1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...
随机推荐
- 对App应用架构搭建的一些思考
当下随着App开发技术的越来越成熟,多人协同开发必不可少,一个团队中每个人的代码风格.技术栈都存在差异,因此统一一套成熟的开发架构必不可少,可以提高开发效率.统一代码风格.为项目维护提供便利. 当下A ...
- 【javascript】掌握ES6-10，附xmind思维导图，每个知识点备注说明案例，请享用
前段时间一直想掌握ES6-10,陆陆续续花了1个月的时间,自学了ES6-10的新知识点,大部分都是非常实用的,花了2天时间整理思维导图 思维导图已上传博客园,请享用. ES6-10思维导图xmind ...
- C# 9.0新特性详解系列之一：只初始化设置器（init only setter)
1.背景与动机 自C#1.0版本以来,我们要定义一个不可变数据类型的基本做法就是:先声明字段为readonly,再声明只包含get访问器的属性.例子如下: struct Point { public ...
- python 学习代码
1 #-- 寻求帮助: 2 dir(obj) # 简单的列出对象obj所包含的方法名称,返回一个字符串列表 3 help(obj.func) # 查询obj.func的具体介绍和用法 4 5 #-- ...
- pikachs 渗透测试2-XSS漏洞及利用
一.概述 XSS(跨站脚本)概述 Cross-Site Scripting 简称为"CSS",为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XS ...
- 在Guitar Pro中如何调节拍
编辑一首曲子的时候,曲子的节奏往往是很重要的,那节奏一般是怎样设置的呢,在{cms_selflink page='index' text='Guitar Pro'}中,一般是通过调节节拍来完成的,很多 ...
- EasyRecovery扫描预览功能，助你选择需要的数据恢复
说到数据恢复,很多人都会选择EasyRecovery,EasyRecovery作为一个功能性还不错的数据恢复软件,能够帮你恢复丢失的数据以及重建文件系统. 在数据恢复的同时,EasyRecovery还 ...
- Linux 学习笔记03丨Linux文件系统、文件基本属性、目录处理及文件查看
Chapter 2. 文件系统 2.1 Linux 系统目录结构 命令窗口下输入命令: $ ls /,能够看到根目录下的全部目录及文件 树状目录结构为: 最顶级的目录: / :根目录 / 是根目录,~ ...
- 编程小白必备——主流语言C语言知识点
对于编程语言来说,经常看到有因为各自支持的语言阵营而互怼的,其实根本没那个必要,都只是一种工具而已.当多数主流语言都会使用时也许你就不会有偏见了,本质不过都是用来描述计算机的一个任务,只是每门语言设计 ...
- C语言const和define的区别
const 定义的是变量不是常量,只是这个变量的值不允许改变是常变量!带有类型.编译运行的时候起作用存在类型检查. define 定义的是不带类型的常数,只进行简单的字符替换.在预编译的时候起作用,不 ...