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

前端之家收集整理的这篇文章主要介绍了基于Javascript实现文件实时加载进度的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

代码如下

<Meta charset="UTF-8"> Document

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

注意事项

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

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

拓展

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

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

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);

}

总结

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

猜你在找的JavaScript相关文章