一种自动化生成骨架屏的方案 about jocs.github.io HOT 44 OPEN

请问下，在js里还需要ajax请求数据，这个时候可能挂载点的骨架页面已经被替换了，但是数据还没回来，这个时候不是也有问题吗，请问这个要如何解决

from jocs.github.io.

厉害厉害，老大要我调研这个骨架屏，我想着也是用puppeteer执行js，然后生成一个骨架屏的html和css, 没想到又有大佬做了

from jocs.github.io.

写的还不错，赞一个

from jocs.github.io.

https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/skeleton 这有一个vue的骨架屏组件，你们可以去看一看

from jocs.github.io.

@zhanfenghai React 或者 Vue 启动后，会自动使用真实数据渲染的页面替换骨架页面。

from jocs.github.io.

@zoumm 谢谢，这是上周六在第三届前端千人峰会上的分享演讲稿。

from jocs.github.io.

微信小程序骨架屏自动构建工具有木有呢

from jocs.github.io.

@boylufeng20141007 暂时没有。

from jocs.github.io.

很棒，点赞👍

from jocs.github.io.

nice

from jocs.github.io.

学习了 好腻害

from jocs.github.io.

学习了

from jocs.github.io.

那想问下 骨架屏渲染出来之后，接着真实页面是通过什么方式展现出来的呢

from jocs.github.io.

太腻害了，这才是前端啊。(ÒωÓױ)！！！

from jocs.github.io.

有完整的demo例子吗？

from jocs.github.io.

@Light-Snow examples里面有一个https://github.com/ElemeFE/page-skeleton-webpack-plugin

from jocs.github.io.

厉害

from jocs.github.io.

@yibingxiong

还有，在页面启动后，我们可能还是会通过 AJAX 获取后端数据，这时候我们也可以通过 骨架屏 来作为一种加载状态。也就是说，其实我们可以在「非首屏骨架屏」上做一些工作。

from jocs.github.io.

原来文中有了，没太仔细看。感谢！
另，我们现在有个需求，我们有个已经上线的项目想加上骨架屏，但是没有mock数据，本地很难跑起来，每次开发都是用代理工具将js指向本地进行的。所以希望能跑线上的代码生成骨架屏的html和css，但是您的插件貌似不支持，感觉这种需求会比较多，要是能支持就好了。

from jocs.github.io.

原来文中有了，没太仔细看。感谢！
另，我们现在有个需求，我们有个已经上线的项目想加上骨架屏，但是没有mock数据，本地很难跑起来，每次开发都是用代理工具将js指向本地进行的。所以希望能跑线上的代码生成骨架屏的html和css，但是您的插件貌似不支持，感觉这种需求会比较多，要是能支持就好了。

跑线上代码生成骨架屏你指的应该是用线上数据吧？毕竟你这个功能还没上线不是...
另外骨架屏主要针对的是layout结构，即使数据有写差异应该也不影响生成的骨架屏。
所以我觉得你这个应该是伪需求....不知道我理解的对不对

from jocs.github.io.

也算是，作为一个开源插件来说page-skeleton-webpack-plugin已经做的非常好了，比较通用。我的问题借鉴这个东西解决了

from jocs.github.io.

在同步一个，经过思考，我的处理方式是不把骨架放在Vue组件挂载的节点上，而是另外取一个节点专门用来放骨架；同时写一个ajax拦截器，等ajax进度完成后，remove掉骨架节点。
不知道这个方式你怎么看~可以的话，想知道有没有其他做法。

我觉得都可以啊，怎么方便，怎么优雅就怎么来

from jocs.github.io.

跑了下 效果很棒~ 虽然有些地方算的不是很准，但作为启动屏很好了。

from jocs.github.io.

你好，请教个问题，你说用puppeteer在服务端生成骨架屏，这个是怎么做的，可以讲解一下吗。
我这边想不通点是既然是通过js计算得到骨架，那么用户设备的尺寸等是怎么获取到的呢？
提前感谢哈，抱拳

from jocs.github.io.

@FoxDaxian 建议参这个项目代码：https://github.com/ElemeFE/page-skeleton-webpack-plugin

from jocs.github.io.

学习了，之前想使用数据加载之前的 html 结构作为「骨架图」，但是效果也是一般。

from jocs.github.io.

厉害 大佬了

from jocs.github.io.

在我们构建骨架屏的过程中，其 DOM 结构和真实页面的 DOM 结构基本相同，只是添加了一些行内样式和 classname，我们也在思考这些 DOM 能够被复用，也就是在应用启动时重新创建所有 DOM。我们只用激活这些骨架屏 DOM，让其能够相应数据的变化，这似乎就可以使骨架屏和真实页面更好的融合。

想问下这个方式有在实践了吗，感觉很棒呢

from jocs.github.io.

请问下，在js里还需要ajax请求数据，这个时候可能挂载点的骨架页面已经被替换了，但是数据还没回来，这个时候不是也有问题吗，请问这个要如何解决
请问这个问题解决了么？

from jocs.github.io.

不支持服务端渲染后的单页跳转吗

from jocs.github.io.

@chentianyuan 嗯，不支持

from jocs.github.io.

非常赞

from jocs.github.io.

一个要服务端渲染使用吗?

from jocs.github.io.

不是特别理解这个动态生成过程，感觉还是有点懵，请问有demo吗？ 前端小白

from jocs.github.io.

请问大佬，SkeletonPlugin.prototype.apply这个方法是什么在哪里调用的

from jocs.github.io.

这个代码写在哪里啊 ？？

from jocs.github.io.

from jocs.github.io.

“也就是在应用启动时重新创建所有 DOM。我们只用激活这些骨架屏 DOM，让其能够相应数据的变化，这似乎就可以使骨架屏和真实页面更好的融合。”

这句话读不通，希望楼主再解释下

from jocs.github.io.

厉害，有个疑问，生成的骨架屏html里也是有html、body，style标签的吧，插入div#app后，不会引起问题吗？

from jocs.github.io.

请问下这个可以实时编译的工具是什么

from jocs.github.io.

基于webpack打包工具？vite能用吗？谢谢！

from jocs.github.io.

看看写的ssr框架 实现了页面按访问加载和按需加载，与代码切割
实现了spa同构，路由同构，数据同构。
利用 webpack-dev-middleware 和 webpack-hot-server-middleware 实现 编译内存访问。
地址：https://github.com/qq281113270/react-ssr-lazy-loading

from jocs.github.io.

大佬，像这种页面上有哪些组件以及组件位置需要根据最后数量改变的情况，一开始不能确定的场景适用么

from jocs.github.io.

from jocs.github.io.