基于Javascript实现文件实时加载进度的方法


Posted in Javascript onOctober 12, 2016

我们首先来看看要实现的效果图

基于Javascript实现文件实时加载进度的方法

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{margin: 0;padding: 0;}
  div{width:200px;height: 30px;border:1px solid #ccc;margin: 50px auto;}
  span{display:inline-block;height: 30px;background: #abcdef;}
 </style>
</head>
<body>

 <div>
  <span id="loading"></span>
 </div>


 <!-- 图片需要自己添加到本地 协议要走http or https -->
 <script>
  var img_arr = ['1.jpg','2.jpg','3.png'];
  var nums = img_arr.length;
  var start = 0;
  for(var i in img_arr){
   var img = document.createElement('img');
   img.src = img_arr[i];
   (function(j){
    img.onload = function(){
     start++;
     if(start == nums){
      console.log('全部加载完成');
     }
     document.getElementById('loading').style.width = (start/nums)*100 + '%';
    };
    img.onerror = function(){
     start++;
     console.log(img_arr[j] + '失败');
     document.getElementById('loading').style.width = (start/nums)*100 + '%';
    }
   })(i);

  }

 </script>
</body>
</html>

有些情况下,资源会加载失败,但是页面又需要显示出来。这里我是把失败的情况就跳过了,如果有需要,可以考虑重新换资源加载

注意事项

     1、测试的时候,需要把文件放到服务器上,走本地的file协议是看不到效果的

     2、测试的时候,可以把网络设置为2g或者3g,可以方便看到加载的进度,然后禁止使用缓存

基于Javascript实现文件实时加载进度的方法

拓展

这里只监听了img格式,如果有需要,可以把js和css都加进来

注意:监听js或者css,需要把创建的资源追加到页面中,要不然监听不到onload和onerror事件

<script>
  var script_arr = ['http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js','http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js','http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.slim.min.js'];
  var nums = script_arr.length;
  var start = 0;
  for(var i in script_arr){
   var script = document.createElement('script');
   script.src = script_arr[i];
   (function(j){
    document.body.appendChild(script);
    script.onload = function(){
     start++;
     if(start == nums){
      console.log('全部加载完成');
     }
     document.getElementById('loading').style.width = (start/nums)*100 + '%';
    };
    script.onerror = function(){
     start++;
     console.log(srcript_arr[j] + '失败');
     document.getElementById('loading').style.width = (start/nums)*100 + '%';
    }
   })(i);

  }

 </script>

基于Javascript实现文件实时加载进度的方法

总结

以上就是这篇文章的全部内容了,本文实现的这个功能还是很实用的,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以交流。

Javascript 相关文章推荐
js一组验证函数
Dec 20 Javascript
jquery 上下滚动广告
Jun 17 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
Vue.js中数组变动的检测详解
Oct 12 #Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 #Javascript
jquery动态创建div与input的实例代码
Oct 12 #Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 #Javascript
jquery动态添加文本并获取值的方法
Oct 12 #Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 #Javascript
微信小程序 生命周期详解
Oct 12 #Javascript
You might like
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
python 代码运行时间获取方式详解
2020/09/18 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
学校司机岗位职责
2013/11/14 职场文书
入党思想汇报
2014/01/05 职场文书
给医务人员表扬信
2014/01/12 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
物业公司管理制度
2015/08/05 职场文书
新学期家长寄语2016
2015/12/03 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Python中的嵌套循环详情
2022/03/23 Python