html如何实现骨架屏 页面加载骨架屏效果

骨架屏通过html结构模拟页面元素、css添加动画效果、javascript控制加载流程来提升用户体验。1. html使用占位元素搭建页面结构，如.skeleton-rect、.skeleton-image等；2. css设置背景渐变和动画实现动态加载效果；3. javascript监听加载完成事件并替换为真实内容。此外还可借助框架组件、css预处理器、服务端渲染等方式实现。优化方面应注重模拟真实布局、动画增强体验、减少骨架屏加载时间、根据网络状况调整显示时长，并确保无障碍性。适用于数据加载慢、页面复杂、首次访问、网络不稳定及移动端场景，但不建议用于加载速度快的简单页面。

HTML实现骨架屏，本质上就是在数据加载完成前，先用一些占位元素模拟页面的大致结构，给用户一个“页面正在加载中”的视觉反馈，避免长时间白屏带来的焦虑感。

页面加载骨架屏效果可以通过HTML、CSS和少量JavaScript来实现，核心思路是用静态的HTML结构和CSS样式模拟页面的主要内容，然后在数据加载完成后，用真实数据替换这些占位元素。

解决方案：

立即学习“前端免费学习笔记（深入）”；

1. HTML结构： 创建HTML骨架，用

   等元素模拟页面结构，设置好基本的宽高和位置。可以使用一些通用的类名，比如.skeleton-rect、.skeleton-circle等，方便统一管理样式。

   <div class="container">
       <div class="skeleton-image"></div>
       <div class="skeleton-title"></div>
       <div class="skeleton-text"></div>
       <div class="skeleton-button"></div>
   </div>

   登录后复制

2. CSS样式： 为骨架元素添加CSS样式，设置背景颜色、圆角、动画等，使其看起来更像一个加载中的页面。可以使用渐变动画，模拟数据加载的动态效果。

   .skeleton-rect {
       width: 100%;
       height: 20px;
       background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
       background-size: 200% 100%;
       animation: skeleton-loading 1.5s linear infinite;
       border-radius: 4px;
       margin-bottom: 10px;
   }
   
   .skeleton-image {
       width: 100px;
       height: 100px;
       border-radius: 50%;
   }
   
   @keyframes skeleton-loading {
       0% {
           background-position: 200% 0;
       }
       100% {
           background-position: -200% 0;
       }
   }

   登录后复制

3. JavaScript控制： 使用JavaScript在页面加载时显示骨架屏，并在数据加载完成后，移除骨架屏，显示真实数据。

   document.addEventListener('DOMContentLoaded', () => {
       // 模拟数据加载
       setTimeout(() => {
           const container = document.querySelector('.container');
           container.innerHTML = `
               @@##@@
               <h2>真实标题</h2>
               <p>真实内容...</p>
               <button>按钮</button>
           `;
       }, 2000); // 2秒后加载数据
   });

   登录后复制

骨架屏的实现并不复杂，但它可以显著提升用户体验，尤其是在网络状况不佳的情况下。

骨架屏有哪些常见的实现方式？

除了上面提到的HTML、CSS和JavaScript的组合，还有一些其他的实现方式：

• 使用现成的库或框架： 很多前端框架，如React、Vue等，都有现成的骨架屏组件可以使用，可以大大简化开发过程。例如，React可以使用react-skeleton-loading等库。
• CSS预处理器： 使用Sass或Less等CSS预处理器，可以更方便地管理骨架屏的样式，例如，可以使用循环生成多个骨架元素。
• 服务端渲染（SSR）： 在服务端渲染时，可以先生成骨架屏的HTML，然后将其发送到客户端，这样可以更快地显示页面内容。
• 渐进式加载： 可以结合渐进式加载，先加载页面的骨架屏，然后逐步加载其他内容，例如图片、视频等。

选择哪种方式取决于具体的项目需求和技术栈。如果项目比较简单，可以直接使用HTML、CSS和JavaScript实现；如果项目比较复杂，可以考虑使用现成的库或框架。

如何优化骨架屏的用户体验？

骨架屏不仅仅是简单的占位符，它还可以通过一些优化来提升用户体验：

• 模拟真实内容： 骨架屏应该尽可能地模拟真实内容的结构和样式，让用户对页面内容有一个大致的了解。
• 使用动画效果： 添加一些动画效果，例如渐变、闪烁等，可以增强骨架屏的视觉效果，让用户感觉页面正在加载中。
• 考虑加载速度： 骨架屏本身也需要快速加载，避免出现长时间的白屏。可以对骨架屏的HTML和CSS进行优化，减少文件大小。
• 根据网络状况调整： 可以根据用户的网络状况，动态调整骨架屏的显示时间。例如，在网络状况较差的情况下，可以显示更长时间的骨架屏。
• 无障碍性： 确保骨架屏具有良好的无障碍性，方便残障人士使用。例如，可以添加aria-label属性，描述骨架屏的作用。

骨架屏的目的是为了提升用户体验，因此在实现过程中，需要不断地进行测试和优化，找到最适合自己的方案。

骨架屏在哪些场景下比较适用？

骨架屏并非适用于所有场景，它在以下场景下通常能发挥更大的作用：

• 数据加载时间较长： 当页面需要加载大量数据，或者数据来自远程服务器时，骨架屏可以有效地缓解用户的等待焦虑。
• 页面结构复杂： 对于结构复杂的页面，骨架屏可以帮助用户快速了解页面的整体布局，提高用户体验。
• 首次加载： 在首次加载页面时，由于浏览器缓存为空，加载速度通常较慢，此时使用骨架屏可以提供更好的用户体验。
• 网络状况不稳定： 在网络状况不稳定的情况下，骨架屏可以作为一种优雅的降级方案，避免页面出现长时间的白屏。
• 移动端应用： 移动端应用的加载速度通常比PC端慢，因此骨架屏在移动端应用中更为重要。

当然，在一些简单的页面，或者数据加载速度很快的情况下，可能并不需要使用骨架屏。是否使用骨架屏，需要根据具体的场景进行评估。