基于Javascript实现文件实时加载进度的方法
更新时间：2016年10月12日 11:06:46 作者：Tiny_z
不知道大家有没有发现在现在的移动页面上，有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距，有些时候需要一些取巧的方式来提升用户体验，而实时显示加载进度就是其中一种。这篇文章就给大家分享了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，可以方便看到加载的进度,然后禁止使用缓存
拓展
这里只监听了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>
总结
以上就是这篇文章的全部内容了，本文实现的这个功能还是很实用的，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以交流。
相关文章
发现一个关于浏览器兼容的问题，当用JS 执行代码 window.location.href=”http://www.jb51.net” 来进行跳转的时候，Firefox 可以获取到到HTTP_REFERER页面，但是在IE中这一项为空2014-06-06
JS获取并操作iframe中元素的方法，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了JavaScript将数组转换成CSV格式的方法,实例分析了javascript使用valueOf方法将数组值转换为csv格式字符串的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
大体的意思就是想写一些js,使得网页上能玩多个游戏。譬如：贪吃蛇、俄罗斯方块、推箱子、坦克等等。2009-12-12
这篇文章主要介绍了JavaScript实现提交模式窗口后刷新父窗口数据的方法,涉及javascript窗口交互的相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了JS如何在数组指定位置插入元素,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
Bootstrap 4是一次重大更新，几乎涉及每行代码，这篇文章为大家分享了Bootstrap 4.0重大更新及亮点详细解读，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了基于bootstrap实现图片轮播效果的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下2016-05-05
下面小编就为大家分享一篇webpack本地开发环境无法用IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。2009-08-08
最新评论