让用户享受骨架屏，而不是白屏

用户对高性能网页的需求日益增长，希望页面快速加载并在网络延迟或拥堵的情况下正常工作。加载状态是用户在等待页面加载时看到的内容。精心设计的加载状态可以减少用户的等待时间，提高用户体验。

什么是骨架屏

骨架屏是一种占位符，用于在内容加载之前显示页面布局。它通常由简单的形状和颜色组成，例如矩形和灰色。骨架屏可以帮助用户了解页面的结构和内容的相对位置。当内容加载后，骨架屏会被替换为实际内容。

为什么使用骨架屏

使用骨架屏有几个好处：

• 减少用户的等待时间。当用户看到骨架屏时，他们知道页面正在加载，并可以开始了解页面的布局。这可以减少他们的等待时间，让他们感觉页面加载得更快。
• 提高用户体验。精心设计的骨架屏可以使页面加载过程更具吸引力和趣味性。这可以提高用户体验，让用户对网站的印象更好。
• 帮助用户了解页面的结构和内容的相对位置。骨架屏可以帮助用户了解页面的结构和内容的相对位置。这可以让他们在内容加载后更容易找到所需的信息。

如何使用CSS自定义属性构建骨架屏

使用CSS自定义属性构建骨架屏非常简单。只需按照以下步骤操作即可：

1. 定义CSS自定义属性。您可以使用--前缀来定义CSS自定义属性。例如：

:root {
  --skeleton-color: #efefef;
  --skeleton-width: 100%;
  --skeleton-height: 200px;
}

2. 将CSS自定义属性应用到元素上。您可以使用var()函数来将CSS自定义属性应用到元素上。例如：

.skeleton {
  background-color: var(--skeleton-color);
  width: var(--skeleton-width);
  height: var(--skeleton-height);
}

3. 当内容加载后，隐藏骨架屏。当内容加载后，您可以使用JavaScript来隐藏骨架屏。例如：

document.addEventListener("DOMContentLoaded", function() {
  var skeletons = document.querySelectorAll(".skeleton");
  for (var i = 0; i < skeletons.length; i++) {
    skeletons[i].classList.add("hidden");
  }
});

结论

使用CSS自定义属性构建骨架屏非常简单。骨架屏可以减少用户的等待时间，提高用户体验，帮助用户了解页面的结构和内容的相对位置。因此，在您的下一个项目中，不妨尝试使用骨架屏来改善用户体验。