半自动骨架屏思路大公开，体验飞升不再遥远

前端

2023-10-17 20:23:12

骨架屏并不是什么新鲜概念，十年前就已出现。但随着技术的发展，其生成方式和使用场景也不断更新。本文将探讨半自动生成骨架屏的思路，并提供详细的步骤和代码示例，助力开发者提升页面性能和用户体验。

骨架屏概述

骨架屏是一种渐进式加载技术，在页面加载初期展示一个占位页面，随后逐步加载实际内容。通过这种方式，用户可以在页面加载期间看到内容的轮廓，从而提升体验。

半自动骨架屏

半自动骨架屏是一种在 HTML 和 CSS 的帮助下，自动生成骨架屏的方法。它无需编写复杂的 JavaScript 代码，且兼容性良好。

实现步骤

1. 准备 HTML 结构

使用 HTML 为页面内容创建骨架：

<div class="content-container">
  <div class="image-container"></div>
  <div class="text-container">
    <div class="title"></div>
    <div class="description"></div>
  </div>
</div>

2. 编写 CSS 规则

使用 CSS 设置骨架元素的样式：

.content-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-container {
  width: 100%;
  height: 200px;
  background-color: #e0e0e0;
}

.text-container {
  flex: 1;
}

.title {
  height: 30px;
  background-color: #e0e0e0;
}

.description {
  height: 100px;
  background-color: #e0e0e0;
}

3. 渐进式加载

使用 JavaScript 或 CSS 实现渐进式加载：

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    document.querySelector(".content-container").classList.add("loaded");
  }, 500);
});

// CSS
.content-container.loaded {
  background-color: white;
}

.content-container.loaded .image-container {
  background-image: url(image.jpg);
}

.content-container.loaded .title {
  background-color: black;
  color: white;
}

.content-container.loaded .description {
  background-color: black;
  color: white;
}