基于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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python重要函数eval多种用法解析
2020/01/14 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
老人祝寿主持词
2014/03/28 职场文书
医院党员公开承诺书
2014/08/30 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
实习介绍信模板
2015/01/30 职场文书
实习单位推荐信
2015/03/27 职场文书
管理失职检讨书
2015/05/05 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python