什么是骨架屏？

骷髅屏

最近，我的项目偶尔需要骷髅屏，所以我花了一些时间研究骷髅屏解决方案。 骨架屏被广泛实践，许多人已经实现了自己的解决方案。 这里我根据个人的理解做一个总结和分类，分享给大家。

关于骨架屏（简介）

骨架屏在页面数据加载之前向用户展示页面的大致结构，并在请求数据返回后渲染页面，补充必要的数据内容。 应该显示。 常用于文章列表、动态列表页面等相对标准的列表页面。 很多项目都有应用：比如饿了么h5版、知乎、Facebook等网站都有应用。 我们以图片为例：

两种使用方式

使用方式在简介中已经说明，但还可以进一步细分：

结合with使用，作为路由切换的负载在水疗中心。 根据组件生命周期和ajax请求返回时使用。

作为首屏渲染优化。

使用第一种

第一种使用方式，你自己创建一个骨架屏。 我们推荐两种类似成人的物品。 一个有用的SVG组件，定制为骨架屏解决方案

react-content-loader

vue-content-loader

作为第一个使用作为屏幕渲染（自动化方案）

该方案是饿了么在骨架屏实践中整理出来的一套方案。

骨架屏的 DOM 结构和 CSS 是离线生成的，并在构建时用作模板。 它位于节点下。

原理相关元素骨架屏插件实现原理

解决方案项目地址：page-sculpt-webpack-plugin

使用说明：

1. cssUnit 配置：必须使用自适应单位。 请根据文档中提供的选择范围进行选择。 直接由 px 生成的比率将不正确。

2. Puppeteer大约80M，安装过程中可能无法正确下载。

原理：

通过puppeteer控制服务器上的headless Ch。Rome 打开一个正在开发的页面，需要生成骨架屏幕。 等待页面加载和渲染，然后删除或添加页面上的元素，并使用层叠样式覆盖现有元素，同时保留页面布局样式。 这允许您隐藏图像和文本而不更改页面布局，或将它们显示为带有样式叠加的灰色块。 接下来，提取修改后的 HTML 和 CSS 样式，形成骨架屏幕。

其他解决方案

与 ssr 渲染/预渲染结合使用。

之前是通过SSR渲染解析将准备好的骨架屏组件插入到HTML文件中（过程与上面的自动化方案类似，只不过要自己写）。 参见文章。

1中预先创建的骨架屏组件可以用图片替换。 (SVG);

虽然小程序

的骨架屏没有预渲染的概念，但是您可以提前创建自己的骨架屏组件并将其放置在页面上。 等待异步请求数据返回。 我稍后会刷新页面。

PHP 快速学习视频免费教程（入门到精通）

如何学习 PHP？我应该从哪里学习 PHP？别担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何实现小程序内容更新红点提示（微信小程序更新提示）
• 如何使用vue完成微信官方账号页面（vue开发微信官方账号页面）
• 在html中插入视频的方法有哪些（如何在html中添加视频）？
• 如何用vue完成微信微信官方账号网页(vue写微信官方账号)

本文由主机参考刊发，转载请注明：什么是骨架屏？ https://zhujicankao.com/123800.html