vue preloads pictures, shows loading status and shows progress

<div class="load-progress" v-show="loading">
    <sync-loader :loading="loading" :color="loadColor" :size="loadSize" class="load-status"></sync-loader>
    <div class="load-text" v-show="loadProgress">{{loadProgress}}%</div>
</div>

data data:

count:0,
loadProgress:0,
loading:false,
loadColor:"-sharp15b4fd",
loadSize:"12px",

execute after mounted mount:
/ / data acquisition completed

        this.$axios.all([getSystemData(), getPageData()]).then(that.$axios.spread((sysSet, pageData) => {
            //console.log(pageData,sysSet);
            if(sysSet.data.state>0&&pageData.data.state>0){
                //console.log("");
                
                let sysData = sysSet.data.data.h5_c;
                that.systemData.sys_title = sysData.sys_title;
                that.systemData.sys_bg_on = sysData.sys_bg_on;
                that.systemData.sys_bg_img = sysData.sys_bg_img;
                that.systemData.sys_audio_on = sysData.sys_audio_on;
                that.systemData.sys_bg_audio = sysData.sys_bg_audio;
                that.systemData.sys_bg_audio_name = sysData.sys_bg_audio_name;

                let pageDatas = pageData.data.data.h5_c;
                that.pageData = pageDatas;
                //
                that.setTitle(sysData.sys_title);
                
                //
                let img_arr = [];
                if(sysData.sys_bg_on){
                    img_arr.push(sysData.sys_bg_img);
                }
                for(let i=0,length=pageDatas.length; i<length; iPP){
                    for(let j=0,j_length = pageDatas[i].layData.length; j<j_length; jPP){
                        if(pageDatas[i].layData[j].lay_img){
                            img_arr.push(pageDatas[i].layData[j].lay_img);
                        }
                    }
                }
                
                let img_count = img_arr.length;
                
                function loadImage(url, callback){ 
                    let img = new Image();
                    if(img.complete){
                        callback(img);
                        return;
                    }else{
                        img.onload = function(){
                            callback(img);
                            img.onload = null;
                        }
                    }
                    img.src = url;
                }
                
                if(img_count>0){
                    for(let i=0;i<img_count;iPP){
                        let count = that.count;
                        loadImage(that.appFilePath+img_arr[i],function(){
                            that.count=count+1;
                            
                            //
                            that.loadingProgress(that.count,img_count);
                            if(that.count==img_count){
                                that.loading=false;
                                //that.loadProgress=100;
                                initFirst();
                            }
                        });
                    }
                }else{
                    that.loading=false;
                    initFirst();
                }
            }else{
                if(sysSet.data.state<=0){
                    console.log(":"+sysSet.info);
                }
                if(pageData.data.state<=0){
                    console.log(":"+pageData.info);
                }
            }

method:

loadingProgress(cur,total){
    let progress = (cur/total)*100;
    progress=Math.round(progress);
    if(progress>=100){
        progress=100;
        this.loading=false;
    }
    this.loadProgress=progress;
    console.log(this.loadProgress+"% loaded.");
}

the picture is preloaded in the above method, but it is not shown on the progress view, and the console can print the changed progress value. It is strange to see what is going on if you have ever encountered the same problem.