使用 JavaScript 为网页生成 SVG 骨架图

近几十年来，XHR 及其相关功能已得到广泛使用。从那时起，越来越多的网站现在以 Web 应用的形式出现。为了通过渐进式加载改善用户体验，许多应用使用骨架屏幕来缓解未知的感觉，而不是在等待时显示空白屏幕。

什么是骨架屏

这是从服务器加载数据时显示的灰色形状，而不是显示经典的旋转器。 —-^什么是骨架屏 💀?

⬆️ 看这 ⬆️

为什么要用骨架屏

看看这个比较，带有骨架的 UI 似乎有更少的重排，我认为这更令人欣慰。

此图片来自 ^What is a skeleton screen 💀?

不同类型的骨架屏

元素 + CSS

请查看 https://freefrontend.com/css-skeleton-loadings/

图片(非 SVG)

只是不同的图像表示类型取决于您的设计师给出的内容。用作背景图像或图像元素的来源。

SVG

SVG 文件的结构与 HTML 文件非常相似，因为它们都是基于 XML 的文件格式。此外，SVG 文件可以直接在 HTML 中呈现，而无需使用 <img> 或 background-image CSS。

以下是渲染矩形的示例：

html

<div style="width: 100px; height: 100px; background-color: red;">
</div>

svg

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="red" />
</svg>

HTML	SVG

要了解更多属性，请查看 https://www.w3schools.com/graphics/svg_rect.asp

很简单，对吧？

如何从 HTML 生成 SVG 骨架屏图片

完整代码在 https://github.com/LynanBreeze/web-skeleton-generator

1. 对每个 HTML DOM 树节点，从顶部到底部，从外部到内部，收集大小和位置
2. 当 DOM 节点是叶节点或具有背景颜色时，将 rect 节点添加到 SVG 文件
3. 将这些 rect 节点包装在 <svg> 标签中
4. 完成~

可视化过程如下所示⬇️：

有些节点应该被跳过，例如：

1. 没有背景的非媒体元素（大多数是占位符元素）
2. 没有样式或只有 1 个子元素的 <a>