页面加载问题

当一个页面处于加载中的时候，出现这个图，等加载完毕才显示内容，请问这是怎么做的？

javascript

阅读 1.8k

3 个回答

高压郭

其实这个图叫做骨架屏，由于vue在数据渲染出来之前会出现NAN或者undefined，用户体验感非常不好，我们可以巧妙的避免这个问题，在请求接口返回数据之前显示骨架屏，待数据请求成功返回，隐藏骨架屏，显示数据。

/*设置全屏的骨架屏背景图*/
<div class="skeleton" v-if="skeleton"></div>
    
created() {
    /*是否显示骨架屏*/
    skeleton: true
}
methods() {
   fetchData().then(res => {
       console.log('数据请求成功')
        /*隐藏骨架屏*/
        this.skeleton = false
    }).catch(err => {
        this.skeleton = false
    }) 
}

蓝天海礁

1.7k31323

发布于
2018-03-22

比如说你用的请求是axios
进入页面的时候先显示那个图片
axios.post(url).then((res)=>{

if(res.code==0){
//图片隐藏
    this.data=res.data
}

})

a2774206

1.8k42853

发布于
2018-03-22

更新于
2018-03-22

<body>
<script>
//刚开始加载页面显示图片，隐藏内容或定位层级覆盖
</scirpt>


</script>
$(function(){
   //加载完成隐藏图片，显示内容
})
</script>
</body>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

页面加载问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

图片沿着圆环的转动有什么方法吗？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

使用高德地图的海量点绘制和区域绘制，区域绘制会因为海量点导致卡顿，有什么好的优化方法？