摘要：整理下思路，要獲取異步加載文件的進(jìn)度要怎么做答將需要異步載入的文件放進(jìn)一個(gè)數(shù)組中。通過(guò)獲取是否加載完畢怎么繪制一個(gè)動(dòng)態(tài)的環(huán)形加載圖答需要用到的核心有。

答：將需要異步載入的文件放進(jìn)一個(gè)數(shù)組中。如下。

const scriptArr = ["./test_1.js", "./test_3.js", "./test_4.js", "./test_5.js"];

然后動(dòng)態(tài)創(chuàng)建script標(biāo)簽插入到body標(biāo)簽中。通過(guò)script.onload獲取JS是否加載完畢

答：需要用到的canvas 核心Api有：ctx.arc()。這是繪制園環(huán)的必須api.

編寫(xiě)一個(gè)circleProgress類，用來(lái)創(chuàng)建環(huán)形loading實(shí)例

    class CircleProgress {
        constructor(ctxs, width, height, arc) {
            this.ctx = ctxs
            this.width = width
            this.height = height
            this.arc = arc

            this.setArea(width, height)
        }
        //設(shè)置canvas的寬高
        setArea(width, height) {
            this.ctx.canvas.width = width
            this.ctx.canvas.height = height
        }
        //清除畫(huà)布
        clearFill() {
            this.ctx.clearRect(0, 0, this.width, this.width);
        }
         //繪制環(huán)形進(jìn)度圖的背景 顏色是可配置的 
        fillBg() {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "#ccc";
            this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
            this.ctx.stroke();
        }
        //繪制進(jìn)度條
        fillArc(x) {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "yellow";
            this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
            this.ctx.stroke();
        }
        //繪制中心數(shù)字展示
        fillText(x) {
            this.ctx.font = "14px" + " Arial";
            this.ctx.fillStyle = "red";
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = "center";
            this.ctx.fillText(x.toFixed(1) + "%", this.width / 2, this.width / 2);
        }
        //總繪制方法
        fill(x) {
            this.fillBg();
            this.fillArc(x);
            this.fillText(x);
        }

    }

大概就是這個(gè)樣子

獲取當(dāng)前JS，加載進(jìn)度

    function jsProgress(circle, eachs, max, scriptArr) {
        let currentIndex = 0;
        //遍歷所有文件名
        for (let i = 0; i < scriptArr.length; i++) {
            let scriptNode = document.createElement("script");
            scriptNode.src = scriptArr[i];
            
            //插入創(chuàng)建好的script引用節(jié)點(diǎn)
            document.getElementById("bodys").appendChild(scriptNode);
            
            //創(chuàng)建分布值 每個(gè)文件占據(jù)的進(jìn)度值 比如4個(gè)文件 每個(gè)文件占據(jù)100/4=25
            let steps = 0;
            
            //插入的文件加載完畢后的回調(diào)
            scriptNode.onload = function() {
                //按照每20毫秒一幀渲染canvas畫(huà)布 以展示出動(dòng)態(tài)的加載效果
                let ani = setInterval(function() {

                    //此處可以優(yōu)化，有好的建議可以告訴我
                    if (steps <= max || steps == 100) {
                        circle.clearFill();
                        if (steps > 100) {
                            steps = 100
                        }

                        circle.fill(steps)
                        steps++
                    } else {
                        clearInterval(ani)
                        if (max <= 100) {
                            max = max + eachs
                            currentIndex++;
                        }
                        if (currentIndex == scriptArr.length) {
                            console.log(`全部JS加載完成`)
                        }
                        console.log(`sciprtNode${i}已加載完成`)
                    }
                }, 20)

                
                
            }
        }
    }