鍍金池/ 問答/HTML/ 頁面加載問題

頁面加載問題

clipboard.png
當一個頁面處于加載中的時候，出現(xiàn)這個圖，等加載完畢 才顯示內容，請問這是怎么做的？

回答
編輯回答
熊出沒

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

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

比如說你用的請求是axios
進入頁面的時候先顯示那個圖片
axios.post(url).then((res)=>{

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

})

2017年12月15日 17:02
編輯回答
夢一場
<body>
<script>
//剛開始加載頁面顯示圖片，隱藏內容或定位層級覆蓋
</scirpt>


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