html如何实现骨架屏页面加载骨架屏效果-html教程-PHP中文网

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

尼克

发布： 2025-06-24 11:59:01

原创

966人浏览过

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

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

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

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

解决方案：

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

HTML结构： 创建HTML骨架，用<div>等元素模拟页面结构，设置好基本的宽高和位置。可以使用一些通用的类名，比如.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>
```
登录后复制

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;
    }
}

登录后复制

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

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

登录后复制

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

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

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

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

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

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

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

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