基于爪哇岛描述语言实现文件实时加载进度的方法

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

代码如下

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题样式* { margin : 0；padd : 0；} div { width :200 pxheart : 30pxborder :1 px固体# cccmargin: 50px自动；} span { display : inline-block；height : 30pxbackground : # abcdef }/style/head body div span id=' loading '/span/div！-图片需要自己添加到本地协议要走超文本传送协议（Hyper Text Transport Protocol的缩写）或https - script var img_arr=['1.jpg '，' 1.jpg '，' 3。png ']；var nums=img _ arr . length var start=0；for(img _ arr中的var I){ var img=文档。创建元素(' img ')；img。src=img _ arr[I]；（函数{ img。onload=function(){ start；if(start==nums){ console.log('全部加载完成');}文档。getelementbyid(' loading ')。风格。width=(start/nums)* 100% '；};img。one rror=function(){ start；console.log(img_arr[j]'失败');文件。getelementbyid(' loading ')。风格。width=(start/nums)* 100% '；} })(一)；}/脚本/正文/html有些情况下，资源会加载失败，但是页面又需要显示出来。这里我是把失败的情况就跳过了，如果有需要，可以考虑重新换资源加载

注意事项

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

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

拓展

这里只监听了img格式，如果有需要，可以把射流研究…和钢性铸铁都加进来

注意：监听射流研究…或者css，需要把创建的资源追加到页面中，要不然监听不到装载和onerror事件

脚本var script _ arr=[' http://cdn。bootcss。com/jquery/3。1 .0/jquery。苗条。js '，' http://cdn。bootcss。com/jquery/3。0 .0-rc1/jquery。js '，' http://cdn。bootcss。com/jquery/3。0 .0-beta 1/jquery。苗条。量滴js ']；var nums=script _ arr . length var start=0；for(script _ arr中的var I){ var脚本=文档。创建元素(“脚本”)；剧本。src=script _ arr[I]；（函数{ document.body.appendChild(脚本);剧本。onload=function(){ start；if(start==nums){ console.log('全部加载完成');}文档。getelementbyid(' loading ')。风格。width=(start/nums)* 100% '；};剧本。one rror=function(){ start；控制台。日志(srscript _ arr[j]'失败');文件。getelementbyid(' loading ')。风格。width=(start/nums)* 100% '；} })(一)；}/脚本

总结

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