鍍金池/ 問答/HTML/ vue中圖片onload預加載加進度,數(shù)據(jù)有更新,控制臺也可以打印出來,但視圖不

vue中圖片onload預加載加進度,數(shù)據(jù)有更新,控制臺也可以打印出來,但視圖不顯示進度

vue預加載圖片,顯示加載態(tài)并顯示進度

<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數(shù)據(jù):

count:0,
loadProgress:0,
loading:false,
loadColor:'#15b4fd',
loadSize:'12px',

mounted掛載后執(zhí)行:
//數(shù)據(jù)獲取完成執(zhí)行

        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("獲取系統(tǒng)設置及頁面數(shù)據(jù)成功");
                
                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;
                //設置網(wǎng)頁標題
                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; i++){
                    for(let j=0,j_length = pageDatas[i].layData.length; j<j_length; j++){
                        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;i++){
                        let count = that.count;
                        loadImage(that.appFilePath+img_arr[i],function(){
                            that.count=count+1;
                            
                            //這里執(zhí)行變更進度值
                            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("獲取系統(tǒng)設置失敗:"+sysSet.info);
                }
                if(pageData.data.state<=0){
                    console.log("獲取頁面信息失敗:"+pageData.info);
                }
            }

方法:

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.');
}

如上方法進行圖片預加載,進度視圖上不顯示,控制臺能打印出變化的進度值,好奇怪,有沒有遇到過相同問題的大大看看是咋回事?

clipboard.png

回答
編輯回答
不歸路

this.loadProgress 是渲染頁面的時候會把獲取的值帶上去,
但是不是實時變化的值,需要添加偵聽。

2017年11月17日 07:37