在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 頁(yè)面加載問(wèn)題

頁(yè)面加載問(wèn)題

clipboard.png
當(dāng)一個(gè)頁(yè)面處于加載中的時(shí)候，出現(xiàn)這個(gè)圖，等加載完畢 才顯示內(nèi)容，請(qǐng)問(wèn)這是怎么做的？

回答
編輯回答
熊出沒(méi)

其實(shí)這個(gè)圖叫做骨架屏，由于vue在數(shù)據(jù)渲染出來(lái)之前會(huì)出現(xiàn)NAN或者undefined，用戶(hù)體驗(yàn)感非常不好，我們可以巧妙的避免這個(gè)問(wèn)題，在請(qǐng)求接口返回?cái)?shù)據(jù)之前顯示骨架屏，待數(shù)據(jù)請(qǐng)求成功返回，隱藏骨架屏，顯示數(shù)據(jù)。

/*設(shè)置全屏的骨架屏背景圖*/
<div class="skeleton" v-if="skeleton"></div>
    
created() {
    /*是否顯示骨架屏*/
    skeleton: true
}
methods() {
   fetchData().then(res => {
       console.log('數(shù)據(jù)請(qǐng)求成功')
        /*隱藏骨架屏*/
        this.skeleton = false
    }).catch(err => {
        this.skeleton = false
    }) 
}
2017年9月23日 14:13
編輯回答
擱淺

比如說(shuō)你用的請(qǐng)求是axios
進(jìn)入頁(yè)面的時(shí)候先顯示那個(gè)圖片
axios.post(url).then((res)=>{

if(res.code==0){
//圖片隱藏
    this.data=res.data
}

})

2017年12月15日 17:02
編輯回答
夢(mèng)一場(chǎng)
<body>
<script>
//剛開(kāi)始加載頁(yè)面顯示圖片，隱藏內(nèi)容或定位層級(jí)覆蓋
</scirpt>


</script>
$(function(){
   //加載完成隱藏圖片，顯示內(nèi)容
})
</script>
</body>
2017年10月9日 14:04