JS如何实现页面骨架屏 3种骨架屏方案优化加载用户体验-js教程-PHP中文网

JS如何实现页面骨架屏 3种骨架屏方案优化加载用户体验

尼克

发布： 2025-06-28 19:36:02

原创

590人浏览过

页面骨架屏的实现主要有三种方案，分别是纯css方案、js+css方案和工具库方案。1. 纯css方案通过背景色、动画等样式模拟页面结构，优点是实现简单、性能好，但灵活性差、维护困难；2. js+css方案由js生成html结构、css控制样式，灵活性高、维护性好，但需编写js代码，对性能有一定影响；3. 工具库方案使用如vue-content-placeholders等第三方库快速生成骨架屏，效率高、使用方便，但引入额外依赖会增加项目体积。选择哪种方案取决于具体需求：简单结构可用纯css，复杂结构或需动态调整则用js+css或工具库方案。

JS如何实现页面骨架屏 3种骨架屏方案优化加载用户体验

页面骨架屏，简单来说，就是在页面数据加载完成之前，先展示一个页面的大致结构，让用户知道页面正在加载，而不是一片空白。JS实现骨架屏的核心在于模拟页面的基本结构，并在数据加载完成后替换为真实内容，提升用户体验。

直接输出解决方案即可

骨架屏的实现方式有很多，这里介绍三种常见的方案，并分析它们的优缺点：

纯CSS方案：

这种方案完全依赖CSS来实现骨架屏的样式。通过设置元素的背景色、形状，模拟页面的基本结构。
- 优点： 实现简单，无需额外的JS代码，对性能影响较小。
- 缺点： 灵活性较差，难以模拟复杂的页面结构，维护性较差，修改样式需要修改CSS。
例如，可以先定义一些通用的骨架屏样式：
```
.skeleton-rect {
  width: 100%;
  height: 20px;
  background-color: #eee;
  margin-bottom: 10px;
  animation: skeleton-loading 1.5s linear infinite;
}

@keyframes skeleton-loading {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    background-color: #eee;
  }
}
```
登录后复制
然后在HTML中使用这些样式：
```
<div class="skeleton-rect"></div>
<div class="skeleton-rect"></div>
<div class="skeleton-rect" style="width: 80%;"></div>
```
登录后复制
这种方法简单粗暴，但对于复杂的页面，需要大量的CSS代码来模拟，维护起来会比较麻烦。而且，纯CSS方案无法动态调整骨架屏的形状和大小，灵活性较差。

JS + CSS方案：

这种方案结合JS和CSS来实现骨架屏。JS负责生成骨架屏的HTML结构，CSS负责定义骨架屏的样式。

优点： 灵活性较高，可以根据不同的页面结构生成不同的骨架屏，维护性较好。
缺点： 需要编写JS代码，对性能有一定影响。

例如，可以使用JS生成骨架屏的HTML结构：

function generateSkeleton(container) {
  const skeletonHTML = `
    <div class="skeleton-item">
      <div class="skeleton-avatar"></div>
      <div class="skeleton-content">
        <div class="skeleton-title"></div>
        <div class="skeleton-text"></div>
        <div class="skeleton-text"></div>
      </div>
    </div>
  `;

  container.innerHTML = skeletonHTML;
}

const container = document.getElementById('content');
generateSkeleton(container);

登录后复制

然后，使用CSS定义骨架屏的样式：

.skeleton-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #eee;
  margin-right: 16px;
  animation: skeleton-loading 1.5s linear infinite;
}

.skeleton-content {
  flex: 1;
}

.skeleton-title {
  width: 80%;
  height: 20px;
  background-color: #eee;
  margin-bottom: 8px;
  animation: skeleton-loading 1.5s linear infinite;
}

.skeleton-text {
  width: 100%;
  height: 16px;
  background-color: #eee;
  margin-bottom: 4px;
  animation: skeleton-loading 1.5s linear infinite;
}

@keyframes skeleton-loading {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    background-color: #eee;
  }
}

登录后复制

这种方法比纯CSS方案更灵活，可以根据不同的页面结构生成不同的骨架屏。但是，需要编写JS代码，会增加一些复杂度。

工具库方案：

使用现成的工具库，例如vue-content-placeholders、react-placeholder等，可以快速生成骨架屏。

优点： 使用简单，效率高，可以快速生成各种复杂的骨架屏。
缺点： 需要引入额外的依赖，可能会增加项目体积。

例如，使用vue-content-placeholders：

<template>
  <content-placeholders v-if="loading">
    <content-placeholders-img />
    <content-placeholders-heading />
    <content-placeholders-text :lines="3" />
  </content-placeholders>
  <div v-else>
    <!-- 真实内容 -->
  </div>
</template>

<script>
import ContentPlaceholders from 'vue-content-placeholders';
import ContentPlaceholdersImg from 'vue-content-placeholders/lib/ContentPlaceholdersImg.vue';
import ContentPlaceholdersHeading from 'vue-content-placeholders/lib/ContentPlaceholdersHeading.vue';
import ContentPlaceholdersText from 'vue-content-placeholders/lib/ContentPlaceholdersText.vue';

export default {
  components: {
    ContentPlaceholders,
    ContentPlaceholdersImg,
    ContentPlaceholdersHeading,
    ContentPlaceholdersText
  },
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  }
};
</script>

登录后复制

这种方法使用起来非常方便，可以快速生成各种复杂的骨架屏。但是，需要引入额外的依赖，可能会增加项目体积。

哪种方案更好？这取决于你的具体需求。如果只是简单的页面结构，纯CSS方案就足够了。如果页面结构比较复杂，或者需要动态调整骨架屏的形状和大小，JS + CSS方案或工具库方案更合适。

副标题1

骨架屏如何与真实内容无缝切换，避免闪烁？

避免闪烁的关键在于控制骨架屏的显示和隐藏时机。通常，我们会在数据加载开始时显示骨架屏，在数据加载完成后隐藏骨架屏并显示真实内容。

一种常见的做法是使用v-if或v-show等指令来控制骨架屏的显示和隐藏。例如，在Vue中：

<template>
  <div v-if="loading">
    <!-- 骨架屏 -->
    <div class="skeleton-rect"></div>
    <div class="skeleton-rect"></div>
    <div class="skeleton-rect" style="width: 80%;"></div>
  </div>
  <div v-else>
    <!-- 真实内容 -->
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      title: '',
      content: ''
    };
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.title = 'Hello World';
      this.content = 'This is the real content.';
      this.loading = false;
    }, 2000);
  }
};
</script>

登录后复制

在这个例子中，loading变量控制着骨架屏和真实内容的显示和隐藏。当loading为true时，显示骨架屏；当loading为false时，显示真实内容。

为了避免闪烁，可以在CSS中添加一些过渡效果，让骨架屏的隐藏和真实内容的显示更加平滑。例如：

.skeleton-rect {
  /* ... */
  transition: opacity 0.3s ease-in-out;
}

[v-cloak] {
  display: none; /* 初始隐藏，防止未渲染的内容闪烁 */
}

登录后复制

此外，还可以使用一些技巧来优化切换效果，例如：

使用相同的背景色： 让骨架屏和真实内容的背景色保持一致，可以减少视觉上的跳跃感。
使用模糊效果： 在骨架屏隐藏时，可以添加一个短暂的模糊效果，让切换更加平滑。
预加载： 提前加载真实内容，可以减少数据加载时间，从而减少骨架屏的显示时间。

副标题2

如何根据不同的网络环境调整骨架屏的显示策略？

在网络环境较差的情况下，数据加载时间可能会比较长，这时骨架屏的显示时间也会相应延长。为了提升用户体验，可以根据不同的网络环境调整骨架屏的显示策略。

一种常见的做法是使用navigator.connection API来检测网络环境。这个API可以获取当前设备的网络连接信息，例如网络类型、带宽等。

if (navigator.connection) {
  const type = navigator.connection.effectiveType; // "slow-2g" | "2g" | "3g" | "4g"

  if (type === 'slow-2g' || type === '2g') {
    // 网络环境较差，延长骨架屏的显示时间，或者显示更简单的骨架屏
    console.log('Network is slow, using simplified skeleton.');
  } else {
    // 网络环境较好，正常显示骨架屏
    console.log('Network is good, using normal skeleton.');
  }
}

登录后复制

根据网络环境，可以采取以下策略：

网络环境较差：
- 延长骨架屏的显示时间，让用户有足够的时间了解页面正在加载。
- 显示更简单的骨架屏，减少资源消耗。
- 使用低质量的图片或视频，减少数据传输量。
网络环境较好：
- 正常显示骨架屏。
- 预加载真实内容，减少数据加载时间。
- 使用高质量的图片或视频，提升用户体验。