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

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

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

直接输出解决方案即可

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

1. 纯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方案无法动态调整骨架屏的形状和大小，灵活性较差。

2. 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代码，会增加一些复杂度。

3. 工具库方案：

   使用现成的工具库，例如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

Remove.bg

AI在线抠图软件，图片去除背景

102

查看详情

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

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

一种常见的做法是使用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.');
  }
}

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

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

此外，还可以使用一些第三方库来检测网络环境，例如network-information。这些库通常提供了更丰富的功能和更准确的网络信息。

副标题3

骨架屏对SEO有什么影响？如何优化？

骨架屏本身对SEO没有直接的影响，因为搜索引擎爬虫通常会等待页面加载完成后再抓取内容。但是，骨架屏可以间接地影响SEO，通过提升用户体验来提高页面排名。

一个良好的骨架屏可以减少用户的等待时间，提高用户的满意度，从而降低跳出率，增加页面停留时间。这些指标都会影响搜索引擎的排名算法。

为了优化骨架屏对SEO的影响，可以采取以下策略：

• 确保骨架屏的加载速度： 骨架屏的加载速度要尽可能快，避免阻塞页面的渲染。可以使用CDN来加速骨架屏的资源加载。
• 模拟真实内容的结构： 骨架屏应该尽可能模拟真实内容的结构，让用户对页面内容有一个大致的了解。
• 使用语义化的HTML： 在编写骨架屏的HTML结构时，应该使用语义化的HTML标签，例如<article>、<section>、<header>、<footer>等。这有助于搜索引擎理解页面内容。
• 避免过度使用骨架屏： 骨架屏只应该在数据加载期间显示，数据加载完成后应该立即替换为真实内容。过度使用骨架屏可能会影响用户体验，并对SEO产生负面影响。
• 测试和优化： 定期测试骨架屏的性能和用户体验，并根据测试结果进行优化。

总而言之，骨架屏是一种提升用户体验的有效手段，但同时也需要注意优化，才能对SEO产生积极的影响。

以上就是JS如何实现页面骨架屏 3种骨架屏方案优化加载用户体验的详细内容，更多请关注php中文网其它相关文章！