JS multiple pictures loading Loop progress bar

The CSS section uses SVG to draw the ring

1 svg{width:100px;Height:100px;margin:15% Auto 25%;box-sizing:Border-box;Display:Block;}2 svg Circle{Fill:None;CX: -;Cy: -;}3  /*svg text{x:40;y:55;} does not work cause I don't know*/4 svg #txt{x: *;y:55%;Fill:Red;}5 svg #backdrop{Stroke-linecap:round;Stroke:#333;Stroke-width:2px;R: -;}6 svg #progress{Stroke:#690;Stroke-dasharray:0;Stroke-width:3px;R: -;}

Here JS is placed in the body tag

1 varMulitimg = [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        ];Ten   //calling a function, passing in an array of pictures One load_img (mulitimg); A   functionload_img (mulitimg) -   { -      varSvg=document.createelementns (' http://www.w3.org/2000/svg ', ' svg '); the Document.body.appendChild (SVG); -       varSvg_html= ' <circle id= "backdrop"/><text x= "" y= "55%" fill= "red" id= "TXT" >0%</text><circle id= " Progress "/>"; -Svg.innerhtml=svg_html; -       +      varIdtxt=document.getelementbyid (' txt '); -      varProgrees=document.getelementbyid (' Progress ');  +      varPro_v=parseint (CSS (progrees, ' Stroke-dashoffset ')));  A      varR=parseint (CSS (progrees, ' R '));//radius at      varArclength=math.floor (2*MATH.PI*R);//Perimeter -    -      vartaget=100; -      varIMG = [],   -Flag = 0;  -            in        varImgtotal =mulitimg.length; -             //Add transition effects toprogrees.style.transitionduration=arclength/imgtotal/100+ ' s '; +idtxt.style.transitiondelay=arclength/imgtotal/100/2+ ' s '; -  the         for(vari = 0; i < imgtotal; i++){ *Img[i] =NewImage (); $img[i].index=i;Panax NotoginsengIMG[I].SRC =Mulitimg[i] -           //Picture Loading Complete theImg[i].onload =function(){ +  A              //I picture loading complete theflag++; +Idtxt.textcontent= (flag/imgtotal). toFixed (2) *100+ '% '; -progrees.style.strokedasharray=arclength* (flag/imgtotal) + ' 1000 ';//The second value must be greater than the perimeter $            $              if(Flag = =imgtotal) { -                 //Full load Complete -              } the           }; -           //picture failed to load----continue, you can choose to replace it with another pictureWuyiImg[i].onerror =function(){ the              //I picture failed to load -              Wuflag++;//Continue execution -              //Console.log (this.index+ ': ' +this.src) AboutIdtxt.textcontent= (flag/imgtotal). toFixed (2) *100+ '% '; $progrees.style.strokedasharray=arclength* (flag/imgtotal) + ' 1000 ';//The second value must be greater than the perimeter -              if(Flag = =imgtotal) { -                 //Full load Complete -              } A           }; +        } the         -       //Get CSS Styles $       functioncss (t, N) { the           returnT.currentstyle? T.currentstyle[n]: getComputedStyle (t,!1) [n] the         } the}

JS multiple pictures loading Loop progress bar