Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

骨架屏结束的时机,能否在组件加载完数据之后 #18

Open
HenryWong-fe opened this issue May 16, 2018 · 12 comments
Open

骨架屏结束的时机,能否在组件加载完数据之后 #18

HenryWong-fe opened this issue May 16, 2018 · 12 comments

Comments

@HenryWong-fe
Copy link

目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果
@xiaoiver
Copy link
Collaborator

xiaoiver commented May 16, 2018 •
edited

目前骨架屏的 HTML 会被插入项目的 Vue 挂载点里，默认情况是 <div id="app">，也可以配置。
这样调用 $mount() 方法时，骨架屏内容就会被真实内容替换掉，也就不再展示了。

所以我理解页面请求数据的时机和 调用 $mount() 方法的时机才是关键。

比如我们目前在 Lavas 项目中的做法是：

  1. JS 加载完成后立即调用 $mount() 渲染 App.vue，这样头部立即出现，骨架屏内容已经被替换掉了。
  2. 把页面请求数据的操作放在路由页面的钩子中，也就是渲染路由页面前先获取需要的数据，在这期间加上 Loading 提示。

@wlxscn
Copy link

wlxscn commented May 23, 2018

我理解是加载完js是不是骨架屏的内容就被替换掉了，请求的数据还没回来的话还是会白屏。是不是可以在请求数据回来之后再执行$mount,类似ssr那样写一个async方法

@martinko2009
Copy link

martinko2009 commented Jul 2, 2018 •
edited

我发现，骨架屏内容没有被真实内容替换掉，还在页面显示呢。
我要在下面的代码里插入骨架屏，但是发现骨架屏的代码在<div class="loginheadercontainer">这个dom之上还存在着不知道是什么原因，是不是我哪里写错了：

<body>
	<div class="m_main" id="loginpage">
		<div class="loginheadercontainer">
			<div class="leftarea">&nbsp;</div>
			<div class="loginheader">
				<div class="logo"></div><!--
			 --><div class="text">
					<span>XXXXXX</span>
				</div>
			</div>
			<div class="rightarea">&nbsp;</div>
		</div>
	</div>
</body>

配置如下：

new SkeletonWebpackPlugin({
	webpackConfig: {
		entry: skeletonEntries
	},
	insertAfter:'<div class="m_main" id="loginpage">'
}),

@xiaoiver
Copy link
Collaborator

xiaoiver commented Jul 3, 2018 •
edited

@martinko2009，从你的代码上看，构建阶段 Skeleton 插入到 HTML 这一步是 OK 的。
然后在 Vue 运行之后，如果挂载点也是 <div class="m_main" id="loginpage">，Skeleton 内容等于是被覆盖掉了：

new MyComponent().$mount('#loginpage')
// 同上
new MyComponent({ el: '#loginpage' })

@confidencefnt
Copy link

目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果？而且第一次访问页面会出现骨架，但是第二次再次进入的话还是请求也是白屏。 这样效果很不好

@confidencefnt
Copy link

多路由，path必须是类似 /page1， /page2， 但是/page1?source=xxx这样子无效

@xiaoiver xiaoiver mentioned this issue Sep 13, 2018
Closed
@xiaoiver
Copy link
Collaborator

xiaoiver commented Sep 13, 2018 •
edited

@confidencefnt ，确实是一个 bug，应该是字符串转成的正则有问题，后续修复情况可以关注 #45
另外 path 除了字符串，也支持正则的（稍后会完善下文档说明）。可以直接写 path: /^\/page1/ 这样就能匹配 /page1?source=xxx 了。

@xuexb
Copy link

xuexb commented May 28, 2019

我感觉调整 $mount() 时机肯定不靠谱啊，比如：我的数据依赖 Vuex 、还做了 Vue-router 导航守卫，这些都得先初始化 Vue ，可不可以换种思路，骨架屏提供一些接口（显示、隐藏），默认自己页面的元素都被隐藏，而骨架屏的容器高于 #app ，当自己需要的数据处理完成，需要显示页面时，调用骨架屏接口让其隐藏。

当然，只是一个思路。

@surissss
Copy link

surissss commented Jul 9, 2019

请问这个问题有人解决了吗？

@catyumouse
Copy link

进来看一下这个问题，现在有人解决这个问题了嘛，什么思路呀，求告知。

@mumu1993
Copy link

想请问下插件是在什么时机去隐藏骨架屏的呢？具体代码是在哪里呢？

@57982593
Copy link

57982593 commented Jun 2, 2021

如果把骨架屏当成背景，然后页面加载过来后直接覆盖会怎么样？

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@martinko2009 @xiaoiver @xuexb @confidencefnt @wlxscn @mumu1993 @catyumouse @HenryWong-fe @surissss @57982593