js 多张图片加载 环形进度条

1 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; display: block;}2 svg circle{fill:none;cx:50;cy:50;}3 ?/* svg text{x:40;y:55;} 不起作用 ?原因不知*/4 svg #txt{ x:35;y:55%;fill:red;}5 svg #backdrop{stroke-linecap:round;stroke:#333; stroke-width:2px;r:48;}6 svg #progress{stroke:#690; stroke-dasharray:0 1000;stroke-width:3px;r:48;}

 1 var mulitImg = [ 2 ??????????‘http://www.cctv.com/img/2.png‘, 3 ??????????‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520235078852&di=a57664a8e118c403bf2d378757e40b08&imgtype=0&src=http%3A%2F%2Fs9.knowsky.com%2Fbizhi%2Fl%2F100001-105083%2F2009530184324945217430590.jpg‘, 4 ??????????‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520235078852&di=0a127ba0bf50857c86bd886ef355d2c9&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F593a3dba085e1.jpg‘, 5 ??????????‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520235078851&di=f1dacfe012d7e71c7469a4b0b4df2708&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad376edd5.jpg‘, 6 ??????????‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520235078851&di=b6ab0dcfbe939057988cabb0bd0f3899&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F535a1f52d5f8c.jpg‘, 7 ??????????‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520235078850&di=4f0693db95d8e117035f77d7a1d5e493&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F594336ec75b26.jpg‘ 8 ???????????9 ???????];10 ??// 调用函数， 传入图片数组11 ??load_img(mulitImg);12 ??function load_img(mulitImg)13 ??{14 ?????var svg=document.createElementNS(‘http://www.w3.org/2000/svg‘,‘svg‘);15 ???????document.body.appendChild(svg);16 ??????var svg_html=‘<circle id="backdrop" /><text x="35" y="55%" fill="red" id="txt">0%</text><circle id="progress" ?/>‘;17 ????????svg.innerHTML=svg_html;18 ?????19 ?????var idtxt=document.getElementById(‘txt‘);20 ?????var progrees=document.getElementById(‘progress‘); ??21 ?????var pro_v=parseInt(css(progrees,‘stroke-dashoffset‘)); 22 ?????var r=parseInt(css(progrees,‘r‘)); ????// 半径23 ?????var arcLength=Math.floor(2*Math.PI*r); // 周长24 ??25 ?????var taget=100;26 ?????var img = [], ?27 ??????????flag = 0; 28 ??????????29 ???????var imgTotal = mulitImg.length;30 ????????????//添加过渡效果31 ???????????progrees.style.transitionDuration=arcLength/imgTotal/100+‘s‘;32 ???????????idtxt.style.transitionDelay=arcLength/imgTotal/100/2+‘s‘;33 34 ???????for(var i = 0 ; i < imgTotal ; i++){35 ??????????img[i] = new Image();36 ??????????img[i].index=i;37 ??????????img[i].src = mulitImg[i]38 ??????????// 图片加载完成39 ??????????img[i].onload = function(){40 41 ?????????????//第i张图片加载完成42 ?????????????flag++;43 ?????????????idtxt.textContent=(flag/imgTotal).toFixed(2) *100+‘%‘; ????44 ?????????????progrees.style.strokeDasharray=arcLength*(flag/imgTotal)+‘ 1000‘;// 第二个值必须大于周长45 ??????????46 ?????????????if( flag == imgTotal ){47 ????????????????//全部加载完成48 ?????????????}49 ??????????};50 ??????????// 图片加载失败----继续执行，可以选择用另一张图片替换51 ??????????img[i].onerror = function(){52 ?????????????//第i张图片加载失败53 ????????????54 ?????????????flag++; ?// 继续执行55 ?????????????// console.log(this.index+‘:‘+this.src)56 ????????????idtxt.textContent=(flag/imgTotal).toFixed(2) *100+‘%‘; ????57 ?????????????progrees.style.strokeDasharray=arcLength*(flag/imgTotal)+‘ 1000‘;// 第二个值必须大于周长58 ?????????????if( flag == imgTotal ){59 ????????????????//全部加载完成60 ?????????????}61 ??????????};62 ???????}63 ???????64 ??????// 获取css 样式65 ??????function css(t, n) {66 ??????????return t.currentStyle ? t.currentStyle[n] : getComputedStyle(t, !1)[n]67 ????????}68 ??}